오늘 끝나면
HTML과 CSS
- ✓HTML과 CSS의 핵심 문제를 한 문장으로 설명한다
- ✓오른쪽 실습에서 HTML과이 어떻게 움직이는지 관찰한다
- ✓다음 강의와 이어지는 한계를 말할 수 있다
실습 미션
웹페이지의 뼈대와 화장 — 구조 따로, 꾸미기 따로 이 문장이 실제로 무슨 뜻인지 실습에서 한 번 손으로 확인한다.
성공 조건
- □실습의 기본값을 먼저 관찰
- □입력값이나 모드를 한 번 이상 바꿔 결과 비교
- □왜 결과가 바뀌었는지 한 문장으로 설명
개발 · Day 10 / 웹페이지의 재료
뼈대 따로
꾸밈 따로
웹페이지는 두 재료로 됨. HTML은 무엇이 있나(구조·내용). CSS는 그게 어떻게 보이나(색·여백·배치). 둘을 일부러 갈라놓음.
HTML — 무엇이 있는가
웹페이지를 열면 보이는 제목·문단·버튼. 그 뼈대를 적은 게 HTML임.
HTML은 HyperText Markup Language의 줄임임. 글에 꼬리표(태그)를 다는언어임. 제목엔 "이건 제목", 문단엔 "이건 문단" 하고 표시함.
태그는 여는 것·닫는 것이 짝임. <h1>제목</h1>처럼 감쌈. h1은 가장 큰 제목 / p는 문단(paragraph)임.
HTML은 꾸밈을 모름. 색도 크기도 안 정함. "여기 제목, 여기 문단"이라는 뼈대만 말함.
여는 태그·내용·닫는 태그가 짝 — 색도 크기도 없는 순수 뼈대
CSS — 어떻게 보이는가
뼈대만 있으면 밋밋함. 거기에 색·크기·여백·배치를 입히는 게 CSS임.
CSS는 Cascading Style Sheets의 줄임임. "제목은 파랑, 글자는 크게, 가운데로" 같은 꾸밈 규칙을 모아둔 것임.
규칙 하나는 이렇게 생김 — h1 { color: blue; }. "모든 h1을 파랑으로"라는 뜻임. font-size는 글자 크기 / padding은 안쪽 여백임.
같은 HTML이라도 CSS만 갈아끼우면 모습이 완전히 달라짐. 내용은 그대로 / 옷만 바뀜.
내용은 그대로 두고 옷만 갈아입힘 — 그게 CSS가 하는 일
왜 일부러 갈라놨나
뼈대(HTML)와 꾸밈(CSS)을 한 파일에 섞을 수도 있었음. 근데 일부러 나눔.
섞어두면 디자인 한 번 바꿀 때 모든 페이지를 다 뜯어고쳐야 함. 갈라놓으면 CSS 한 곳만 고쳐도 사이트 전체 색이 한 번에 바뀜.
역할도 나뉨. 내용 쓰는 사람은 HTML만 / 꾸미는 사람은 CSS만 보면 됨. 서로 안 밟음.
기계한테도 좋음. 검색엔진·화면낭독기는 HTML 뼈대만 보고 "여기가 제목, 여기가 문단"을 이해함. 꾸밈은 안 봐도 됨. 이걸 관심사 분리라고 함.
따로 짓고 합쳐 그림 — 한쪽만 고쳐도 다른 쪽은 안 건드림
직접 굴려보기
말로는 어려움. 오른쪽에서 직접 해보셈. 위는 HTML / 아래는 CSS임.
위쪽 버튼으로 <h1>·<p>·<button>을 넣고 빼보라. 미리보기에서 블록이 생겼다 사라짐 — 구조를 바꾸는 일임.
아래 슬라이더로 글자 크기·여백·색을 굴려보라. 같은 블록이 모습만 변함 — 꾸밈을 바꾸는 일임.
태그를 빼도 슬라이더 값은 그대로 남음. 둘이 따로 논다는 게 한눈에 보임. 이 분리가 웹 전체를 떠받침.
코드 보기
<!-- HTML: 무엇이 있나 -->
<h1>안녕, 웹.</h1>
<p>이 한 줄은 문단임.</p>
/* CSS: 어떻게 보이나 */
h1 { font-size: 28px;
color: blue;
text-align: center; }둘을 잇는 한 가지 — 선택자
따로 논다면 CSS는 어느 HTML을 꾸밀지 어떻게 아나. 답은 선택자임.
CSS 규칙 맨 앞 글자가 선택자임. h1이라 쓰면 "모든 h1을 겨냥"임. p라 쓰면 모든 문단임. 겨냥한 뒤 옷을 입힘.
더 콕 집고 싶으면 이름표를 붙임. HTML에 class="hero"를 달고, CSS에 .hero라 쓰면 그 블록만 꾸밈. 점(.)이 "클래스 이름"이라는 신호임.
여기까지가 웹페이지 재료임. HTML로 짓고 / CSS로 입히고 / 선택자로 이음. 다음은 이 재료를 받아 화면에 그려내는 브라우저 차례임.
Q. 그럼 JavaScript는 뭐임?
HTML·CSS는 가만히 있는 페이지를 만듦 — 구조·꾸밈까지임. 거기에 움직임·반응을 더하는 게 자바스크립트임. 버튼 누르면 뭔가 일어나게 하는 부분임. 셋이 모여 웹페이지가 됨 — HTML(뼈대)·CSS(옷)·JS(행동).선택자가 HTML을 겨냥하면, 그에 맞는 모든 블록에 꾸밈이 입혀짐