HTML 기초 문법 정리하기
이번 포스팅에서는 기본적인 HTML 태그들을 예제와 함께 정리해보겠습니다!
HTML의 기본 구조
HTML 문서는 기본적으로 아래와 같은 구조를 갖습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>문서의 제목</title>
<meta charset="utf-8">
<meta name="description" content="이 문서는 실습 문서입니다.">
<meta name="author" content="캐스퍼">
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- 여기에 콘텐츠를 작성합니다 -->
</body>
</html>본문 태그 (Body Tag)
HTML에서 다양한 태그들을 활용하여 콘텐츠를 구성할 수 있습니다.
1. 제목 태그
HTML은 6단계의 제목 태그를 제공합니다.
<h1>제목1</h1>
<h3>제목3</h3>
<h4>제목4</h4>
<h5>제목5</h5>
<h6>제목6</h6>2. 문단 태그
문단을 작성할 때는 <p> 태그를 사용합니다.
<p>이것은 문단입니다.</p>3. 텍스트 강조
텍스트를 굵게, 기울이게, 밑줄을 그리거나 취소선을 넣는 등 다양한 스타일을 적용할 수 있습니다.
<b>굵은 텍스트</b>
<strong>강조된 굵은 텍스트</strong>
<i>기울어진 텍스트</i>
<em>강조된 기울어진 텍스트</em>
<u>밑줄</u>
<s>취소선</s>
<del>삭제된 단어</del>
<ins>추가된 단어</ins>4. 링크 태그
다른 웹페이지로 연결되는 링크를 만들려면 <a> 태그를 사용합니다.
<a href="https://naver.com">네이버로 이동</a>5. 블록 요소와 인라인 요소
블록 요소는 한 줄 전체를 차지하며, 인라인 요소는 텍스트와 같은 한 줄 안에서 표현됩니다.
- 블록 요소
<div>블록1</div>
<div>블록2</div>
<div>블록3</div>- 인라인 요소
<span>인라인 요소</span> 인라인 옆에 텍스트주석
코드 내에서 설명을 달고 싶다면 주석을 사용할 수 있습니다. 주석은 실행되지 않습니다.
<!--
주석 내용은 화면에 보이지 않습니다.
여러 줄 주석도 가능합니다.
-->스타일 연결
CSS를 연결하여 HTML의 디자인을 꾸밀 수 있습니다.
<link rel="stylesheet" href="style.css" />style.css 파일에 스타일을 작성하여 HTML 문서에 적용합니다.
聞一知十