HTML/html css 공부

HTML 기초 공부(5) - 자주 사용하는 HTML 기본 태그

lamarcK 2025. 3. 7. 17:09

텍스트 관련 태그

<h1> ~ <h6>

제목 (Heading의 약자). <h1>이 가장 중요한 제목이며, 숫자가 커질수록 중요도가 낮아진다. h1, h2, h3, h4, h5, h6. 

<h1>제목1</h1>
<h2>제목2</h2>
<h6>제목6</h6>

제목1

제목2

제목6

<p>

단락 (Paragraph의 약자). 자동으로 단락이 나뉜다. 별도로 줄 바꿈을 해줄 필요가 없다. 가로줄이 가득 찰 경우 알아서 줄 바꿈도 해준다.

<p>1번째 단락</p> <p>2번째 단락. 단락 (Paragraph의 약자). 별도로 줄 바꿈을 해줄 필요가 없다. 가로 줄이 넘쳐날 경우 자동으로 줄도 바뀌게 된다.</p>

1번째 단락

2번째 단락. 단락 (Paragraph의 약자). 별도로 줄 바꿈을 해줄 필요가 없다. 가로 줄이 넘쳐날 경우 자동으로 줄도 바뀌게 된다.

<pre>

preformatted text"의 약자. 미리 서식이 지정된 텍스트를 표시하는 데 사용된다. 이 태그는 텍스트에 사용된 공백, 탭, 줄 바꿈 등을 브라우저 화면에 그대로 표시한다.

<pre>
  function myFunction() {
    console.log("안녕");
  }
</pre>

<pre>
  P
 P P
P P P
</pre>
  function myFunction() {
    console.log("안녕");
  }

  P
 P P
P P P

<a>

하이퍼링크 (Anchor의 약자). 

<a href="https://https://www.google.com/">예시 링크</a>

<strong>

텍스트 굵게 (Strong의 약자). 실제 모습은 bold와 다르지 않지만 의미적인 강조를 해주는 태그이다.

<strong>의미적 강조</strong>
의미적 강조

<em>

텍스트 기울임 (Emphasis의 약자). 실제 모습은 i와 다르지 않지만 의미적인 강조를 해주는 태그이다.

<em>기울임</em>
기울임

<br>

줄 바꿈 (Break의 약자). 말 그대로 줄을 바꿔주는 태그이다.

1번째 줄<br>2번째 줄
1번째 줄
2번째 줄

 

<hr>

수평선 (Horizontal Rule의 약자). 줄을 그어주는 태그이다.

줄긋기<hr>줄긋기2
줄긋기
줄긋기2

 

목록 관련 태그

<li>

목록 항목 (List Item의 약자)

<li>목록 항목</li>
  • 목록 항목

<ul>

순서 없는 목록 (Unordered List의 약자)

<ul>
    <li>항목 1</li>
    <li>항목 2</li>
</ul>
  • 항목 1
  • 항목 2

<ol>

순서 있는 목록 (Ordered List의 약자)

<ol>
    <li>항목 1</li>
    <li>항목 2</li>
</ol>
  1. 항목 1
  2. 항목 2

<dl>

정의 목록 (Description List의 약자). 일반적인 목록 태그인 <ul>, <ol>과는 달리, <dl> 태그는 용어와 그에 대한 설명을 짝지어 표시할 때 사용된다. 용어와 설명을 짝지어 표시하기 때문에 사전, 용어집, FAQ 등에서 유용하게 사용된다.

<dl> 태그의 구성 요소

  • <dl> (Description List) : 정의 목록 전체를 감싸는 컨테이너 태그.
  • <dt> (Description Term) : 정의하려는 용어를 나타내는 태그.
  • <dd> (Description Description) : 용어에 대한 설명을 나타내는 태그.
<dl>
  <dt>감자</dt>
  <dd>가짓과의 여러해살이풀. 높이는 60~100cm이며, 잎은 겹잎이고 어긋난다.</dd>
  <dt>가지</dt>
  <dd>가짓과의 한해살이풀. 높이는 60~100cm이며, 온몸에 털이 나 있고, 잎은 어긋난다.</dd>
  <dt>여우</dt>
  <dd>동물 갯과의 포유류. 개와 비슷한데 몸의 길이는 70cm 정도이고 홀쭉하며, 대개 누런 갈색 또는 붉은 갈색이다.</dd>
</dl>
감자
가짓과의 여러해살이풀. 높이는 60~100cm이며, 잎은 겹잎이고 어긋난다.
가지
가짓과의 한해살이풀. 높이는 60~100cm이며, 온몸에 털이 나 있고, 잎은 어긋난다.
여우
동물 갯과의 포유류. 개와 비슷한데 몸의 길이는 70cm 정도이고 홀쭉하며, 대개 누런 갈색 또는 붉은 갈색이다.