IT 과정 HTML 기초 011_텍스트

HTML은 웹 페이지를 만들 때 사용할 수 있는 다양한 텍스트 태그를 제공합니다. 이러한 태그는 텍스트 콘텐츠를 더 잘 구성하고 형식화하는 데 도움이 됩니다. 다음은 자주 사용되는 HTML 텍스트 태그입니다.

제목

제목 요소는 HTML 문서의 제목이나 부제목을 정의하는 데 사용되며, 일반적으로 문서 구조의 계층을 나타냅니다. 제목 요소는 h1부터 h6까지 6개의 레벨이 있으며, 레벨이 높을수록 제목의 중요도가 높습니다.

예시:

1
<h1>이것은 h1 제목입니다</h1>
2
<h2>이것은 h2 제목입니다</h2>
3
...
4
<h6>이것은 h6 제목입니다</h6>

결과:

[!요약]

• 제목 요소는 제목에만 사용하고, 굵게 또는 큰 글꼴만을 위해 제목 요소를 사용하지 마세요.
• 검색 엔진은 제목을 사용하여 웹 페이지의 구조와 콘텐츠를 색인합니다.
• 제목 요소를 올바르게 사용하면 페이지의 가독성, 접근성이 향상되고 SEO에 유리합니다.
• h1은 유일한 주 제목(가장 중요한)으로 사용하고, 그 다음에 h2(차선책), 그 다음 h3 순서로 사용하세요.

단락

단락 요소는 텍스트의 단락 구조를 정의하여 텍스트를 더 조직적이고 읽기 쉽게 만듭니다. 위아래 콘텐츠 전후에 각각 줄바꿈을 추가하여 텍스트를 독립적인 부분으로 그룹화하여 단락 사이에 명확한 구분이 있도록 합니다. 단락 요소는 주로 <p> 태그를 포함하며, 이는 단락을 나타냅니다.

예시:

1
<p>이것은 단락입니다.</p>
2
<p>이것은 다른 단락입니다.</p>

결과:

[!요약]

• HTML 문서에는 여러 단락이 존재할 수 있습니다
• 브라우저는 단락 전후에 자동으로 빈 줄을 추가합니다
• 종료 태그를 잊지 마세요(종료 태그를 잊어도 대부분의 브라우저는 정상적으로 표시합니다)
• 단락 요소가 추가하는 위아래 빈 줄이 마음에 들지 않고 줄 간격을 줄이고 싶다면 <br> 태그를 사용하세요
• 기본적으로 단락 요소에서 한 줄 코드에 표시되는 문자 수는 화면 너비에 따라 결정됩니다

하이퍼링크

<a> 요소는 하이퍼링크를 정의하는 데 사용되며, 사용자가 링크를 클릭하여 다른 페이지나 리소스로 이동할 수 있게 합니다. <a> 태그 내부에는 일반적으로 텍스트나 이미지가 포함되며, 이러한 콘텐츠가 링크의 클릭 가능한 부분이 됩니다. 또한 <a> 태그의 href 속성을 통해 링크의 대상 주소를 지정합니다. 하이퍼링크는 HTML의 기본 기능으로, 웹 페이지의 다른 부분으로 링크하거나 다른 웹 페이지, 심지어 다른 웹사이트로 링크할 수 있습니다.

예시:

1
<a href="https://www.zhaojian.net">zhaoJian.Net</a>

결과:

하이퍼링크 속성

• href: 링크 대상의 URL을 지정하며, 이는 링크의 가장 중요한 속성입니다. 다른 웹 페이지의 URL, 파일의 URL 또는 기타 리소스의 URL일 수 있습니다.
• target(선택 사항): 링크를 브라우저에서 여는 방법을 지정합니다. 일반적인 값으로는 _blank(새 탭이나 창에서 링크 열기)와 _self(현재 탭이나 창에서 링크 열기, 기본값)가 있습니다.
• title(선택 사항): 링크의 텍스트 정보를 제공하며, 일반적으로 마우스를 링크 위에 올렸을 때 표시됩니다.
• rel(선택 사항): 링크 대상과의 관계를 지정합니다. 예: nofollow(추적 안 함), noopener(새 컨텍스트 열지 않음), noreferrer(참조 정보 전달 안 함) 등.
• class: 링크의 CSS 클래스를 지정합니다.
• id: 링크의 CSS ID를 지정합니다.

앵커 링크

긴 웹 페이지에서는 페이지 내부의 특정 부분으로 연결되는 링크를 만들고 싶을 수 있습니다. 이는 앵커 링크를 통해 구현할 수 있습니다. 먼저 <a> 태그의 name 또는 id 속성을 사용하여 대상 위치를 표시한 다음, 링크의 href 속성에서 #와 대상의 name 또는 id 값을 사용하여 링크를 만듭니다.

예시:

