오늘은 html의 구조와 여러가지 태그들에 대해서 파헤쳐보겠다!
🔍 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>1. DTD(Document Type Definition)
- 웹 브라우저가 처리할 HTML 문서가 어떤 형식을 따라야 하는지 알려주는 것
- HTML 문서 작성 시, 제일 앞에 넣어야 함
2. html 태그
- HTML 문서의 시작과 끝을 의미
- 모든 태그는 html 태그 안에 작성되어야 함
3. head 태그
- HTML 문서의 메타데이터를 정의하는 영역
- 메타데이터 : HTML 문서에 대한 정보로 웹 브라우저에 직접 노출되지는 않음
- meta, title, link, style, script 태그를 사용해 정의
title 태그
- 웹 페이지의 제목 지정할 때 사용
4. body 태그
- 웹 브라우저에 노출되는 내용을 작성하는 영역
- 웹 브라우저에서 표시되는 모든 내용을 작성하면 됨
⚙️ HTML 특징
1. 블록 요소와 인라인 요소
블록 요소
- 새로운 줄에서 시작하여 전체 너비 차지
- 다음 블록 요소와는 새로운 줄에 배치
- div / hn / p / ul, ol, li / header, footer, section, article
인라인 요소
- 새로운 줄에서 시작하지 않으며 흐름에 따라 뱇
- 내용에 따라 크기 결정
- span / a / strong, b / em, i / img, input
2. 부모 & 자식 & 형제
<div>
<a>...</a>
<p>...</p>
</div>부모
- 특정 태그를 감싸고 있다면, 감싸고 있는 태그가 부모 태그
- 위의 예시에서
<div>태그가<a>와<p>태그의 부모 태그
자식
- 특정 태그를 감싸고 있다면, 감싸진 태그가 자식 태그
- 위의 예시에서
<a>와<p>태그가<div>태그의 자식 태그
형제
- 같은 부모 태그를 가지고 있는 태그
- 위의 예시에서
<a>와<p>태그가 서로 형제 태그
✨ HTML의 여러 태그들
1. 기본 텍스트 표현하기
hn 태그
<h1>~<h6>까지 총 6개가 존재하며, 중요한 텍스트에 사용<h1>태그는 한 페이지 당 1개만 사용하기- 번호가 순서대로 나오지 않아도 되나, 번호가 끊기면 안됨
- 앞 번호 없이 중간 번호부터 나오는 것도 옳지 않음
p 태그
- 문단 작성할 때 사용
br 태그
- 줄바꿈 할 때 사용
- 오픈 태그로만 사용해도 되나 빈 요소로 표기하는 걸 권장 (
<br />)
blockquote 태그
- 인용문 작성할 때 사용
- 반드시 한 개 이상의 p 태그 포함
- 출처 등을 표시할 때는 cite 태그를 함께 사용하거나 cite 속성을 함께 사용
<cite>작성자 이름</cite>⇒ 화면에 보임 (여러 번 사용 가능)<blockquote cite=”작성자 이름”>⇒ 화면에 안 보임 (한 번만 사용 가능)
q 태그
- 짧은 이용문을 작성할 때 사용
- cite 속성 사용 가능
ins, del 태그
- ins : 새로운 내용 추가할 때 사용
- del : 기존 내용을 삭제할 때 사용
sub, sup 태그
- sub : 아래 첨자를 나타낼 때 사용
- sup : 윗 첨자를 나타낼 때 사용
2. 텍스트 강조하기
strong 태그
- 굵게 표시됨
- 보통 긴 글을 강조할 때 사용
<b>: 같은 기능이지만 논시맨틱 태그
em 태그
- 이탤릭체로 표시됨
- 보통 짧은 글이나 단어를 강조할 때 사용
<i>: 같은 기능이지만 논시맨틱 태그
3. 공간 분할하기
div 태그
- 블록 요소와 인라인 요소를 그룹으로 묶을 때 사용
span 태그
- 인라인 요소를 그룹으로 묶을 때 사용
📌 출처
프론트엔드를 공부하고 있는 학생입니다🐌