HTML·CSS·JavaScript가 맡는 일

HTML은 웹 페이지의 내용과 그 뜻을, CSS는 모양과 배치를, JavaScript는 동작을 맡습니다. 셋의 바탕은 HTML이라, HTML이 없으면 CSS와 JavaScript는 꾸미거나 움직일 것이 없습니다.

화면의 한 부분을 고치려면 세 가지 가운데 어디를 고칠지 먼저 가려야 합니다. 제목 글자를 바꾸는 곳과 제목 색을 바꾸는 곳이 다릅니다. HTML(HyperText Markup Language)은 글에 표시를 달아 그 뜻을 적는 언어이고, CSS(Cascading Style Sheets)는 모양을 정하는 언어, JavaScript는 동작을 만드는 프로그래밍 언어입니다. 이 과목은 HTML과 CSS를 다루고, JavaScript는 자바스크립트 과목에서 배웁니다. 아래 화면 그림은 17단원에서 만들 할 일 화면에 셋을 한 겹씩 더해 봅니다.

1HTML — 무엇이 있는지와 그 뜻

HTML만 있어도 페이지는 그려집니다. 할 일 화면의 HTML만 브라우저로 열면 제목, 입력 줄('할 일' 글자·입력 칸·단추), 목록, 개수 글이 위에서 아래로 차례로 놓입니다. HTML이 적는 것은 '이 글은 가장 높은 단계의 제목', '이것은 목록의 한 줄'처럼 무엇이 있는지와 그 뜻입니다.

제목이 크고 굵게 보이는 것은 HTML이 그렇게 정해서가 아닙니다. 브라우저는 아무 CSS가 없어도 제목은 크게, 목록은 점을 찍어 그리는 CSS를 처음부터 갖고 있습니다. 이것을 기본 스타일(user-agent stylesheet)이라고 하고, 4단원의 브라우저 기본 스타일과 Styles 창에서 봅니다. 제목을 고를 때는 크기가 아니라 뜻으로 고릅니다. 이 규칙은 2단원의 제목 h1~h6에서 세웁니다.

2CSS — 모양과 배치

CSS를 더하면 같은 내용에 모양이 입혀집니다. 입력 칸이 줄을 채우게 넓어지고 '할 일' 글자는 화면에서 숨고, 단추에 색과 둥근 모서리가 생기고, 끝낸 일에는 취소선이 그어집니다. HTML에 적힌 내용은 그대로입니다. CSS는 무엇이 있는지는 건드리지 않고 어떻게 보일지만 정합니다.

CSS는 HTML의 요소(태그로 표시한 내용 한 덩어리)를 골라 '이 요소는 이런 모양으로'라고 정합니다. 같은 HTML에 다른 CSS를 이으면 전혀 다른 모습의 페이지가 됩니다. CSS는 4단원부터 씁니다.

3JavaScript — 동작

추가 단추를 누르면 목록에 할 일이 한 줄 늘고 개수 글이 바뀌는 것은 JavaScript의 일입니다. JavaScript는 페이지가 열린 뒤에 HTML의 요소를 새로 만들거나 글을 바꿉니다. 화면 그림의 '+ JavaScript' 겹은 단추를 누른 뒤의 모습입니다. 이 과목에서는 JavaScript를 쓰지 않습니다. 이 할 일 화면은 자바스크립트 과목에서 이어받아 움직이게 만듭니다.

CSS도 마우스를 올렸을 때처럼 상태에 따라 모양을 바꿀 수는 있습니다. 하지만 누를 때마다 목록에 새 줄을 만들어 넣는 일은 JavaScript가 합니다.

4바탕은 HTML이다

HTML을 빼면 아무것도 남지 않습니다. CSS는 HTML의 요소를 골라 꾸미고, JavaScript도 HTML의 요소를 골라 바꾸기 때문입니다. 세 가지는 보통 파일을 나눠 씁니다. HTML 파일이 다른 두 파일의 주소를 적어 잇습니다(브라우저 규칙 1).

