HTML이란? (HyperText Markup Language)
간단히 말하면 웹페이지의 구조를 태그를 이용하여 정의하는 언어
- HyperText : 하이퍼링크를 통해 다른 페이지로 이동할 수 있는 텍스트
- Markup: 태그를 이용하여 텍스트에게 역할을 주는 것 Ex) 제목, 줄바꿈, 비디오 등
- Language : 브라우저가 이해할 수 있는 언어
html 문서의 기본 구조
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>- !DOCTYPE html : 현재 문서가 HTML 언어로 작성한 웹 문서
- html : 웹 문서의 시작과 끝
- lang="en" : 페이지가 어떤 언어로 작성됐는지 명시.
- head : 메타데이터와 웹페이지의 타이틀
- meta charset="UTF-8" : 문자 인코딩 방식을 UTF-8로 설정하는 것. UTF-8은 대부분의 언어를 지원하기에 한글이 깨지지않음.
- width=device-width : 페이지의 너비를 기기 너비에 맞춤
- initial-scale=1.0 : 처음 화면을 보여줄 때 1배율로 보여줌
- title : 웹 브라우저 탭에 뜨는 제목
- body : 브라우저 화면에 보이는 부분
오늘 배운 태그
| 종류 | 태그 |
|---|---|
| 시맨틱 태그 | header, main, footer, section, article |
| 텍스트/목록 | h1~h5, ul, br |
| 미디어 | video controls, audio controls |
| 폼 | form, fieldset, legend, label, input, textarea, button |
시맨틱 태그(Semantic Tag)
:태그 이름 자체에 의미가 담겨 있음
ex) header
시맨틱 태그를 쓰는 이유는?
다른 개발자들과 협업을 할 때 코드의 가독성을 높인다.
배운 내용을 바탕으로 아래와 같이 나의 자기소개서 구조를 만들어봤다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About Me - 서지현</title>
</head>
<body>
<!-- 헤더 : 페이지 상단 영역 -->
<header>
<h1>jhwest.dev</h1>
<nav>
<ul>
<li><a href="#about">About Me</a>
<li><a href="#favorites">Favorites</a>
<li><a href="#experience">Experience</a>
<li><a href="#guestbook">Guestbook</a>
</ul>
</nav>
</header>
<!-- main: 페이지의 내용 부분 -->
<main>
<!-- section: 주제별 구역 -->
<section id="about">
<h2>ABOUT ME</h2>
<P>나를 소개합니다.</P>
<!-- 테이블 -->
<!--
table : 표 전체
thead : 헤더 행 그룹
tbody : 본문 행 그룹
tr : 행(row)
th : 헤더 셀(굵게 + 가운데 정렬)
td : 일반 셀
-->
<table border="1">
<tr>
<th>이름</th>
<td>서지현</td>
</tr>
<tr>
<th>MBTI</th>
<td>INFP</td>
</tr>
<tr>
<th>사는 곳</th>
<td>인천</td>
</tr>
</table>
</section>
<section id="favorites">
<h2>FAVORITES</h2>
<P>내가 좋아하는 것들</P>
<!-- dl dt dd -->
<dl>
<dt>1. 내가 제일 좋아하는 음식은?</dt>
<dd>피자</dd>
<dt>2. 최애 영화 혹은 드라마는?</dt>
<dd>선재업고튀어, 미지의서울, 그해우리는 등</dd>
<dt>3. 취미는?</dt>
<dd>재봉틀, 걷기</dd>
</dl>
</section>
<section id="experience">
<h2>EXPERIENCE</h2>
<!-- 이미지 + 캡션 -->
<figure>
<img src="#" alt="산티아고 순례길" width="500">
<figcaption>사진 1. 산티아고 순례길</figcaption>
</figure>
</section>
<section id="guestbook">
<h2>GUEST BOOK</h2>
<!--
form : 데이터를 사용자에게 입력 받아 서버에 전송하는 컨테이너
action : 데이터를 보낼 URL
method : GET(URL에 노출) VS POST(숨겨서 전송)
-->
<form action="#" method="post">
<!-- fieldset : 연관된 입력 요소를 그룹화-->
<fieldset>
<label for="name">이름</label>
<input type="text" id="name" name="name" placeholder="이름을 입력해 주세요." required>
<br><br>
<!-- textarea : 여러 줄 텍스트 입력 -->
<label for="message">메세지</label><br>
<textarea id="message" name="message" rows="5" cols="40" placeholder="메세지를 입력해 주세요."></textarea>
<!-- type = "submit" : 데이터 전송 -->
<button type="submit">전송</button>
<!-- type = "reset" : 모든 입력 값 초기화 -->
<button type="reset">초기화</button>
</fieldset>
</form>
</section>
</main>
<!-- footer : 사이트 하단 영역 -->
<footer>
<p>© 2026. 서지현. All rights reserved.</p>
</footer>
</body>
</html>