요소·태그·속성

HTML 문서는 요소(element)로 짓습니다. 요소 하나는 여는 태그 · 내용 · 닫는 태그로 이루어지고, 태그(tag)는 <p>처럼 꺾쇠(< · >)로 요소 이름을 감싼 표시입니다. 요소에 정보를 더할 때는 여는 태그 안에 속성(attribute)을 이름="값" 꼴로 적습니다.

글만 쳐 두면 브라우저는 그 글이 제목인지 문단인지 알 수 없습니다. 태그는 화면에 찍히는 글자가 아니라, '여기부터 여기까지가 제목'이라고 브라우저에 알리는 표시입니다. 브라우저는 태그를 읽어 요소 나무를 짓고, 화면은 그 나무로 그립니다(브라우저 규칙 2). 이 레슨에서는 요소를 이루는 세 부분, 속성을 적는 자리, 닫는 태그가 없는 빈 요소를 봅니다.

이 단원을 마치면 김치볶음밥 페이지의 글(제목 · 소개 · 재료 목록 · 조리 순서)을 태그로 쓸 수 있습니다. 이 단원(글을 담는 태그)을 이미 안다면 단원 연습 문제부터 풀고 틀린 레슨만 보세요. 건너뛸지 볼 때는 힌트를 펴지 않고 풉니다.

김치볶음밥

1여는 태그 · 내용 · 닫는 태그가 요소 하나

<h1>김치볶음밥</h1>
<p>15분이면 만드는 요리입니다.</p>

1번 줄의 <h1>이 여는 태그, </h1>이 닫는 태그이고, 그 사이의 '김치볶음밥'이 내용입니다. 닫는 태그는 여는 태그와 이름이 같고, 꺾쇠 바로 뒤에 빗금(/)이 붙습니다. 여는 태그부터 닫는 태그까지를 합친 덩어리 하나를 h1 요소라고 부릅니다.

결과 화면에는 태그가 보이지 않습니다. 브라우저는 태그를 읽어 나무에 요소를 만들고, 요소마다 정해진 모양으로 글을 그립니다. h1은 제목(heading)의 첫 단계라 크고 굵게(32px), p는 문단(paragraph)이라 보통 글자(16px)로 그렸습니다. 이 크기는 브라우저 글자 크기 설정이 처음 그대로일 때 값이고, 글자 크기를 키웠다면 더 큽니다. 둘의 뜻은 제목 h1~h6와 문단과 강조에서 자세히 봅니다. 잰 값 칸의 font-size는 글자 크기, font-weight는 굵기입니다. 굵기는 수로 적어, 보통 글자가 400이고 굵은 글자가 700입니다.

2속성은 여는 태그 안에 이름="값"

<p>밥 2공기</p>
<p lang="en">Rice</p>

재료 이름을 영어로도 적어 둔 문단입니다. 2번 줄의 lang="en"이 속성입니다. lang은 속성 이름, "en"은 값이고, 이 문단의 글이 영어(en)라는 정보를 요소에 붙입니다. 속성은 화면의 모양을 바꾸지 않았습니다. 브라우저는 속성을 나무의 그 요소에 붙여 둡니다. 잰 값의 나무에서 둘째 p에만 lang이 붙어 있습니다. 문서 뼈대의 <html lang="ko">도 같은 속성입니다. 문서 전체의 글이 한국어라는 뜻입니다.

속성을 적는 규칙은 셋입니다.

• 여는 태그 안, 요소 이름 뒤에 빈칸을 하나 두고 적습니다.
• 값은 큰따옴표로 감쌉니다.
• 속성이 여럿이면 빈칸으로 나눕니다. 닫는 태그에는 속성을 적지 않습니다.

3닫는 태그가 없는 빈 요소

<p>밥 2공기<br />김치 1컵</p>

br는 줄을 바꾸는(line break) 요소입니다. 잰 값의 빗금(/)이 줄이 바뀐 자리입니다. br에는 담을 내용이 없어 닫는 태그도 없습니다. 이런 요소를 빈 요소(void element)라고 합니다. 이 과목은 빈 요소를 />로 끝냅니다. 이 /는 빈 요소라는 표시일 뿐이라, 브라우저는 <br>와 똑같이 읽습니다.

그림을 넣는 img도 빈 요소입니다. 속성이 여럿이라 한 줄이 길어지면, 이 과목은 속성을 한 줄에 하나씩 두 칸 들여 쓰고 />를 새 줄 맨 앞에 둡니다. 줄을 나눠도 요소는 하나입니다.

<img
  src="images/kimchi.svg"
  alt="김치볶음밥"
  width="280"
  height="210"
/>

src는 그림 파일의 주소, alt는 그림을 볼 수 없을 때 대신 쓰이는 글, width · height는 그릴 크기입니다. 그림 넣기는 그림 넣기 img에서 자세히 봅니다.

예제

레시피 카드의 글을 태그로 썼습니다. 처음 보는 h2는 h1 아래 단계의 제목이고, ul · li는 점이 붙는 목록과 그 한 줄입니다. 목록은 목록 ul·ol·li에서 배웁니다. 여는 태그 · 닫는 태그 · 속성 · 빈 요소를 하나씩 짚어 본 뒤, 화면에 몇 줄로 보일지 먼저 적어 보세요.

<h1>김치볶음밥</h1>
<p lang="en">Fried rice</p>
<p>조리 15분<br />2인분</p>
<h2>재료</h2>
<ul>
  <li>밥 2공기</li>
  <li>잘 익은 김치 1컵</li>
</ul>

화면에는 몇 줄이 보일까요? 태그와 속성의 글자는 보일까요?

자주 틀리는 곳

틀린 생각: 태그도 글자처럼 화면에 찍힌다.

코드에서는 태그가 글 바로 곁에 붙어 있어, 함께 찍힐 것처럼 보입니다.

<p>김가루 조금</p>

화면에는 '김가루 조금'만 그려졌습니다. <p>와 </p>는 나무에 p 요소를 만드는 데 쓰이고, 화면에는 남지 않습니다.

맞는 규칙: 태그는 브라우저가 요소 나무를 짓는 표시라 화면에 찍히지 않습니다(브라우저 규칙 2). 꺾쇠를 글자로 보이려면 공백 규칙과 특수 문자의 특수 문자를 씁니다.

틀린 생각: '태그'와 '요소'는 같은 말이다.

'p 태그'와 'p 요소'를 섞어 쓰다 보면 둘을 같은 것으로 여기게 됩니다. 빈 요소가 든 줄을 세어 보면 둘이 갈립니다.

<p>조리 15분<br />2인분</p>

이 줄의 태그는 셋(<p> · <br /> · </p>)이고, 요소는 둘(p · br)입니다. br는 p 안에 든 요소입니다.

맞는 규칙: 태그는 코드에 적는 표시이고, 요소는 여는 태그부터 닫는 태그까지를 브라우저가 나무의 한 칸으로 지은 것입니다. 요소 하나에는 보통 태그가 둘이고, 빈 요소는 태그 하나가 곧 요소입니다.

틀린 생각: 속성은 닫는 태그에 적어도 된다.

여는 태그와 닫는 태그가 한 짝이니, 속성을 어느 쪽에 적어도 같다고 여기게 됩니다.

<p>Fried rice</p lang="en">

나무의 p에 lang이 없습니다. 브라우저는 닫는 태그에 적힌 속성을 오류 없이 버렸습니다.

맞는 규칙: 속성은 여는 태그 안, 요소 이름 뒤에만 적습니다. 닫는 태그는 </p>처럼 빗금과 이름만 씁니다.

틀린 생각: 닫는 태그의 / 하나쯤 빠져도 화면은 그대로다.

여는 태그와 닫는 태그는 생김새가 거의 같아서, 빗금 하나가 빠진 것을 눈으로 찾기 어렵습니다.

<h1>김치볶음밥<h1>
<p>15분이면 됩니다.</p>

/가 빠진 둘째 <h1>은 닫는 태그가 아니라 새 제목을 여는 태그입니다. 브라우저는 앞 제목을 닫고 새 h1을 연 뒤, 아래 문단을 그 안에 넣었습니다. 그래서 문단까지 제목 글자(32px, 굵게)로 그려졌고, 오류 메시지는 없습니다.

맞는 규칙: 닫는 태그는 꺾쇠 바로 뒤의 /로 여는 태그와 갈립니다. /가 빠지면 브라우저는 그 자리에서 새 요소를 열고, 틀린 태그도 오류 없이 고쳐 나무를 짓습니다(브라우저 규칙 2). 화면만 봐서는 놓치기 쉬운 이런 틀림은 검사기로 틀린 HTML 찾기에서 찾는 법을 배웁니다.

확인 문제

1. 예제의 '재료' 제목에서 닫는 태그 </h2>의 /를 빠뜨리면, 재료 목록은 화면에 어떻게 그려질까요?

<h2>재료</h2>
<ul>
  <li>밥 2공기</li>
  <li>잘 익은 김치 1컵</li>
</ul>

• ① 제목만 크고, 재료 목록은 보통 글자로 그려진다
• ② 재료 목록까지 제목 글자(크고 굵게)로 그려진다
• ③ 오류가 나서 재료 목록이 그려지지 않는다

<h2>재료<h2>
<ul>
  <li>밥 2공기</li>
  <li>잘 익은 김치 1컵</li>
</ul>

<h2>재료
<ul>
  <li>밥 2공기</li>
  <li>잘 익은 김치 1컵</li>
</ul>

2. 한 문단은 그대로 두고, 결과 화면에 '달걀 2개'와 '김가루 조금'이 두 줄로 보이도록 ____ 자리에 들어갈 요소 하나를 쓰세요.

<p>달걀 2개____김가루 조금</p>

<p>달걀 2개<br />김가루 조금</p>

3. 카페 메뉴판을 태그로 썼습니다. 화면에 보이는 글을 줄마다 쓰세요. 줄은 ' / '로 이어 써도 됩니다.

<h1>플로우 카페</h1>
<p>커피 4000원<br />라테 4500원</p>
<p lang="en">Cookie 2000</p>

컴퓨터에서 해 보기(선택) — 점수에 들지 않습니다. 폰으로만 보고 있다면 건너뛰세요. 예제 코드를 hello.html의 body 안에 붙여 저장하고 브라우저로 엽니다. 그다음 붙인 '김치볶음밥' 제목의 </h1>에서 /를 지우고 저장 · 새로고침해 화면이 어떻게 바뀌는지 봅니다. 고친 파일은 이 단원 끝 검사기로 틀린 HTML 찾기에서 검사기에 넣어 봅니다. 파일을 만들고 여는 법은 준비: VS Code와 작업 폴더에 있습니다.