⭐Day 2⭐
[오늘의 목표] HTML 기본 문서 만들기
[공부할 페이지] p.44~p.71
03-1. HTML과 첫 만남
03-2. HTML 구조 파악하기
03-3. HTML 파일 만들기
03-4. 웹 문서 구조를 만드는 시맨틱 태그
HTML : HyperText Markup Language (웹 문서를 만드는 언어)
HTML 구조
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>html 복습</title>
</head>
<body>
<h1>하이</h1>
<h2>하이</h2>
<h3>하이</h3>
<h4>하이</h4>
<h5>하이</h5>
</body>
</html><!DOCTYPE html>로 시작 → <html>, <head>, <body> 의 3개 영역으로 이루어짐
- html, head, body 태그는 모두 닫아주는 태그가 존재
<!DOCTYPE html> : 이 문서는 HTML5언어로 작성한 웹 문서이다
<html> ~ </html> : 웹 문서의 시작과 끝. </html> 태그 뒤에는 아무 내용 없어야 함
<head> ~ </head> : 문서 정보를 알려주는 곳.
<meta> : 문자 세트 등 문서 정보가 들어있음. 화면에 글자 표시 할 때 인코딩 사용 지정할 수 있다. (한글 표시의 경우, <meta charset="UTF-8"> 과 같이 UTF-8이라는 문자 세트 사용한다고 표시해야 한다
- <title> ~ </title> : 문서 제목을 나타냄→웹 브라우저의 탭 부분에 들어가는 제목!
<body> ~ </body> : 웹 브라우저에 직접 표시할 내용을 나타냄.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>첫 번째 문서 연습</title>
</head>
<body>
<h1>프런트엔드 웹 개발</h1>
<hr>
<p>HTML</p>
<p>CSS</p>
<p>자바스크립트</p>
</body>
</html>시맨틱 태그
시맨틱 태그(semantic tag) : html의 태그는 그 이름만 봐도 의미를 알 수 있어, 시맨틱 태그라고 함
<header> 태그
- 헤더 영역을 의미함. 사이트에서 헤더는 보통 맨 위 or 왼쪽에 존재.
- 검색 창 / 사이트 메뉴 삽입
<nav> 태그
- 다른 위치로 연결 or 다른 웹 문서로 연결하는 링크를 만드는 역할
- 웹 문서의 위치에 영향 ❌ → 푸터 / 사이드 바 등에 포함하거나 독립 사용 가능
<main> 태그
- 웹 문서의 핵심 콘텐츠를 넣음
- 웹 문서에서 한 번만 사용 가능하다
<article> 태그
- 웹에서 보여주고 싶은 내용을 넣음
- ex ) 블로그 포스트 or 뉴스 기사 등 독립된 콘텐츠 항목
- 여러 개 사용 가능. 안에 <section> 태그 사용도 가능
<section> 태그
- 콘텐츠 영역
- article 태그와 비슷해 보이나, section 태그는 몇 개의 콘텐츠를 묶는 용도로 사용하고, article은 독립된 콘텐츠로 씀
<aside> 태그
- 왼, 오, 아래쪽에 (설정 가능) 사이드 바 만드는 역할
- 필요할 경우에만 사용!
<footer> 태그
- 맨 아래쪽에 있는 푸터 영역을 만드는 역할
- <header> 태그, <section>, <article> 등 다른 시맨틱 태그 사용 가능~
- 회사 정보(링크, 연락처 등) 입력하는 경우 많음
<div> 태그
- id 나 class 속성을 사용하여 문서 구조 만들 때, 스타일 적용 시 사용
'프론트엔드 > HTML&CSS' 카테고리의 다른 글
| Do it! HTML + CSS + 자바스크립트 웹 표준의 정석 [HCJ 챌린지 3일차] (0) | 2023.08.22 |
|---|---|
| Do it! HTML + CSS + 자바스크립트 웹 표준의 정석 [HCJ 챌린지 1일차] (0) | 2023.08.20 |