할 일 화면을 셋으로 나누면 이렇습니다.

17단원에서 만드는 할 일 화면도 index.html 한 장과 style.css 한 장입니다. 자바스크립트 과목은 여기에 app.js 한 장을 더합니다.

예제

할 일 화면에서 바꾸고 싶은 일 다섯입니다. 저마다 HTML·CSS·JavaScript 가운데 어디를 고쳐야 할지 먼저 정해 본 뒤 펼쳐 보세요.

1. 제목 '오늘 할 일'을 '이번 주 할 일'로 바꾸기
2. 추가 단추를 초록색으로 칠하기
3. 처음 열 때부터 '물 마시기' 줄이 목록에 있게 하기
4. 추가를 누를 때마다 입력한 일이 목록에 한 줄 더해지게 하기
5. 한 줄에 놓인 입력 칸과 단추를 위아래 두 줄로 놓기

자주 틀리는 곳

틀린 생각: 제목을 크고 굵게 만드는 것은 HTML이다.

제목 글을 h1으로 감싸면 글자가 커지니, HTML이 모양을 정한다고 여기게 됩니다. h1은 '가장 높은 단계의 제목'이라는 뜻만 적습니다. 크고 굵게 그리는 것은 브라우저의 기본 스타일입니다. CSS로 h1을 본문 글자만큼 작게 그려도 그 글은 여전히 제목입니다.

맞는 규칙: HTML은 뜻을 적고, 모양은 CSS가 정합니다. CSS를 쓰지 않았을 때 보이는 모양은 브라우저의 기본 스타일입니다.

틀린 생각: CSS로 단추를 누르면 일이 생기게 할 수 있다.

CSS가 단추의 색과 모양을 바꾸니, 누른 뒤의 일도 CSS로 정할 수 있을 것처럼 보입니다. CSS는 마우스를 올렸을 때처럼 상태에 따라 모양만 바꿉니다. 할 일을 한 줄 더하거나 개수 글을 고치는 일은 하지 못합니다.

맞는 규칙: 누를 때 일어나는 일은 JavaScript가 맡습니다. CSS는 요소의 모양과 배치를 정합니다.

틀린 생각: HTML·CSS·JavaScript는 한 파일에 섞어 써야 한다.

세 가지가 한 화면을 이루니 한 파일에 함께 적어야 할 것처럼 여기게 됩니다. 보통은 파일을 나눠 씁니다. 할 일 화면도 index.html과 style.css로 나뉘고, index.html이 style.css의 주소를 적어 잇습니다. HTML 파일 안에 CSS를 함께 적는 꼴도 있지만, 그때도 CSS는 정해진 자리에 따로 씁니다. 4단원의 첫 레슨이 이 꼴로 시작합니다.

맞는 규칙: 세 언어는 맡는 일이 달라 보통 파일을 나눠 쓰고, HTML 파일이 다른 파일의 주소를 적어 잇습니다(브라우저 규칙 1).

확인 문제

1. 예제의 2번을 바꿔, 추가 단추의 글자를 '추가'에서 '더하기'로 바꾸려 합니다. HTML·CSS·JavaScript 가운데 어디를 고쳐야 할까요?

2. ㉮·㉯ 자리에 HTML·CSS·JavaScript 가운데 하나씩을 쓰세요.

㉮ ____ 파일을 빼면 나머지 둘이 일할 곳이 없고, 같은 ㉮ 파일에 다른 ㉯ ____ 파일을 이으면 내용은 그대로이고 모양만 달라집니다.

3. 동아리 공지 페이지에 '신청 12명'이라는 글과 '신청' 단추가 있습니다. 단추를 누를 때마다 '신청 12명'의 수가 1씩 늘게 하고 싶습니다. 어떻게 해야 할까요?

• ① HTML의 '신청 12명'을 '신청 13명'으로 고쳐 둔다
• ② CSS에 단추 규칙을 더한다
• ③ JavaScript로 누를 때 할 일을 단다