728x90
안녕하세요
갑자기 html에 대해 공부하게 되었네요.
1. HTML 문서의 기본 뼈대
웹 페이지는 전부 HTML(HyperText Markup Language)로 작성됩니다.
가장 기본적인 형태는 아래와 같습니다.
코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>내 첫 웹페이지</title>
</head>
<body>
화면에 보이는 내용은 여기 안에 들어갑니다.
</body>
</html>결과
※ 설명
- <!DOCTYPE html> → HTML5 문서임을 선언
- <html> → 문서 전체를 감싸는 태그 (집 전체)
- <head> → 보이지 않는 정보 (설계도, 숨은 장치)
- <body> → 실제 화면에 표시되는 부분 (집 안)
2. <body> 안의 구역 나누기: <div>
<div>는 division(구역)의 줄임말입니다.
의미 자체는 없지만, 화면을 구역별로 나누는 컨테이너 박스로 자주 쓰입니다.
<body>
<div id="header">헤더 영역</div>
<div id="content">본문 영역</div>
<div id="footer">푸터 영역</div>
</body>실행 결과 (브라우저에 표시되는 모습):
3. id와 class 예제
id는 고유 식별자, class는 여러 개 그룹을 만들 때 사용합니다.
코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<style>
#uniqueBox {
background-color: gold;
padding: 10px;
margin-bottom: 10px;
}
.commonBox {
background-color: lightblue;
padding: 10px;
margin-bottom: 10px;
}
#special.commonBox {
border: 3px solid red;
}
</style>
</head>
<body>
<div id="uniqueBox">나는 id="uniqueBox"</div>
<div class="commonBox">나는 class="commonBox" 박스 1</div>
<div class="commonBox">나는 class="commonBox" 박스 2</div>
<div id="special" class="commonBox">id와 class 둘 다 가진 박스</div>
</body>
</html>결과
- 첫 번째 박스 → 노란색 배경 (id)
- 두 번째, 세 번째 박스 → 파란색 배경 (class)
- 마지막 박스 → 파란색 배경 + 빨간 테두리 (id + class 동시 적용)
👉 id는 고유, class는 여러 개 공유 가능하다는 차이를 알 수 있습니다.
4. <div> 대신 시맨틱 태그 활용하기
최근에는 의미 없는 <div> 대신, 의미 있는 시맨틱 태그를 권장합니다.
<body>
<header>헤더 영역</header>
<nav>메뉴</nav>
<main>본문 내용</main>
<footer>푸터 영역</footer>
</body>
- <header> → 상단 로고/타이틀
- <nav> → 내비게이션 메뉴
- <main> → 본문 콘텐츠
- <footer> → 하단 정보
검색엔진 최적화(SEO), 접근성 향상에 도움이 됩니다.
5. HTML 구조 다이어그램
아래 그림처럼 html → head + body → body 안의 구조로 이루어져 있습니다.
<html>
├─ <head> (설정, 보이지 않음)
└─ <body> (사용자에게 보이는 부분)
├─ <header> 상단 영역
├─ <nav> 메뉴
├─ <main> 본문
└─ <footer> 하단 영역▣ 정리
- <html> → 문서 전체 (집 전체)
- <head> → 보이지 않는 정보 (설계도)
- <body> → 실제 화면 (집 안)
- <div> → 구역 나누는 칸막이
- <header>, <nav>, <main>, <footer> → 의미 있는 구역 태그
처음에는 <div>로 연습하고, 익숙해지면 시맨틱 태그를 쓰면 더 좋은 구조가 됩니다.
감사합니다.
728x90