Articles

HTML 소개

텍스트 관련 태그

이 기사에서는 텍스트 관련 태그에 대해 설명합니다.

설명은 의미적 태그와 비의미적 태그로 나뉩니다.

YouTube Video

미리 보기를 위한 CSS 작성

html-tags.css

  1body {
  2    font-family: Arial, sans-serif;
  3    line-height: 1.6;
  4    margin: 20px 20px 20px 20px;
  5    background-color: #f4f4f9;
  6    color: #333;
  7}
  8
  9header h1 {
 10    font-size: 24px;
 11    color: #333;
 12    text-align: center;
 13    margin-bottom: 20px;
 14}
 15
 16h2, h3 {
 17    color: #555;
 18}
 19
 20h2 {
 21    font-size: 20px;
 22    border-bottom: 2px solid #ccc;
 23    padding-bottom: 5px;
 24}
 25
 26h3 {
 27    font-size: 18px;
 28    margin-top: 20px;
 29}
 30
 31p, pre {
 32    margin: 10px 0;
 33    padding: 0;
 34}
 35
 36ul, ol, dl, menu {
 37    margin: 0;
 38}
 39
 40pre {
 41    background-color: #f0f0f0;
 42    border-left: 4px solid #ccc;
 43    padding: 10px;
 44    overflow-x: auto;
 45}
 46
 47p.sample, .sample {
 48    background-color: #e7f4e9;
 49    padding: 10px;
 50    border-left: 4px solid #7bbd82;
 51    color: #333;
 52}
 53
 54p.sample-error, .sample-error {
 55    background-color: #f4e7e7;
 56    padding: 10px;
 57    border-left: 4px solid #bd827b;
 58    color: #333;
 59}
 60
 61p.sample-warn, .sample-warn {
 62    background-color: #f4f1e7;
 63    padding: 10px;
 64    border-left: 4px solid #bda97b;
 65    color: #333;
 66}
 67
 68code {
 69    padding: 2px 4px;
 70    border-radius: 4px;
 71    font-family: monospace;
 72}
 73
 74span {
 75    font-weight: bold;
 76}
 77
 78main {
 79    padding-bottom: 100px;
 80}
 81
 82article {
 83    background-color: white;
 84    padding: 20px;
 85    margin-bottom: 10px;
 86    border-radius: 8px;
 87    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 88}
 89
 90section {
 91    margin-bottom: 20px;
 92}
 93
 94table {
 95    width: 100%;
 96    border-collapse: collapse;
 97}
 98
 99th, td {
100    border: 1px solid #ddd;
101}

기본적인 텍스트 관련 태그

`<div>` 태그

This is a division of content.

1<div>This is a division of content.</div>

<div> 태그는 HTML 내에서 구획을 만들기 위해 사용되는 블록 수준 요소입니다.
<div> 태그는 비구조적인 태그입니다.

시맨틱 HTML에 초점을 맞출 때는 의미 있는 태그(
,
등)를 사용할 수 있습니다. 이는 검색 엔진과 스크린 리더가 페이지의 내용을 더 잘 이해하도록 돕습니다.
CSS와 자바스크립트를 결합하여 페이지의 외관과 동작을 제어할 수 있습니다.

태그는 페이지의 내용을 블록 수준 요소로 그룹화하는 데 사용됩니다. 주로 CSS 및 JavaScript와 결합해 페이지 레이아웃을 조정하고, 스타일을 설정하며, 요소를 조작하는 데 사용됩니다.

`<p>` 태그

This is a paragraph of text.

1<p>This is a paragraph of text.</p>

태그는 HTML에서 단락(문단)을 정의하는 데 사용되는 요소입니다.
태그는 단락을 나타내며 주로 텍스트를 그룹화하고 표시하는 데 사용됩니다. 텍스트의 섹션을 시각적으로 구분하여 콘텐츠를 읽기 쉽게 만드는 데 도움을 줍니다.
태그 내부에 다른 블록 수준 요소(
태그나
태그)를 포함할 수 없습니다. 이것은 HTML 명세에서 금지되어 있습니다. 만약 그렇게 한다면, 브라우저가 자동으로 태그를 닫아 제대로 표시되지 않을 것입니다.

`<a>` 태그

Go to codesparklab.com

