집

웹 프론트엔드

CSS 튜토리얼

HTML 요소 소개

Linda Hamilton

Jan 14, 2025 am 06:47 AM

이 강의에서는 다양한 HTML 태그와 해당 태그의 목적, 웹 애플리케이션에서 태그를 효과적으로 사용하는 방법을 살펴보겠습니다. 가장 일반적으로 사용되는 HTML 태그와 해당 속성에 대해 논의하겠습니다.

단락 태그

문단은 아마도 가장 일반적으로 사용되는 HTML 요소일 것이며

로 정의됩니다. 이는 블록 수준 요소이므로 각 단락이 새 줄에서 시작됩니다.

  <p>This is the first paragraph.</p>
  <p>This is the second paragraph, which starts on a new line.</p>

요소를 사용하면 브라우저는 자동으로 추가 공백을 무시하고 텍스트를 한 줄로 렌더링합니다.

<!-- prettier-ignore -->

  This is the first paragraph.
  This is the second paragraph, which starts on a new line.

코드 데모 보기 ↗

단일 단락 요소 내에 줄 바꿈을 원하는 경우 요소입니다. 이는 닫는 태그가 필요하지 않은 HTML 요소 중 하나입니다.

  <p>
    This is the first paragraph.<br>
    This is the second paragraph, which starts on a new line.
  </p>

코드 데모 보기 ↗

제목 태그

기사를 작성할 때 문단 사이에 제목을 추가하면 기사가 더 체계적으로 정리되는 것이 좋습니다. HTML 문서도 같은 방식으로 작동합니다. HTML은

에서 6가지 수준의 제목을 제공합니다.

으로.

<h1 id="Heading">Heading 1</h1>
<h2 id="Heading">Heading 2</h2>
<h3 id="Heading">Heading 3</h3>
<h4 id="Heading">Heading 4</h4>
<h5 id="Heading">Heading 5</h5>
<h6 id="Heading">Heading 6</h6>

코드 데모 보기 ↗

대부분의 경우

웹페이지를 만들 때 충분해야 하며 일반적으로

및

는 웹페이지 구조를 불필요하게 복잡하게 만듭니다.

은 상단 제목이며 웹페이지에서 특별한 역할을 합니다.

은 하나만 있어야 합니다. 각 HTML 문서의 요소이며 전체 페이지를 요약해야 합니다.

서식 요소

가끔 굵은 글씨, 기울임꼴, 밑줄 표시 등 다양한 형식을 지정하여 특정 단어와 단락을 강조하고 싶을 수도 있습니다. HTML은 이러한 효과를 얻는 데 도움이 되는 서식 지정 요소를 제공합니다.

<b></b>
<strong></strong>

<i></i>
<em></em>

<mark></mark>

<small></small>

<del></del>
<ins></ins>

<sub></sub>
<sup></sup>

코드 데모 보기 ↗

그리고 요소는 동일한 효과를 갖습니다. 둘 다 포함된 텍스트를 굵게 표시합니다.

<p>
  Lorem ipsum <b>dolor sit</b> amet consectetur
  <strong>adipisicing elit</strong>.
</p>

CodePen 데모에서 볼 수 있듯이 동일한 외관을 가지고 있지만 브라우저와 검색 엔진에 따라 다른 용도로 사용됩니다.

특별한 의미를 추가하지 않고 텍스트를 굵게 표시하는 반면 동봉된 텍스트가 상당한 중요성을 가지고 있음을 나타냅니다.

그리고 요소는 비슷해요. 둘 다 텍스트를 이탤릭체 형식으로 바꿉니다. 는 특별한 의미를 나타내지 않지만 기울임꼴로 표시되는 강조된 텍스트를 정의합니다.

  <p>This is the first paragraph.</p>
  <p>This is the second paragraph, which starts on a new line.</p>

요소는 강조 표시/표시된 텍스트를 정의합니다.

<!-- prettier-ignore -->

  This is the first paragraph.
  This is the second paragraph, which starts on a new line.

