2026. 6. 29. 16:30ㆍAI 기반 프론트엔드 웹개발자 양성과정
[HTML 1일차] HTML 기본 구조부터
이미지·링크까지
2026.06.29 · 학습 범위: 03번 ~ 09번 파일
📋 오늘 다뤄본 태그 목록
퍼블리셔 경력이 있어서 낯설진 않았지만, 오랜만에 처음부터 다시 짚어보는 느낌이 묘했다. 환경 세팅부터 시작해서 HTML 뼈대와 기본 태그들을 하나씩 다시 손으로 쳤다.
🗂️ 태그별 메모
HTML 문서 기본 구조
HTML 파일은 항상 이 뼈대에서 시작한다. <!DOCTYPE html>은 "이건 HTML5 문서야"라고 브라우저에 알리는 선언이고, head는 화면에 보이지 않는 설정 영역, body가 실제 화면에 렌더링되는 영역이다.
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>브라우저 탭 이름</title> </head> <body> 화면에 보이는 내용 </body> </html>
<meta charset="UTF-8">은 한글이 깨지지 않도록 인코딩을 지정하는 설정이다. 빠트리면 한글이 깨질 수 있어서 습관적으로 넣게 된다.
태그와 요소 개념
태그(tag)와 요소(element)는 엄밀히 다른 개념이다. 태그는 꺾쇠 안의 이름 자체고, 요소는 여는 태그 + 내용 + 닫는 태그로 이루어진 전체 덩어리다. <img>처럼 닫는 태그 없이 단독으로 쓰는 건 빈 요소(void element)라고 부른다.
| 구분 | 예시 | 설명 |
|---|---|---|
| 일반 요소 | <p>내용</p> | 여는 태그 + 내용 + 닫는 태그 |
| 빈 요소 | <img />, <meta /> | 내용 없음, 닫는 태그 없음 |
| 중첩 | <p><strong>굵게</strong></p> | 태그 안에 태그 넣기 |
주석 — <!-- -->
화면에 렌더링되지 않는 메모다. 코드 설명을 남기거나 특정 코드를 임시로 비활성화할 때 쓴다. 퍼블리싱할 때도 섹션 구분 표시로 자주 사용했다.
<!-- 이건 화면에 안 보입니다 --> <h1>이건 보입니다</h1>
제목 — h1 ~ h6
heading의 약자로, 숫자가 클수록 작아진다. h1이 페이지에서 가장 중요한 제목이고 보통 하나만 쓴다. SEO 관점에서도 h1~h3 위계가 중요하다.
<h1>가장 큰 제목</h1> <h2>두 번째 제목</h2> <h3>세 번째 제목</h3> <!-- h4, h5, h6 으로 갈수록 작아짐 -->
강조와 중첩 — strong
strong은 텍스트를 굵게 표시하는 강조 태그다. p 안에 strong을 넣는 것처럼, 태그 안에 또 다른 태그를 넣는 걸 중첩(nesting)이라고 한다. 여닫는 순서를 지키는 게 중요하다.
<p>저는 <strong>개발</strong>을 좋아합니다.</p>
<나 >를 텍스트로 출력하려면 엔티티 문자를 써야 한다. < → < / > → > / & → &
이미지 — img
닫는 태그가 없는 빈 요소다. src로 이미지 경로를 지정하고, alt로 이미지가 로드되지 않을 때 표시할 대체 텍스트를 넣는다. alt는 접근성과 SEO 모두에 영향을 준다.
<img src="image.jpg" alt="예시 사진" />
링크 — a
anchor의 약자. href 속성에 이동할 URL을 넣는다. 퍼블리싱할 때 가장 많이 쓰던 태그 중 하나다.
<a href="https://www.naver.com">네이버</a>
target="_blank"를 추가하면 새 탭으로 열린다. 오늘은 기본 링크만 다뤘고 심화 활용은 2일차에서 정리했다.
✍️ 마치며
코드를 오랜만에 처음부터 치니까 손이 잠깐 어색했다. 알고 있다고 생각했던 것들도 막상 빈 파일에서 시작하면 순서를 떠올리는 데 한 박자가 걸린다. 그 감각을 다시 익히는 게 오늘 하루의 수확이었다.
🏷️ 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 |
| [260630화 02일차] HTML (0) | 2026.06.30 |