1<a href="https://codesparklab.com" title="Code Spark Lab">Go to codesparklab.com</a>

태그는 링크를 생성하는 데 사용됩니다.

태그는 다른 페이지, 외부 사이트, 또는 파일로의 링크를 생성하는 데 사용됩니다. href 속성은 링크의 목적지를 지정하는 데 사용됩니다.

텍스트나 이미지 링크에 사용할 수 있으며, target="_blank"를 사용하면 링크가 새 탭에서 열리게 됩니다.

target 속성은 연결된 목적지가 어떻게 표시될지를 지정하는 데 사용됩니다.

_self (기본값): 현재 창이나 탭에서 링크를 엽니다.
_blank: 새 창이나 탭에서 링크를 엽니다.
_parent: 부모 프레임에서 링크를 엽니다.
_top: 모든 프레임을 무시하고 전체 창에서 링크를 엽니다.

title 속성은 링크에 툴팁을 표시하는 데 사용됩니다. 사용자가 링크 위에 마우스를 올려놓으면 지정된 제목이 표시됩니다.

1<a href="#section1">Go to Section 1</a>
2
3<h2 id="section1">Section 1</h2>
4<p>This is Section 1 content.</p>

<a> 태그는 같은 페이지 내에서 특정 위치로 이동하는 데도 사용됩니다. 이를 위해 타겟 요소에 id 속성을 설정하고 링크의 href 속성에서 이 id를 사용합니다.

`<span>` 태그

Here is some highlighted text

1Here is some <span style="color: red;">highlighted text

<span> 태그는 인라인 요소입니다.

<span> 태그는 인라인 요소이기 때문에 텍스트, 링크, 이미지 또는 다른 인라인 요소 사이에서 사용될 때 줄을 바꾸지 않습니다. 페이지의 흐름에 자연스럽게 맞습니다.
특정 스타일을 부분적으로 적용할 수 있습니다.

문서의 일부에만 스타일을 적용하고 싶을 때, <span> 태그를 사용하여 CSS 클래스나 ID를 지정하고 특정 범위에 스타일을 적용할 수 있습니다.
<span> 태그는 비구조적 요소입니다.

<span> 태그는 특별한 의미나 구조적 역할이 없기 때문에 스타일이나 스크립트 목적을 위해 순수하게 사용됩니다. 의미론적 강조가 필요할 때는, 나중에 소개할 <strong> 또는 <em>과 같은 의미가 있는 태그를 사용하여 더 적절합니다.

`<br>` 태그

Here is some text with a
line break.

1Here is some text with a <br> line break.

<br> 태그는 인라인 요소입니다.

<br> 태그는 인라인 요소이기 때문에 전체 블록을 차지하지 않으며, 위치한 곳에서 텍스트에 줄 바꿈을 만듭니다. <p> 태그가 단락을 구분하기 위해 위아래에 여백을 추가하는 반면, <br> 태그는 여백 없이 줄 바꿈을 만듭니다.
자체적으로 닫히는 태그이므로 닫는 태그 (</br>)가 필요 없습니다.
이를 과도하게 사용하는 것을 피하고, 단락 구분이나 레이아웃 조정을 위해 <p> 태그나 CSS를 사용하는 것이 좋습니다.

텍스트를 단락으로 구성할 때는 <p> 태그를 사용하는 것이 더 적절합니다. 레이아웃 조정을 위해 CSS를 사용하는 것도 권장됩니다. 예를 들어, CSS에서 white-space 속성을 사용하면 텍스트의 줄 바꿈과 공백을 나타내는 대로 표시할 수 있습니다.

`<hr>` 태그

This is some text.

This is another section of text.

1This is some text.<hr>This is another section of text.

<hr> 태그는 블록 수준 요소입니다.

<hr> 태그는 수평선을 삽입하여 콘텐츠의 섹션을 시각적으로 구분하는 데 사용됩니다. 이는 또한 주제적인 구분을 나타내는 데 사용될 수 있으며, 문맥에 따라 의미를 가질 수 있습니다.
이것은 자체적으로 닫는 태그이므로 닫는 태그(</hr>)가 필요하지 않습니다.
CSS를 사용하여 색상, 길이 및 두께를 사용자 정의할 수 있습니다.

의미론적 텍스트 관련 태그

`<h1>` 태그부터 `<h6>` 태그까지

