웹 페이지는 무엇으로 이루어지는가

화면 하나를 세 가지가 나눠 맡습니다

브라우저가 웹 페이지를 그릴 때 읽는 것은 세 가지입니다. 맡은 일이 서로 다릅니다.

• HTML — 무엇이 있는지 적습니다. 제목·문단·그림·단추가 그것입니다.
• CSS — 그것이 어떻게 보일지 정합니다. 색·크기·자리를 정합니다.
• JavaScript — 눌렀을 때 무엇이 일어날지 정합니다.

이 트랙은 앞의 둘을 다룹니다. JavaScript 는 JS 커리큘럼 에서 이어집니다.

HTML 만 있을 때

CSS 가 없는 화면입니다. 그런데도 제목이 크고 굵게 나옵니다. 브라우저가 태그마다 기본 모양을 가지고 있기 때문입니다.

<h1>오늘의 공지</h1>
<p>내일은 쉬는 날입니다.</p>
<p>문의는 홍길동에게 하시면 됩니다.</p>

h1 은 제목, p 는 문단입니다. 글자를 여는 태그와 닫는 태그 사이에 넣으면 그 태그의 내용이 됩니다.

CSS 를 더하면

같은 HTML 에 CSS 만 더했습니다. 적힌 내용은 그대로이고 보이는 모양만 달라집니다. style.css 탭을 눌러 값을 고쳐 보고 다시 그리기 를 누르십시오.

<h1>오늘의 공지</h1>
<p>내일은 쉬는 날입니다.</p>
<p>문의는 홍길동에게 하시면 됩니다.</p>

h1 {
  color: #6e56cf;
  font-size: 22px;
}

p {
  color: #5b6272;
  font-size: 15px;
}

브라우저가 하는 일

브라우저는 HTML 을 위에서 아래로 읽으면서 무엇이 있는지 목록을 만들고, CSS 를 읽어 각각에 모양을 입힌 뒤 화면에 그립니다. 그래서 HTML 에 없는 것은 CSS 로 만들 수 없고, HTML 에 있어도 CSS 가 없으면 브라우저의 기본 모양으로 나옵니다.

제목이 하나 있습니다
문단이 둘 있습니다
그림이 하나 있습니다

제목은 보라색입니다
문단 사이는 12px 띄웁니다
그림은 200px 로 줄입니다

둘을 나눠 두는 까닭은 같은 내용을 다른 모양으로 낼 수 있어야 하기 때문입니다. 화면 폭이 좁을 때 글자를 키우거나 배치를 바꾸는 일이 CSS 만 고쳐서 됩니다.

세 가지

• HTML 로 모양을 정하려 합니다. 글자를 키우려고 제목 태그를 h1 에서 h2 로 바꾸는 것이 그렇습니다. 태그는 그것이 무엇인지를 적는 자리이고, 크기는 CSS 가 정합니다.
• 닫는 태그를 빠뜨립니다. 브라우저는 오류를 내지 않고 제 나름대로 고쳐 그립니다. 화면이 이상해졌는데 원인이 보이지 않으면 닫는 태그부터 확인하십시오.
• CSS 파일을 만들었는데 화면이 그대로입니다. HTML 에서 그 파일을 연결하지 않았기 때문입니다. 연결하는 방법은 2.1 에서 다룹니다.

직접 해보기

정리

• 웹 페이지는 HTML·CSS·JavaScript 세 가지가 나눠 맡습니다.
• HTML 은 무엇이 있는지, CSS 는 어떻게 보일지 적습니다.
• CSS 가 없어도 화면은 나옵니다. 브라우저의 기본 모양으로 그려집니다.
• HTML 에 없는 것은 CSS 로 만들 수 없습니다.