요소는 작은 텍스트를 정의합니다.

  <p>
    This is the first paragraph.<br>
    This is the second paragraph, which starts on a new line.
  </p>

요소는 삭제된 텍스트를 나타내며, 포함된 텍스트 전체에 취소선을 추가하여 표시됩니다. 반면에 요소는 삽입된 텍스트를 나타내는 데 사용되며 밑줄이 그어진 텍스트로 표시됩니다.

<h1 id="Heading">Heading 1</h1>
<h2 id="Heading">Heading 2</h2>
<h3 id="Heading">Heading 3</h3>
<h4 id="Heading">Heading 4</h4>
<h5 id="Heading">Heading 5</h5>
<h6 id="Heading">Heading 6</h6>

및 ^{요소는 각각 아래 첨자와 위 첨자를 정의합니다.}

<b></b>
<strong></strong>

<i></i>
<em></em>

<mark></mark>

<small></small>

<del></del>
<ins></ins>

<sub></sub>
<sup></sup>

HTML 요소에 스타일을 추가하는 방법

때때로 이러한 서식 요소의 기본 표현이 의도한 의미를 표현하기에 부적절할 수 있습니다.

예를 들어 요소는 삭제된 텍스트를 취소선으로 나타내므로 이해하기 쉽습니다. 그러나 요소는 삽입을 나타내기 위해 밑줄을 사용하는데 이는 매우 혼란스러울 수 있습니다.

이러한 요소의 기본 모양을 개선하려면 다음과 같은 스타일 속성을 사용할 수 있습니다.

<p>
  Lorem ipsum <b>dolor sit</b> amet consectetur
  <strong>adipisicing elit</strong>.
</p>

기본적으로 링크에는 밑줄이 그어져 파란색으로 표시되며, 클릭 시 href 속성에 지정된 대상으로 이동하게 됩니다.

시연하려면 작업 디렉토리에 Destination.html 파일을 만드세요.

<p>Lorem ipsum <i>dolor sit</i> amet consectetur <em>adipisicing elit</em>.</p>

<p>Lorem ipsum <mark>dolor sit</mark> amet consectetur adipisicing elit.</p>

그런 다음 목적지를 가리키는 링크를 index.html 파일에 추가하세요.

<p>Lorem ipsum <small>dolor sit</small> amet consectetur adipisicing elit.</p>

HTML 요소 소개

링크를 클릭하면 Destination.html 문서로 이동합니다.

HTML 요소 소개

HTML 요소 소개.html에 돌아가기 링크를 추가하여 index.html로 돌아갈 수도 있습니다.

<p>
  Lorem ipsum <del>dolor sit</del> amet <ins>consectetur adipisicing</ins> elit.
</p>

go back HTML 요소 소개

이러한 상호 연결된 링크가 오늘날 우리가 보는 인터넷을 형성합니다.

기본적으로 연결된 대상은 같은 창에서 열립니다. 대상 속성을 설정하여 해당 동작을 변경할 수 있습니다. 예를 들어, target="_blank"는 새 탭에서 대상을 엽니다.

<p>
  Lorem ipsum <sub>dolor sit</sub> amet <sup>consectetur adipisicing</sup> elit.
</p>

코드 데모 보기 ↗

알 수 있는 또 다른 점은 링크가 처음에는 파란색으로 표시된다는 것입니다. 클릭하는 순간 빨간색으로 변합니다. 이후에는 링크가 보라색으로 변해 이전에 해당 링크를 방문한 적이 있음을 나타냅니다.

이 동작은 의사 클래스라는 개념과 관련이 있으며, 이를 통해 다양한 조건에서 요소에 대해 다양한 스타일을 정의할 수 있습니다. CSS에 대해 더 이야기할 때 이 주제를 다시 다루겠습니다.

기울기

코드 데모 보기 ↗

HTML에는 정렬된 목록, 정렬되지 않은 목록, 설명 목록의 세 가지 유형의 목록이 있습니다.

순서가 지정된 목록은