Main Heading

Subheading

Sub-subheading

1<h1>Main Heading</h1>
2<h2>Subheading</h2>
3<h3>Sub-subheading</h3>

<h1>부터 <h6>까지의 태그는 HTML에서 사용되는 제목 태그입니다.

<h1> 태그는 가장 중요한 제목을 나타내며 일반적으로 전체 페이지의 메인 타이틀로 사용됩니다. HTML 문서에서는 <h1> 태그를 하나만 사용하는 것이 일반적입니다.

<h2> 태그는 <h1> 다음으로 중요한 제목이며, 페이지 내의 섹션 또는 장 제목으로 사용됩니다.

<h3> 태그는 <h2> 아래의 부제목이나 작은 섹션을 나타냅니다.

<h4>, <h5>, <h6> 태그는 더 낮은 수준의 제목을 나타내며, 보다 상세한 항목이나 섹션 제목에 사용됩니다.
제목 태그는 텍스트의 중요성을 나타내고 페이지의 논리적 구조를 만드는 데 도움을 줍니다. 검색 엔진은 페이지의 내용을 이해하기 위해 제목 태그를 사용합니다.

`<strong>` 태그

Important text to emphasize significance.

1<strong>Important text</strong> to emphasize significance.

<strong> 태그는 텍스트의 중요성이나 강조를 나타내기 위해 사용되는 HTML 태그이며, 일반적으로 굵은 글씨로 표시됩니다.
<strong> 태그는 시맨틱 태그이며, 그 주요 목적은 의미를 추가하는 것입니다.

이 태그는 텍스트가 문맥상 중요함을 나타낼 수 있습니다. 예를 들어, 검색 엔진에게 텍스트의 중요성을 보여줄 수 있으며, SEO에 유용합니다. 또한 스크린 리더를 사용하는 사용자에게 텍스트의 중요성을 전달합니다. 반면에, 나중에 소개될 <b> 태그는 단순히 텍스트를 굵게 만드는 태그이며 시맨틱 강조를 제공하지 않습니다.

`<em>` 태그

Emphasized text for italics and emphasis.

1<em>Emphasized text</em> for italics and emphasis.

<em> 태그는 텍스트의 중요성이나 강조를 나타내기 위해 사용되는 HTML 태그이며, 일반적으로 이탤릭체로 표시됩니다.
<em> 태그는 시맨틱 태그이며, 그 주요 목적은 의미를 제공하는 것입니다.

<strong> 태그와 마찬가지로, 이 태그는 텍스트가 문맥상 중요함을 나타낼 수 있습니다. <strong> 태그는 보통 굵게 표시되며, <em> 태그는 일반적으로 이탤릭체로 표시됩니다. 두 태그 모두 시맨틱 강조를 위해 스크린 리더와 검색 엔진에서 인식되지만, <strong>은 더 강한 중요성을 나타내고 <em>은 감정적인 강조를 전달합니다. 또한, 나중에 소개될 <i> 태그는 단순히 텍스트를 이탤릭체로 만들며 시맨틱 강조를 제공하지 않습니다.

`<mark>` 태그

Highlighted text for attention.

1<mark>Highlighted text</mark> for attention.

<mark> 태그는 특정 텍스트가 문맥상 중요함을 나타내는 데 사용됩니다. 이 태그는 검색 결과나 주요 포인트를 강조하는 데 유용합니다.
기본적으로, <mark> 태그로 둘러싸인 텍스트는 노란색 배경으로 표시되어 그 중요성을 시각적으로 강조합니다.

`<del>` 태그

~~Deleted text~~ shows removed content.

1<del>Deleted text</del> shows removed content.

<del> 태그는 텍스트가 삭제되었거나 수정되었음을 나타내는 데 사용됩니다. 이 태그는 텍스트의 변경 또는 수정 내역을 보여주는 데 유용합니다.
<del> 태그로 감싼 텍스트는 일반적으로 취소선으로 표시됩니다. 이것은 삭제된 내용을 시각적으로 나타냅니다.

<del> 태그로 감싼 텍스트는 화면 낭독기에서도 삭제된 것으로 인식됩니다. 이것은 시각적으로 명확하지 않은 내용도 이해할 수 있게 합니다.

`<ins>` 태그

