HTML&CSS 시작하기
HTML 시작하기 - 시멘틱 태그의 활용 (37:00 ~)
HTML에는 100개가 넘는 태그가 있지만, 실무에서 매일 쓰는 태그는 생각보다 몇 개 되지 않습니다.
이 글에서는 링크·문단·이미지·목록 같은 기본 태그부터, 페이지의 큰 골격을 잡는 시맨틱 레이아웃 태그까지 자주 쓰이는 것들만 예제와 함께 정리합니다.
블록요소와 인라인요소
태그를 하나씩 보기 전에 먼저 알아둘 개념이 있습니다. HTML의 요소는 화면에서 자리를 차지하는 방식에 따라 크게 두 가지로 나뉩니다.
- 블록요소 — 한 줄 전체를 차지합니다. 블록요소 다음에 오는 내용은 자동으로 다음 줄에 배치됩니다. (p, div, h1~6, ul, li 등)
- 인라인요소 — 콘텐츠 크기만큼만 자리를 차지하고, 줄바꿈 없이 글자처럼 옆으로 이어집니다. (a, span, b, strong, img 등)
이 구분을 알아두면 "왜 이 태그는 옆으로 붙고, 저 태그는 줄이 바뀌지?"라는 초반의 혼란이 대부분 해결됩니다. 아래 각 태그에 붙은 블록/인라인 표기를 눈여겨보세요.
a (anchor) — 링크 이동
클릭하면 다른 페이지로 이동하는 링크를 만듭니다.
<a href="http://naver.com" target="_blank" class="go-naver">네이버</a>
href— 이동할 주소target="_blank"— 새 탭으로 열기 (생략하면 현재 탭에서 열림)
anchor는 '닻'이라는 뜻입니다. 문서와 문서를 연결해 고정한다는 의미로, HTML의 'HyperText'가 바로 이 링크 기능을 가리킵니다.
p (paragraph) 와 br (break)
p는 블록요소로, 문단(텍스트)을 작성합니다.
br은 줄바꿈(엔터)입니다.
여기서 초보자가 가장 자주 놀라는 지점이 있습니다. 코드에서 엔터를 눌러 줄을 바꿔도 브라우저 화면에는 반영되지 않는다는 것입니다. HTML은 코드의 줄바꿈과 연속된 공백을 무시하고 한 줄로 이어 보여줍니다. 그래서 화면에서 줄을 바꾸고 싶은 위치에 <br> 태그를 직접 넣어야 합니다.
<p>라면 끓이기, 게임도 최고로 잘하지만 무엇보다 피아노에 천재적 재능을 지닌 서번트증후군 진태. <br> 조하는 입만 열면 "네~" 타령인 심상치 않은 동생을 보자 한숨부터 나온다. <br> 하지만 캐나다로 가기 위한 경비를 마련하기 전까지만 꾹 참기로 결심한 조하는.. </p>
br은 닫는 태그가 없는 태그입니다. 내용(콘텐츠)을 감쌀 필요가 없는 태그는 이렇게 여는 태그 하나만 사용하며, img도 같은 방식입니다.
div 와 span
div (division) — 컨테이너를 만들고, 박스 형태로 영역을 설정합니다.
<div>box1</div> <div>box2</div> <div>box3</div>
div 자체는 아무 스타일도, 의미도 없는 빈 상자입니다. 대신 CSS와 결합해 레이아웃의 기본 단위가 되기 때문에 웹에서 가장 많이 쓰이는 태그이기도 합니다.
span — 줄바꿈 없이 문장 안에 영역을 설정하여 다른 스타일을 주거나, 작은 뱃지를 만들 때 사용합니다.
<p>라면 끓이기, 게임도 최고로 잘하지만 <span>무엇보다 피아노에 천재적 재능을 지닌</span> 서번트증후군 진태. <br> 조하는 입만 열면 "네~" 타령인 심상치 않은 동생을 보자 한숨부터 나온다. <br> 하지만 캐나다로 가기 위한 경비를 마련하기 전까지만 꾹 참기로 결심한 조하는... </p>
지금은 span으로 감싸도 화면에 아무 변화가 없습니다. 문장 전체가 아닌 "이 부분만" 색을 바꾸거나 굵게 하고 싶을 때, CSS가 붙잡을 수 있는 손잡이를 만들어주는 태그라고 이해하면 됩니다.
h1~6 — 제목 태그
숫자가 작을수록 중요한 제목이며 기본 크기도 큽니다.
<h1>Heading level 1</h1> <h2>Heading level 2</h2> <h3>Heading level 3</h3> <h4>Heading level 4</h4> <h5>Heading level 5</h5> <h6>Heading level 6</h6>
h는 heading의 약자입니다. 단순히 "글자가 큰 태그"가 아니라 문서의 목차 구조를 나타내는 태그라서, 검색엔진도 h1~h6을 보고 페이지의 주제를 파악합니다. 크기를 키우고 싶다는 이유로 h1을 여러 번 쓰기보다, 문서의 위계에 맞게 사용하는 것이 좋습니다. (한 페이지에 h1은 하나가 원칙입니다.)
b, strong — 굵게(Bold하게)
텍스트를 굵게 표시합니다.
<p> 삐약삐약 <strong>병아리</strong><br> 음메음메 <b>송아지</b><br> 따당 따당 사냥꾼<br> </p>
화면에 보이는 결과는 둘 다 굵은 글씨로 같습니다. 차이는 의미에 있습니다. strong은 "이 내용이 중요하다"는 의미를 담고, b는 의미 없이 시각적으로만 굵게 만듭니다. 스크린 리더(화면 낭독기)는 strong을 강조해서 읽어주기 때문에, 실제로 중요한 내용이라면 strong을 쓰는 것이 좋습니다.
img (image) — 이미지 삽입
이미지 경로를 src 속성의 값으로 입력하며, 경로는 두 가지 방식이 있습니다.
로컬 — 내 프로젝트 폴더 안의 이미지
<img src="images/진비빔면.jpg" alt="진비빔면 썸네일">
웹 주소 — 인터넷에 올라가 있는 이미지의 URL
<img src="https://cdn.otokimall.com/data/product/detail/20231218/1702948159484VLb13.1k22aqzo0tq3o.jpg" alt="진비빔면 썸네일">
로컬 경로 images/진비빔면.jpg는 현재 HTML 파일이 있는 폴더에서 images라는 이름의 하위 폴더를 찾고,
그 안에 있는 진비빔면.jpg라는 이미지를 찾는다는 뜻입니다.
├── images/
│ └── 진비빔면.jpg (이미지 파일)
├── index.html (현재 HTML 파일)
이미지가 화면에 안 나온다면 십중팔구 경로 문제입니다. 파일명 오타, 폴더 이름, 확장자(jpg/png)까지 정확히 일치하는지 확인하세요. alt는 이미지가 제대로 나오지 않을 때 대신 보여줄 대체 텍스트입니다.
ul, ol, li — 리스트(목록)
모두 블록요소입니다. <li> 태그는 항상 <ul> 또는 <ol> 요소의 자식 요소로 사용됩니다.
ul (unordered list) — 순서 없는 목록. 항목 앞에 점(불릿)이 붙습니다.
<ul> <li>목록</li> <li>목록</li> <li>목록</li> </ul>
ol (ordered list) — 순서 있는 목록. 항목 앞에 1, 2, 3 번호가 붙습니다.
<ol> <li>목차</li> <li>목차</li> <li>목차</li> </ol>
실무에서 리스트는 단순 목록보다 더 넓게 쓰입니다. 내비게이션 메뉴, 상품 카드 그리드, 탭 버튼처럼 "같은 성격의 항목이 반복되는 구조"는 대부분 ul과 li로 마크업합니다.
시맨틱 레이아웃 태그 — header, nav, main, section, footer
페이지의 큰 골격을 잡는 태그들입니다. 모두 블록요소이며, 기능은 div와 같지만 이름에 의미(semantic)가 담겨 있습니다.
- header — 사이트 상단 영역을 만들 때 쓰입니다. 로고와 주 메뉴가 들어갑니다.
- nav — 웹사이트의 내비게이션 링크를 그룹화하는 태그입니다.
- main — 페이지의 주요 콘텐츠(내용)를 담는 영역입니다.
- section — 콘텐츠를 주제별로 구분하고 섹션을 나누는 데 사용됩니다.
- footer — 저작권, 연락처, 사이트맵 등 사이트의 정보를 담은 최하단 영역입니다.
<header> <nav></nav> </header> <main> <section></section> <section></section> <section></section> </main> <footer></footer>
전부 div로 만들어도 화면은 똑같이 나옵니다. 그런데도 시맨틱 태그를 쓰는 이유는, 브라우저·검색엔진·스크린 리더가 "여기가 메뉴고, 여기가 본문이구나"를 코드만 보고 알 수 있게 되기 때문입니다. 협업하는 동료와 미래의 나에게도 훨씬 읽기 쉬운 코드가 됩니다.
article, figure, figcaption
- article — 블로그 게시글, 뉴스 기사, 댓글 등 section 내부의 콘텐츠에 사용됩니다. 그 부분만 떼어내도 독립적으로 의미가 성립하는 콘텐츠에 씁니다.
- figure — 이미지, 비디오 등의 미디어 콘텐츠를 포함하는 태그입니다.
- figcaption — figure 태그에 포함된 이미지나 미디어 콘텐츠에 대한 설명(캡션)을 제공하는 태그입니다.
<figure> <img src="images/collection1.jpg" alt="컬렉션 이미지"> <figcaption>rainbow papers - for Kids</figcaption> </figure>
주석 (Comment)
개발자가 작성한 해당 코드에 대한 이해를 돕는 설명이나
디버깅을 위해 작성한 구문을 의미합니다.
이러한 주석은 다른 HTML 코드와는 달리 웹 브라우저에 의해 표현되지 않습니다.
여는 주석 <!-- 과 닫는 주석 --> 사이에 코멘트를 작성합니다.
줄바꿈하여 여러 줄의 주석 사용이 가능합니다.
<!-- 한 줄 주석 --> <!-- 여러 줄 주석 -->
설명 외에도 유용한 쓰임이 있습니다. 코드 일부를 삭제하지 않고 잠시 꺼두고 싶을 때 해당 부분을 주석으로 감싸면, 브라우저가 무시하므로 원인 찾기(디버깅)에 자주 활용됩니다. VSCode에서는 Ctrl + / 로 선택 영역을 한 번에 주석 처리할 수 있습니다.
에디터에서 주석 색이 잘 안 보인다면 색을 바꿀 수 있습니다. 주석 색 변경하기