로 생성됩니다.
```
  <p>This is the first paragraph.</p>
  <p>This is the second paragraph, which starts on a new line.</p>
```
순서가 지정되지 않은 목록은
```


  This is the first paragraph.
  This is the second paragraph, which starts on a new line.
```
설명 목록은 항목 목록과 각 항목에 대한 설명으로 구성되므로 좀 더 복잡합니다. 설명 목록은
요소에서 각 목록 항목은
로 정의되며, 각 설명문은
로 정의됩니다.
```
  <p>
    This is the first paragraph.<br>
    This is the second paragraph, which starts on a new line.
  </p>
```
레이아웃 요소

지금까지 텍스트, 목록, 이미지 등 콘텐츠를 표시하는 데 사용되는 요소에 대해서만 살펴보았습니다. 실제로 HTML에는 이러한 요소를 구성하는 또 다른 범주의 요소가 있습니다.

특정 유형의 콘텐츠를 표시하도록 설계되지 않았지만 대신 다른 요소의 컨테이너 역할을 합니다. CSS와 결합하면 웹페이지에 대한 다양한 레이아웃을 만들 수 있습니다. 일반적으로 사용되는 레이아웃 요소 중 일부는 아래 목록에 나와 있습니다.
- : 문서의 헤더 섹션을 정의하며 일반적으로 웹페이지 상단에 위치합니다.
- : 탐색 모음을 정의합니다. 대부분의 웹페이지에서는 헤더와 함께 상단에 위치하지만 일부 개발자는 페이지 측면에 배치하기도 합니다.
- : 문서의 섹션을 정의합니다.
- : 웹페이지의 독립 섹션을 정의합니다.
- : 사이드바 등 주요 콘텐츠 이외의 콘텐츠입니다.
- : 웹페이지 하단에 위치한 바닥글 섹션입니다.
- : 사용자가 열고 닫을 수 있는 탭을 생성합니다.
- :
  에 대한 제목을 만듭니다. 요소. 요소.
```
<h1 id="Heading">Heading 1</h1>
<h2 id="Heading">Heading 2</h2>
<h3 id="Heading">Heading 3</h3>
<h4 id="Heading">Heading 4</h4>
<h5 id="Heading">Heading 5</h5>
<h6 id="Heading">Heading 6</h6>
```
코드 데모 보기 ↗
- : 그리고 물론 가장 중요한 레이아웃 요소인
  는 분할을 나타냅니다. 웹페이지에 블록을 생성하는 일반적인 요소이며 특별한 용도로 사용되지 않습니다.
  실제 웹페이지의 경우 대부분의 섹션과 블록이 위에서 언급한 의미 요소와 일치하지 않기 때문에 이는 가장 일반적으로 사용되는 레이아웃 요소입니다. 결과적으로 많은 개발자는
  
  페이지 레이아웃을 생성합니다.
  
  <p>This is the first paragraph.</p> <p>This is the second paragraph, which starts on a new line.</p>
  
  요소는 항상 새 줄에서 시작하고 가능한 한 많은 수평 공간을 차지합니다. 반면에 요소는 새 줄에서 시작하지 않고 필요한 만큼만 공간을 차지합니다.
  
  사실 이게 블록 요소와 인라인 요소의 차이입니다.
  
  지금까지 언급한 대부분의 요소는
  
  ,
  
  ,
  와 같은 블록 요소입니다. 추가 스타일을 정의하지 않으면 자동으로 가능한 한 많은 수평 공간을 차지합니다.
  
  요소는 인라인 요소의 예입니다. 다른 요소와 함께 배치할 때 필요한 만큼만 공간을 차지합니다. 너비와 높이 속성은 아무런 영향을 미치지 않습니다.
  
  HTML에는 블록 요소와 인라인 요소 등 다양한 요소가 있습니다. 한 강의에서 이 모든 요소를 논의하는 것은 불가능하지만 관심이 있으시면 W3Schools의 모든 HTML 요소에 대한 참조 자료를 여기에서 확인하실 수 있습니다.
  
  추가 자료
  
  CSS 선택기 사용 방법
  
  시맨틱 HTML 코드란 무엇입니까?
  
  CSS에서 Div를 중앙에 배치하는 방법