Inserted text shows added content.

1<ins>Inserted text</ins> shows added content.

<ins> 태그는 문서에서 새로 추가되거나 수정된 텍스트를 나타내는 데 사용됩니다. 이 태그는 텍스트 추가 또는 수정 내역을 보여주는 데 유용합니다.
브라우저에서는 <ins> 태그로 감싼 텍스트가 일반적으로 밑줄로 표시됩니다. 이것은 추가된 내용을 시각적으로 나타냅니다.

<ins> 태그로 감싼 텍스트는 화면 낭독기에서도 새로 추가된 것으로 인식됩니다. 이것은 시각적으로 명확하지 않은 내용도 이해할 수 있게 합니다.

`<abbr>` 태그

WHO

1<abbr title="World Health Organization">WHO</abbr>

<abbr> 태그는 약어 또는 두문자어를 나타내는 인라인 요소입니다. 이 태그를 사용하면 약어의 전체 의미를 제공하고 SEO 및 접근성을 개선하는 데 기여합니다. 특히 약어에 익숙하지 않은 독자와 화면 낭독기 사용자가 내용을 더 잘 이해할 수 있게 도와줍니다.

텍스트 장식 관련 태그

`<b>` 태그

Bold text without semantic emphasis.

1<b>Bold text</b> without semantic emphasis.

<b> 태그는 텍스트를 굵게 표시하는 데 사용되는 인라인 요소입니다. 소개할 다른 태그들과 마찬가지로, 시각적 강조에 사용되지만 의미론적 강조에는 사용되지 않습니다.

`<i>` 태그

Italic text for style.

1<i>Italic text</i> for style.

<i> 태그는 텍스트를 기울이는 데 사용되는 인라인 요소입니다.

`<u>` 태그

Underlined text for decoration.

1<u>Underlined text</u> for decoration.

<u> 태그는 텍스트에 밑줄을 긋는 데 사용되는 인라인 요소입니다.

`<small>` 태그

This is small text.

1<small>This is small text.</small>

<small> 태그는 작은 크기의 텍스트를 표시하는 데 사용되는 인라인 요소입니다. 주된 콘텐츠에 부수적인 보충 정보나 주석을 나타내는 데 일반적으로 사용됩니다.

`<s>` 태그

~~Strikethrough text~~

1<s>Strikethrough text</s>

<s> 태그는 텍스트에 취소선을 그리는 데 사용되는 인라인 요소입니다.

`<sub>` 태그

H₂O

1H<sub>2</sub>O

<sub> 태그는 아래 첨자의 텍스트를 표시하는 데 사용되는 인라인 요소입니다.

`<sup>` 태그

E = mc²

1E = mc<sup>2</sup>

<sup> 태그는 위 첨자의 텍스트를 표시하는 데 사용되는 인라인 요소입니다.

위의 기사를 보면서 Visual Studio Code를 사용해 우리 유튜브 채널에서 함께 따라할 수 있습니다. 유튜브 채널도 확인해 주세요.

YouTube Video

HTML 블록 요소와 인라인 요소 코드 표시, 인용구, 리스트와 관련된 태그

텍스트 관련 태그

YouTube Video

미리 보기를 위한 CSS 작성

기본적인 텍스트 관련 태그

<div> 태그

<p> 태그

<a> 태그

<span> 태그

<br> 태그

<hr> 태그

의미론적 텍스트 관련 태그

<h1> 태그부터 <h6> 태그까지

Main Heading

Subheading

Sub-subheading

<strong> 태그

<em> 태그

<mark> 태그

<del> 태그

<ins> 태그

<abbr> 태그

텍스트 장식 관련 태그

<b> 태그

<i> 태그

<u> 태그

<small> 태그

<s> 태그

<sub> 태그

<sup> 태그

YouTube Video

`<div>` 태그

`<p>` 태그

`<a>` 태그

`<span>` 태그

`<br>` 태그

`<hr>` 태그

`<h1>` 태그부터 `<h6>` 태그까지

`<strong>` 태그

`<em>` 태그

`<mark>` 태그

`<del>` 태그

`<ins>` 태그

`<abbr>` 태그

`<b>` 태그

`<i>` 태그

`<u>` 태그

`<small>` 태그

`<s>` 태그

`<sub>` 태그

`<sup>` 태그