1
<a href="#a1">a1로 이동</a>
2
<!-- 페이지를 넘길 수 있을 정도의 내용이나 <br> 생략 -->
3
<a name="a1">일부 내용</a>

결과:

하이퍼링크 “a1로 이동”을 클릭하면 페이지가 “a1내용” 부분으로 이동합니다.

이메일 링크

다른 웹 페이지로 연결하는 것 외에도 <a> 태그는 이메일 주소로 연결할 수 있습니다. href 속성 값 앞에 mailto:를 추가하면 클릭 시 사용자의 기본 메일 클라이언트를 시작하고 새 메일을 작성하는 링크를 만들 수 있습니다.

예시:

1
<a href="mailto:757118@qq.com">757118@qq.com으로 메일 보내기</a>

결과:

이 하이퍼링크를 클릭하면 시스템이 기본 메일 클라이언트를 시작하고 757118@qq.com으로 보내는 새 메일을 작성합니다.

[!요약]

• 마우스 포인터를 웹 페이지의 링크 위로 이동하면 화살표가 작은 손으로 바뀝니다.
• 하이퍼링크는 반드시 텍스트일 필요는 없으며, 이미지나 다른 HTML 요소도 링크가 될 수 있습니다.
• 기본적으로 링크는 브라우저에서 다음과 같은 형태로 표시됩니다: 방문하지 않은 링크는 파란색 글꼴에 밑줄로 표시됩니다. 방문한 링크는 보라색에 밑줄로 표시됩니다. 링크를 클릭하면 빨간색에 밑줄로 표시됩니다.

줄바꿈

줄바꿈 요소 <br>은 텍스트에 줄바꿈 문자를 삽입하여 텍스트를 강제로 새 줄로 이동시킵니다.

예시:

1
이것은 한 줄의 텍스트입니다.<br>이것은 다른 줄의 텍스트입니다.

결과:

[!요약]

• <br> 태그의 슬래시 /는 선택 사항입니다. HTML 4에서는 <br /> 태그에 슬래시가 반드시 포함되어야 합니다; HTML 5에서는 슬래시가 선택 사항입니다.

굵게

<b> 요소는 텍스트를 굵게 설정하는 기본 텍스트 스타일 태그이지만 텍스트의 의미론적 강조는 없습니다. <strong> 요소는 의미론적 태그로 텍스트의 강조를 나타내며, 일반적으로 브라우저는 굵게 표시합니다.

예시:

1
이것은 일반 텍스트입니다
2
<b>이것은 굵은 텍스트입니다</b>
3
<strong>이것은 강조 의미의 굵은 텍스트입니다</strong>

결과:

기울임

<i> 요소는 텍스트의 기울임 효과를 나타내지만 텍스트의 의미론적 강조는 없습니다. <em> 요소는 기울임 텍스트를 나타내며, 일반적으로 텍스트의 중요성을 강조하거나 시각적 효과를 만드는 데 사용됩니다.

예시:

1
이것은 일반 텍스트입니다
2
<i>이것은 기울임 텍스트입니다</i>
3
<em>이것은 강조 의미의 기울임 텍스트입니다</em>

결과:

밑줄

밑줄 요소 <u>는 밑줄 텍스트를 나타내는 데 사용됩니다.

예시:

1
이것은 <u>밑줄</u>이 있는 텍스트입니다

결과:

[!요약]

• HTML 5에서 밑줄 요소 <u>는 더 이상 권장되지 않습니다. 즉, 여전히 유효한 HTML 요소이지만 사용이 권장되지 않습니다.

취소선

취소선 요소 <del>은 삭제되거나 폐기된 텍스트를 표시하는 데 사용되며, 브라우저는 일반적으로 이 텍스트에 가로선을 추가합니다.

예시:

1
이것은 <del>취소선</del> 텍스트입니다

결과:

[!요약]

• HTML5에서 취소선 요소 <del>은 더 이상 권장되지 않습니다. 즉, 여전히 유효한 HTML 요소이지만 사용이 권장되지 않습니다.

하이라이트

<mark> 요소는 텍스트의 일부를 표시하여 해당 텍스트를 강조하거나 표시하는 데 사용됩니다. 일반적으로 <mark> 요소로 표시된 텍스트는 노란색 배경으로 강조 표시되어 문서에서 더 눈에 띄게 됩니다.

예시:

1
이것은 <mark>하이라이트</mark>된 텍스트입니다

결과:

아래 첨자와 위 첨자

<sub> 요소는 텍스트의 아래 첨자(subscript)를 나타내고, <sup> 요소는 텍스트의 위 첨자(superscript)를 나타냅니다. 아래 첨자와 위 첨자 요소는 일반적으로 수학, 화학식, 날짜, 온도 등의 시나리오에서 사용됩니다.

예시:

1
H<sub>2</sub>O는 물의 분자식입니다.
2
2<sup>10</sup>은 1024와 같습니다.

결과: