4. 중첩의 마법: 요소 안에 요소 넣기
이전 장에서 태그, 요소, 속성이 무엇인지 배웠다면, 이제는 그 부품들을 어떻게 예쁘게 쌓는지 배울 차례입니다. HTML은 벽돌 한 장만 놓는 기술이 아닙니다. 벽돌을 어떤 순서로, 어떤 구조로, 어디 안에 넣느냐가 훨씬 중요합니다.
처음에는 HTML이 그냥 꺾쇠 괄호 모음처럼 보일 수 있습니다. 그런데 어느 순간부터는 이렇게 보이기 시작합니다. "아, 이 요소가 부모고, 저건 그 안에 들어간 자식이구나." 바로 그 순간 HTML이 퍼즐처럼 재밌어집니다.1
이번 장에서는 요소 안에 요소를 넣는 중첩(nesting) 을 배우고, 코드를 보기 좋게 만드는 들여쓰기, 그리고 초보자가 꼭 알아야 할 블록 요소와 인라인 요소의 차이까지 함께 익혀 보겠습니다.
HTML은 상자 안에 상자를 넣는 언어다
HTML 요소는 종종 상자처럼 생각하면 이해가 쉽습니다. 큰 상자 안에 작은 상자를 넣고, 그 작은 상자 안에 또 다른 상자를 넣을 수 있습니다.
예를 들어 문단 안에 강조 표시를 넣는 코드는 이렇게 생깁니다.
<p>오늘은 <strong>정말 중요해요</strong>.</p>이 코드를 보면 <p>가 바깥 상자이고, <strong>은 그 안에 들어간 작은 상자입니다. 브라우저는 이런 구조를 보고 "아, 문단 안에 강조된 단어가 있구나" 하고 이해합니다.
즉, HTML은 단순히 줄줄이 이어 쓰는 문법이 아니라, 관계를 만드는 문법입니다. 어떤 요소는 바깥에서 감싸고, 어떤 요소는 안에 들어가고, 어떤 요소는 나란히 놓입니다. 이 관계가 분명할수록 웹페이지 구조도 또렷해집니다.
올바른 중첩의 핵심은 문 닫는 순서다
중첩에서 가장 중요한 규칙은 하나입니다.
나중에 연 태그를 먼저 닫는다.
조금 어색해 보이지만, 이 규칙 하나로 중첩의 절반은 끝납니다. 마치 상자 두 개를 겹쳐 놓았다면, 안쪽 상자를 먼저 닫고 바깥 상자를 닫아야 하는 것과 같습니다.
올바른 예를 먼저 보겠습니다.
<p>나는 <strong>HTML이 재밌다</strong>고 생각한다.</p>여기서는 <p>를 열고, 그 안에서 <strong>을 열었습니다. 그러면 닫을 때는 </strong>을 먼저 닫고, 마지막에 </p>를 닫아야 합니다.
반대로 아래 코드는 잘못된 중첩입니다.
<p>나는 <strong>HTML이 재밌다</p></strong>이 코드는 문을 닫는 순서가 뒤죽박죽입니다. 먼저 연 <p>를 안쪽 요소가 끝나기도 전에 닫아 버렸기 때문입니다. 초보자 눈에는 비슷해 보여도, 브라우저 입장에서는 꽤 난감한 상황입니다. 서랍 안에 양말을 넣어 놓고 서랍장을 먼저 닫아 버린 셈이니까요.
중첩을 점검할 때는 이렇게 생각해 보세요.
"내가 마지막으로 연 태그가 무엇이지?"
바로 그 태그를 먼저 닫아야 합니다.
부모와 자식으로 보면 구조가 쉬워진다
중첩된 HTML은 흔히 부모(parent) 와 자식(child) 관계로 설명합니다.1
아래 코드를 보세요.
<div>
<p>안녕하세요</p>
</div>여기서 <div>는 부모 요소이고, <p>는 그 안에 들어 있는 자식 요소입니다. 이런 식으로 HTML 문서는 트리처럼 뻗어 나갑니다. 아주 큰 나무에서 줄기가 있고, 줄기에서 가지가 뻗고, 가지 끝에 잎이 달리는 모습과 비슷합니다.
이 관점이 중요한 이유는, HTML이 복잡해질수록 "무엇이 무엇 안에 들어 있나?"를 파악하는 일이 매우 중요해지기 때문입니다. 부모-자식 관계가 분명하면, 코드를 읽을 때 길을 잃지 않습니다.
목록 중첩은 특히 자주 나온다
중첩이 실제로 가장 자주 보이는 곳 중 하나가 목록입니다. 큰 목록 안에 작은 목록을 넣으면 계층 구조를 표현할 수 있습니다.2
예를 들어 장보기 메모를 이렇게 쓸 수 있습니다.
<ul>
<li>과일</li>
<li>간식
<ul>
<li>쿠키</li>
<li>초콜릿</li>
</ul>
</li>
<li>음료</li>
</ul>여기서 중요한 점은, 작은 <ul>이 그냥 바깥 목록 옆에 툭 튀어나오는 것이 아니라, 반드시 어떤 <li> 안에 들어가야 한다는 점입니다.2
즉, 이런 구조가 자연스럽습니다.
<li>간식
<ul>
<li>쿠키</li>
</ul>
</li>반면 이런 식은 구조가 어색합니다.
<ul>
<li>간식</li>
<ul>
<li>쿠키</li>
</ul>
</ul>겉보기엔 비슷해도 의미가 다릅니다. 작은 목록은 "간식"이라는 항목의 세부 내용이어야 하므로, 그 항목 안에 들어가는 편이 맞습니다.
HTML은 이런 구조 차이를 은근히 중요하게 여깁니다. 그래서 초보자일수록 "보이는 모양"보다 "안에 들어가는 관계"를 먼저 생각하는 습관이 필요합니다.
들여쓰기는 브라우저보다 사람을 위한 친절이다
재미있는 사실 하나가 있습니다. HTML은 많은 경우 들여쓰기를 하지 않아도 화면에 표시됩니다. 즉, 브라우저는 대체로 "어느 정도는" 알아서 읽어 줍니다.
하지만 사람은 다릅니다.
사람은 들여쓰기가 없으면 금방 길을 잃습니다. 그래서 중첩된 요소가 있다면 보통 안쪽 요소를 오른쪽으로 조금 밀어 써서 구조를 드러냅니다. 이런 들여쓰기는 코드의 가독성을 높이고, 중첩 관계를 한눈에 보여 줍니다.1
아래 코드를 보세요.
<section>
<h2>오늘의 할 일</h2>
<p>HTML 공부하기</p>
</section>동작은 할 수 있습니다. 하지만 조금 답답하죠. 어디가 바깥이고 어디가 안쪽인지 눈이 한 번 더 일해야 합니다.
같은 코드를 들여쓰기하면 이렇게 됩니다.
<section>
<h2>오늘의 할 일</h2>
<p>HTML 공부하기</p>
</section>훨씬 편합니다. <section> 안에 어떤 요소가 들어 있는지 바로 보입니다. 보통은 2칸 들여쓰기를 많이 사용하지만, 4칸을 쓰는 팀도 있습니다. 중요한 것은 숫자보다 일관성입니다.1
한 칸은 두 칸이고, 두 칸은 약속입니다. 프로젝트 전체에서 같은 규칙을 유지하면 읽는 사람도 덜 헷갈립니다.
못생긴 코드와 예쁜 코드는 디버깅 속도부터 다르다
중첩이 많아질수록 들여쓰기의 차이는 더 커집니다.
<div>
<p>오늘의 메뉴는 <strong>떡볶이</strong>입니다.</p>
<ul>
<li>매운맛</li>
<li>순한맛</li>
</ul>
</div>이 코드를 보면 분명히 읽을 수는 있습니다. 하지만 눈이 편하지는 않습니다.
같은 내용을 정리하면 이렇습니다.
<div>
<p>오늘의 메뉴는 <strong>떡볶이</strong>입니다.</p>
<ul>
<li>매운맛</li>
<li>순한맛</li>
</ul>
</div>이제는 <div> 안에 문단과 목록이 있고, 목록 안에 항목 두 개가 있다는 사실이 아주 또렷하게 보입니다. HTML 오류를 찾을 때도 이런 정돈된 코드는 큰 도움이 됩니다. 닫는 태그가 빠졌는지, 어디까지가 한 덩어리인지 훨씬 빨리 찾을 수 있기 때문입니다.1
코드는 결국 사람이 읽는 문서이기도 합니다. 브라우저만 속이면 되는 게 아니라, 미래의 나도 이해할 수 있어야 합니다.
블록 요소와 인라인 요소는 움직임이 다르다
이제 한 가지 중요한 구분을 배워 보겠습니다. HTML 요소는 기본적으로 화면에서 보이는 방식이 조금씩 다릅니다. 초보자 기준에서는 크게 블록 요소와 인라인 요소로 나누어 이해하면 좋습니다.3
블록 요소는 기본적으로 새 줄에서 시작하고, 가로 공간을 넓게 차지하는 편입니다.3 문단, 제목, 구획 같은 큰 덩어리를 만들 때 자주 사용합니다.
예를 들어 이런 요소들이 대표적입니다.
<h1><p><div><section><ul>
반면 인라인 요소는 문장 흐름 속에 자연스럽게 들어갑니다. 즉, 새 줄로 내려가지 않고, 필요한 만큼의 자리만 차지하는 경우가 많습니다.3
대표적으로는 이런 것들이 있습니다.
<strong><em><span><a>
블록과 인라인을 완전히 암기하려고 하기보다, 우선 이렇게 이해해 보세요.
블록은 큰 상자, 인라인은 문장 속 작은 부품입니다.
이 감각만 있어도 HTML을 읽는 눈이 많이 달라집니다.
블록 요소는 페이지의 큰 뼈대를 만든다
블록 요소는 말 그대로 큼직한 구조를 만드는 데 잘 어울립니다.
<h1>나의 공부 일지</h1>
<p>오늘은 HTML 중첩을 배웠다.</p>
<p>이제 코드가 조금 덜 무섭다.</p>이 코드는 제목 하나와 문단 두 개로 이루어져 있습니다. 각 요소가 줄 단위로 나뉘어 보이기 때문에, 페이지 구조가 자연스럽게 구획됩니다.
블록 요소를 떠올릴 때는 노트의 문단, 포스터의 제목, 카드 뉴스의 한 장면 같은 것을 생각하면 좋습니다. 한 덩어리씩 내용을 정리해 주는 역할입니다.
인라인 요소는 문장 안에서 반짝이는 장식이다
인라인 요소는 문장 전체를 끊지 않고, 그 안의 일부만 표시할 때 잘 어울립니다.
<p>오늘은 <strong>중요한 개념</strong>을 배우고, <a href="#">예제</a>도 봤다.</p>여기서 <strong>과 <a>는 문단 전체를 갈라 놓지 않습니다. 문장 흐름 안에서 일부만 강조하거나 연결합니다.
그래서 인라인 요소는 형광펜 같다고 생각하면 편합니다. 공책 한 장을 새로 펼치는 것이 아니라, 이미 쓰인 문장 속 몇 단어에만 표시를 하는 느낌입니다.
중첩할 때 블록과 인라인을 감각적으로 구분해 보자
초보자에게 가장 쉬운 방법은 "이 요소가 큰 구획인지, 아니면 문장 속 일부인지"를 먼저 묻는 것입니다.
예를 들어 문단 안에서 한 단어를 강조하고 싶다면 <strong>이 자연스럽습니다.
<p>오늘의 키워드는 <strong>중첩</strong>입니다.</p>반대로 내용 한 덩어리를 감싸고 싶다면 <div>나 <section>처럼 블록 성격의 요소가 더 잘 어울립니다.
<section>
<h2>오늘의 키워드</h2>
<p>중첩은 HTML 구조의 핵심이다.</p>
</section>초보자 단계에서는 이 정도 감각만 있어도 충분합니다. 어떤 요소를 어디에 넣어야 할지 헷갈릴 때, "이건 문장의 일부인가, 내용의 큰 덩어리인가?"를 스스로 물어보세요.
가독성 좋은 HTML을 만드는 습관
좋은 HTML은 어렵고 화려한 HTML이 아닙니다. 읽기 쉬운 HTML입니다. 다음 습관을 들이면 코드가 훨씬 또렷해집니다.
부모 요소 안의 자식 요소는 같은 깊이만큼 들여쓴다.
같은 수준의 형제 요소는 들여쓰기 칸 수를 맞춘다.
여는 태그와 닫는 태그의 범위가 눈에 보이도록 줄을 정리한다.
중첩이 너무 깊어지면 구조를 다시 단순하게 만들 수 없는지 생각한다.
에디터의 자동 정렬 기능을 활용해 코드를 자주 다듬는다.
이런 습관은 처음에는 조금 귀찮을 수 있습니다. 하지만 나중에는 오히려 시간을 아껴 줍니다. 엉킨 이어폰을 푸는 데 오래 걸리듯, 엉킨 HTML도 결국 더 많은 시간을 빼앗아 가기 때문입니다.
자주 하는 중첩 실수
초보자가 자주 하는 실수도 몇 가지 있습니다.
첫째, 닫는 순서를 헷갈리는 것입니다.
<p><em>정리 중입니다.</p></em>이런 코드는 열었던 순서의 반대로 닫아야 한다는 규칙을 어긴 경우입니다.
둘째, 들여쓰기를 하지 않아 구조를 놓치는 것입니다. 동작은 되더라도 실수를 찾기 어려워집니다.
셋째, 목록의 하위 목록을 <li> 밖에 놓는 것입니다. 하위 목록은 특정 항목의 세부 내용이므로, 그 항목 안에 넣는 편이 맞습니다.2
넷째, 문장 속 작은 표시와 큰 구조 요소를 같은 감각으로 섞는 것입니다. 이럴 때는 "지금 내가 만들려는 것이 문장의 일부인지, 큰 구획인지"를 다시 생각하면 도움이 됩니다.
작은 실전 예제로 감 잡기
이제 한 번에 구조를 보겠습니다.
<section>
<h2>내가 좋아하는 음식</h2>
<p>저는 <strong>떡볶이</strong>를 정말 좋아합니다.</p>
<ul>
<li>좋아하는 맛
<ul>
<li>매운맛</li>
<li>치즈맛</li>
</ul>
</li>
<li>좋아하는 토핑</li>
</ul>
</section>이 코드를 천천히 읽어 보면 꽤 많은 것이 보입니다.
<section>은 전체 내용을 감싸는 큰 상자입니다. 그 안에 제목 <h2>가 있고, 문단 <p>가 있고, 목록 <ul>이 있습니다. 문단 안에서는 <strong>이 일부 단어만 강조하고 있습니다. 또 목록 안에서는 <li> 하나가 다시 작은 목록을 품고 있습니다.
바로 이것이 중첩의 재미입니다. 각각의 요소는 혼자 보면 단순하지만, 함께 쌓이면 구조가 만들어집니다. HTML이 갑자기 살아 움직이는 것처럼 느껴지는 지점도 바로 여기입니다.
HTML은 예쁘게 쌓을수록 덜 무섭다
초보자에게 HTML이 어렵게 느껴지는 가장 큰 이유 중 하나는, 구조가 눈에 안 보이기 때문입니다. 하지만 들여쓰기를 하고, 올바르게 중첩하고, 블록과 인라인의 감각만 익히면 상황이 달라집니다.
그때부터 HTML은 외계어가 아니라 정리된 서랍장처럼 보입니다. 큰 칸이 있고, 그 안에 작은 칸이 있고, 필요한 물건이 제자리에 들어 있습니다.
정리된 구조는 보기에도 좋고, 고치기도 쉽고, 실수도 줄여 줍니다. 그러니 HTML에서는 예쁘게 쓰는 것이 곧 실력입니다.
이번 장의 핵심 정리
이번 장에서 꼭 기억할 것은 다음 네 가지입니다.
중첩은 요소 안에 다른 요소를 넣어 구조를 만드는 것이다.
태그는 연 순서의 반대로 닫아야 올바른 중첩이 된다.
들여쓰기는 브라우저보다 사람을 위해 필요하며, 구조를 한눈에 보이게 만든다.
블록 요소는 큰 구획을, 인라인 요소는 문장 속 작은 부분을 다룰 때 유용하다.
이제 여러분은 HTML을 단순히 쓰는 단계에서 한 걸음 더 나아갔습니다. HTML을 쌓는 법을 배우기 시작한 것입니다.
다음 장에서는 이 구조를 이용해 텍스트를 더 또렷하게 정리해 보겠습니다. 제목, 문단, 줄바꿈, 강조를 이용하면 같은 글도 훨씬 읽기 좋은 웹페이지가 됩니다. 웹페이지도 결국 글쓰기와 비슷합니다. 잘 구조화된 문장은 읽기 쉽고, 잘 구조화된 HTML은 보기 쉽습니다.
참고
1How to Indent HTML Code – And Why it's Important
이 노트는 보도·비평·교육·연구 목적으로 작성되었습니다. 저작권 문의가 있으시면 에서 알려주세요.