2026. 6. 30. 15:55ㆍAI 기반 프론트엔드 웹개발자 양성과정
[HTML 2일차] 오늘 배운 태그 총정리
+ 시맨틱 태그 심화 정리
2026.06.30 · 학습 범위: 11번 ~ 28번 파일
📋 오늘 다시 짚어본 것들
퍼블리셔로 일하면서 수없이 익혀왔던 태그들이지만, 오랜만에 다시 직접 코드를 쳐보니 새롭게 느껴졌다. 손에 익었다고 생각했던 것들도 막상 처음부터 다시 쓰면 잠깐 멈추게 되는 순간이 있다. 그게 오히려 재미있었다.
🗂️ 태그별 메모
목록 — ul / ol / li
실무에서 워낙 자주 쓰던 조합이라 별다른 막힘은 없었다. type 속성으로 번호 스타일을 1, a, i로 지정하거나, ol 안에 ol을 중첩하면 계층 구조도 표현된다.
<ol type="1"> <li>먹는 것</li> <ol type="a"> <li>고기</li> <ol type="i"> <li>삼겹살</li> </ol> </ol> </ol>
표 — table / colspan / rowspan
colspan으로 가로 칸, rowspan으로 세로 칸을 병합하는 건 실무에서도 빠질 수 없는 기본이다. thead / tbody로 구조를 나눠두면 나중에 CSS 적용할 때 훨씬 편하다.
<table border="1"> <thead> <tr><th colspan="3">성적표</th></tr> </thead> <tbody> <tr><td rowspan="2">과목</td><td>국어</td><td>90</td></tr> <tr><td>영어</td><td>100</td></tr> </tbody> </table>
폼 — form / input type
form으로 입력 요소들을 묶고, input의 type 속성으로 용도에 맞는 입력창을 지정한다. 자주 쓰는 것들이지만 이번 기회에 종류를 한 번 정리해봤다.
| type | 역할 |
|---|---|
text | 일반 텍스트 입력 |
email | 이메일 형식 검증 포함 |
password | 입력값 마스킹 |
checkbox | 체크박스 — 다중 선택 |
radio | 라디오 버튼 — name으로 묶어 단일 선택 |
file | 파일 첨부 |
range | 슬라이더 |
date | 날짜 선택기 |
color | 색상 피커 |
a 태그 — href 활용
실무에서 늘 쓰던 a 태그지만, mailto:, tel:, 앵커 링크까지 한 번에 정리해봤다.
<a href="https://google.com" target="_blank">새 탭으로 열기</a> <a href="mailto:me@example.com">이메일 보내기</a> <a href="tel:01012345678">전화 걸기</a> <a href="#section">페이지 내 이동</a>
details / summary — JS 없는 아코디언
퍼블리싱할 때도 가끔 쓰던 건데, 중첩까지 되는 걸 다시 확인했다. JS 없이 순수 HTML로 접기 UI를 만들 수 있다는 게 여전히 유용하다.
<details> <summary>정답 보기</summary> <p>정답은 여기!</p> <details> <summary>정답 속의 정답</summary> <p>중첩도 된다.</p> </details> </details>
⭐ 시맨틱 태그 — 다시 짚어보니
오늘 다시 정리하면서 가장 의미 있었던 파트다. 퍼블리싱할 때도 써왔지만, 개념부터 다시 들여다보니 왜 써야 하는지가 더 명확하게 정리됐다.
div와 뭐가 다른가
div는 아무 의미 없는 컨테이너다. 클래스 이름을 붙여야 비로소 어떤 영역인지 알 수 있다. 반면 시맨틱 태그는 태그 이름 자체가 역할을 설명한다. 코드 가독성뿐 아니라 검색엔진과 스크린리더도 이 차이를 읽는다.
<div class="header"> — 클래스를 봐야 헤더인지 알 수 있음✅
<header> — 태그 이름 자체가 역할을 말해줌
각 태그의 역할
실제 페이지 구조
사이드바
section vs article
기준은 하나다. 이 내용을 따로 떼어내도 맥락이 통하는가.
| section | article | |
|---|---|---|
| 역할 | 주제별 묶음 | 독립적으로 완결되는 콘텐츠 |
| 예시 | "인기 글 모음" 섹션 | 블로그 글 하나, 댓글 하나 |
뼈대 코드
<body> <header> <h1>내 사이트</h1> <nav>홈 | 소개 | 연락처</nav> </header> <main> <section> <article> <h2>글 제목</h2> <p>내용</p> </article> </section> </main> <aside>관련 글 목록</aside> <footer>© 2026 내 사이트</footer> </body>
div나 span을 쓰면 된다.
✍️ 마치며
퍼블리셔로 일하면서 수없이 익혀왔던 것들이지만, 오랜만에 다시 코드를 치는 게 새로웠다. 당연하다고 넘겼던 것들을 처음부터 다시 짚어보니 정리되는 느낌이 있었다. 내일은 CSS로 넘어간다.
🏷️ HTML | 시맨틱태그 | 웹개발 | 학습일지 | 프론트엔드
'AI 기반 프론트엔드 웹개발자 양성과정' 카테고리의 다른 글
| [260706월 06일차] Mini-Project, JavaScript (0) | 2026.07.06 |
|---|---|
| [260703금 05일차] CSS (0) | 2026.07.03 |
| [260702목 04일차] CSS (0) | 2026.07.02 |
| [260701수 03일차] HTML & CSS (0) | 2026.07.01 |
| [260629월 01일차] HTML 기초 (0) | 2026.06.29 |