(3) HTML 태그

Notice

Recent Comments

Link

instagram

« 2024/07 »
일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31

Tags more

Archives

관리 메뉴

Minwoo Dev.

(3) HTML 태그 - b 본문

Web

(3) HTML 태그 - b

itisminu 2023. 7. 8. 18:41

728x90

SMALL

<b> : 다른 부가적인 목적 없이 단순히 굵게 표현되는 텍스트를 정의할 때 사용함.

HTML5에서 제목(heading)은 <h1>부터 <h6> 태그로, 강조된 텍스트는 <em> 태그로, 중요한 의미를 가지는 텍스트는 <strong> 태그로, 마지막으로 하이라이트된(highlighted) 텍스트는 <mark> 태그로 표현되어야 합니다.

따라서 위의 태그들에서 적절한 태그를 찾을 수 없을 때만 마지막 선택지로 <b> 태그를 사용해야 합니다.

<strong> vs <b>

<b> 요소는 콘텐츠의 중요성보다는 텍스트 자체에 주의를 끌기 위해 사용되지만, <strong> 요소는 콘텐츠 자체의 중요성을 강조할 때 사용됩니다.

<p>이 문장은 일반 텍스트입니다.</p>
<p><b>이 문장은 단순히 굵게 표현된 텍스트입니다.</b></p>

<base> : 해당 문서의 모든 상대 주고(relative URL) 에 대한 기본 URL(based URL)과 target 속성값을 정의할 때 사용함.

하나의 문서에는 최대 하나의 <base> 요소만이 존재할 수 있으며, <base> 요소는 반드시 <head> 요소 내에 위치해야 합니다.

또한, <base> 요소는 언제나 href 속성이나 target 속성 중 하나 또는 둘 모두를 명시해야만 합니다.

<head>
    <base href="/examples/images/">
</head>

<body>
    <img src="tcpschool_logo.png" alt="tcpschool" width="196" height="26">
</body>

<basefont> : 해당 문서의 모든 텍스트를 위한 기본 색상, 크기, 글꼴 집합(font - family) 등을 정의할 때 사용합니다.

HTML5에서는 <basefont> 태그를 더 이상 지원하지 않으며, 대신 CSS를 사용해야 합니다.

<head>
    <basefont family-font="D2Coding" color="green" size="12">
</head>

<body>
    <h1>제목입니다.</h1>
    <p>단락입니다.</p>
</body>

<bdi> : BDI는 Bi-Directional Isolation을 의미하며, 주위의 텍스트들과는 다른 방향으로 써지는 텍스트 영역을 정의할 때 사용함.

한글이나 영어와 같이 대부분의 언어는 왼쪽부터 시작해서 오른쪽 방향으로(left-to-right, LTR) 텍스트를 나열합니다. 하지만 아랍어(Arabic)와 같은 일부 언어에서는 오른쪽부터 시작하여 왼쪽 방향으로(right-to-left, RTL) 텍스트를 나열합니다.

브라우저는 이러한 텍스트의 방향성을 유니코드 양방향 알고리즘(Unicode Bidirectional Algorithm)이라는 알고리즘을 사용하여 처리하게 되는데, 바로 이때 특정 텍스트 영역에 <bdi> 요소를 사용하게 되면 양방향 알고리즘은 해당 텍스트의 방향성을 그 주위에 위치한 다른 텍스트들과는 별도로 처리하게 됩니다.

따라서 <bdi> 요소는 텍스트의 방향성을 미리 알 수 없는 사용자에 의해 생성되는 콘텐츠 등을 문서에 포함시킬 때 유용하게 사용됩니다.

<ul>
    <li><bdi>홍길동</bdi> - 1등</li>
    <li><bdi>John Smith</bdi> - 2등</li>
    <li><bdi>تیز سمی</bdi> - 3등</li>
    <li><span>تیز سمی</span> - 3등</li>
</ul>

<bdo> : 태그의 BDO는 Bi - Directional Override를 의미하며, 자식 요소의 텍스트 방향성(text directionality)를 정의할 때 사용됨.

다른 요소들과는 달리 <bdo> 요소의 dir 속성의 기본값은 부모 요소로부터 상속받지 않는다는 의미를 가지는 auto 값으로 자동 설정됩니다.

<p>이 단락은 왼쪽부터 오른쪽 방향으로 써질 것입니다.</p>
<p><bdo dir="rtl">이 단락은 오른쪽부터 왼쪽 방향으로 써질 것입니다.</bdo></p>

<big> : 글자 크기가 큰 텍스트를 정의할 때 사용함.

HTML5에서는 <big> 태그를 더 이상 지원하지 않으며, 대신 CSS를 사용해야 합니다.

<p>이 텍스트는 일반적인 크기의 텍스트입니다.</p>
<p><big>이 텍스트는 크기가 큰 텍스트입니다.</big></p>

<blockquote> : 다른 출처로부터 인용된 블록을 정의할 때 사용하며, 이렇게 인용된 블록을 브라우저는 들여쓰기를 사용하여 표현함.

짧은 길이의 인용구를 정의할 때는 블록으로 나뉘는 <blockquote> 요소보다는 <q> 요소를 사용하는 것이 바람직합니다.

<blockquote>
    HTML은 하이퍼텍스트 마크업 언어(HyperText Markup Language, 문화어: 초본문표식달기언어, 하이퍼본문표식달기언어)라는
의미의 웹 페이지를 위한 지배적인 마크업 언어다. HTML과 CSS 표준의 공동 책임자인 W3C는 명확하고 표상적인 마크업을 위하여
CSS의 사용을 권장한다.
</blockquote>

<body> : 해당 HTML 문서의 텍스트, 하이퍼링크, 이미지, 리스트 등과 같은 모든 콘텐츠를 포함하는 영역을 정으할 때 사용함.

HTML 문서에는 단 하나의 <body> 요소만이 존재할 수 있습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <title>HTML 문서의 제목입니다.</title>
</head>
<body>
    HTML 문서의 콘텐츠(contents) 영역입니다.
</body>
</html>

<br> : 텍스트 내의 줄바꿈(line-break)을 정의할 때 사용함.

HTML 소스 코드 내에서는 엔터(Enter)를 사용하여 줄바꿈을 실시하여도 브라우저 화면에 실제로 적용되지는 않습니다.

따라서 <br> 요소는 주소(address)나 시(poem) 등 줄바꿈이 중요한 텍스트에 유용하게 사용됩니다.

<br> 요소는 빈 태그(empty)로, 종료 태그가 존재하지 않습니다.

<p>
    HTML은 HyperText Markup Language의 약자입니다.
    웹 페이지는 HTML 문서라고도 불리며,
    HTML 태그들로 구성됩니다.
</p>

<p>
    HTML은 HyperText Markup Language의 약자입니다.<br>
    웹 페이지는 HTML 문서라고도 불리며,<br>
    HTML 태그들로 구성됩니다.
</p>

<button> : 클릭할 수 있는 버튼을 정의할 때 사용함.

<button> 요소 안에는 텍스트나 이미지와 같은 콘텐츠를 삽입할 수 있지만, <input> 요소를 사용한 버튼에는 이와 같은 콘텐츠를 삽입할 수 없습니다.

브라우저별로 <button> 요소에 대해 서로 다른 기본 타입을 사용할 수 있으므로, <button> 요소에는 언제나 type 속성값을 명시하는 것이 좋습니다.

<button type="button" onclick="alert('Hello World!')">클릭해 보세요!</button>

HTML 공부를 위한 정리 용도로 스크랩한 글임.

출처 - http://www.tcpschool.com/html-tags