HTML 태그 기본 1

주요 HTML 태그

• html: HTML 문서의 루트 요소
• head: 메타 정보 및 외부 파일 링크가 들어가는 부분
• meta: 문서의 메타데이터 (예: 문자셋, 뷰포트 설정 등)
• title: 브라우저 탭에 표시되는 제목
• body: 실제 웹페이지 콘텐츠가 들어가는 부분
• h1 ~ h6: 제목 태그 (h1이 가장 큰 제목, h6이 가장 작은 제목)
• p: 문단 태그
• br: 줄바꿈 태그
• blockquote: 인용문 태그
• q: 짧은 인용문 태그

텍스트

hn 태그

<h1>제목 1</h1>
<h2>제목 2</h2>
<h3>제목 3</h3>
<h4>제목 4</h4>
<h5>제목 5</h5>
<h6>제목 6</h6>

h1 태그는 한 페이지 당 1개만 사용, 번호 건너띄지 않고 순서대로 사용

p 태그

문단 작성할 때

<p>이것은 단락입니다. HTML에서 텍스트를 구조화하는 데 사용됩니다.</p>

br 태그

줄 바꿈

<p>첫 번째 줄입니다.<br>두 번째 줄입니다.</p>

첫 번째 줄입니다.
두 번째 줄입니다.

blackquote 태그

인용문 작성할 때 사용, 반드시 한 개 이상의 <p> 포함해야 함

<blockquote>
    "가장 아름다운 것들은 우리의 상상 속에 존재합니다."
    <cite>— A. Einstein</cite>
</blockquote>

<blockquote cite="A. Einstein">
    <p>가장 아름다운 것들은 우리의 상상 속에 존재합니다</p>
</blockquote>

q 태그

짧은 인용문

<p>그녀는 <q>모든 꿈은 이루어질 수 있다</q>고 말했다.</p>

ins, del

ins: 새로운 내용을 추가할 때
del: 기존 내용을 삭제할 때

<p>이 문장은 <ins>추가된 내용</ins>이 포함되어 있습니다.</p>
<p>이 문장에서 <del>삭제된 내용</del>이 있습니다.</p>

sub, sup

sub: 아래 첨자
sup: 윗첨자

<p>공기의 원소 기호는 H<sub>2</sub>O</p>
<p>4<sup>2</sup>은 16입니다.</p>

공기의 원소 기호는 H₂O
4²은 16입니다. 

텍스트 강조하기

strong 태그

텍스트에 강한 강조. 글자 굵게

<p>이 문장은 <strong>중요한</strong> 내용을 포함하고 있습니다.</p>

em 태그

텍스트에 강조. 이탤릭체. 문맥적 강조

<p>이 문장은 <em>강조된</em> 내용을 포함하고 있습니다.</p>

공간 분할

블록 요소 & 인라인 요소

• 블록 요소: 새로운 줄에서 시작하고, 전체 너비를 차지하는 요소 (예: div, p, h1 ~ h6)
• 인라인 요소: 줄 내에서 다른 요소와 함께 표시되는 요소 (예: span, a, strong, em)

div 태그

블록 요소 & 인라인 요소를 그룹으로 묶을 때

<div class="movie">
  <p>영화 소개</p>
  <p>영화를 소개하는 페이지입니다.</p>
</div>
<div class="tv">
  <p>TV 프로그램 소개</p>
  <p>TV 프로그램을 소개하는 페이지입니다.</p>
</div>

span 태그

인라인 요소를 그룹으로 묶을 때

<p>이 문장에서 <span>특정 단어</span>에 그룹을 주었습니다.</p>

부모, 자식 형제 개념

• 부모: 다른 요소를 감싸고 있는 상위 요소
• 자식: 부모 요소 안에 포함된 하위 요소
• 형제: 같은 부모를 가진 요소들