반응형
BODY 태그란?
HTML은 크게 <head>와 <body>로 구성됩니다. <head> 태그는 HTML 문서의 메타데이터와 스타일시트를 정의하지만, <body>는 웹페이지의 실제 내용을 담는 부분입니다. 지금 보고 있는 블로그의 모든 텍스트, 이미지, 링크, 여기에는 없지만 비디오 등이 포함되지요.
예시
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>제목입니다</title>
</head>
<body>
<h1>환영합니다!</h1>
<p>이곳은 내 웹 페이지의 내용을 담는 공간입니다.</p>
<img src="image.jpg" alt="이미지">
<a href="https://www.example.com">링크</a>
<!-- 추가적인 내용을 여기에 작성 -->
</body>
</html>
아래 그림처럼 박스를 쳐보면 더 쉽게 이해할 수 있어요
<body> 태그 안에는 아래와 같은 태그들을 통해서 컨텐츠를 만들수 있습니다.
아래 태그 외에도 많은 태그들이 존재합니다.
| 태그 | 설명 | 관련 포스트 |
| <h1>~<h6> | 콘텐츠의 제목을 작성할 때 사용 | HTML 문서 제목을 만드는 H 태그, SEO 최적화 필수 태그 |
| <p> | 문단을 정의할 때 사용 | HTML P 태그, 글을 구조화하고 가독성을 높이는 도구 |
| <a> | 링크를 걸때 사용 | HTML의 핵심 요소, a 태그: 링크의 세계로의 초대 |
| <img> | 이미지 파일을 삽입할 때 사용 | 이미지 표현을 위한 HTML img 태그 |
| <section> | 웹페이지 구획을 나눌때 사용 | 웹 페이지 구성을 위한 HTML <section> 태그 |
| <ul> | 불렛 기호로 목록을 정리할 때 사용 | HTML 리스트 생성 <ul> 태그 - 순서없이 마커로 목록 생성 |
| <ol> | 순서대로 목록을 정리할 때 사용 | HTML 리스트 생성 <ol> 태그 - 순서가 존재하는 목록 생성 |
TCP School의 태그 사전보러 가기
코딩교육 티씨피스쿨
4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등
tcpschool.com
반응형
'HTML' 카테고리의 다른 글
| HTML footer 태그, 웹페이지의 마무리를 담당하는 태그 (0) | 2023.06.06 |
|---|---|
| HTML main 태그, body 태그 내에서 핵심 콘텐츠를 감싸는 공간 (0) | 2023.06.05 |
| HTML Label 태그, input 태그와 함께 다니는 최적 조합 (0) | 2023.06.03 |
| 인터랙티브 웹페이지 구현을 위한 HTML Input 태그의 활용 (0) | 2023.06.02 |
| HTML <meta> 태그: 웹사이트 성능 향상과 검색 엔진 최적화를 위한 핵심 요소 (0) | 2023.06.01 |
