HTML태그

텍스트 관련 태그 2022.07.05
웹페이지 구성에 관한 태그 2022.06.27

텍스트 관련 태그

2022. 7. 5. 19:51

■관점

텍스트 관련 태그로 텍스트의 스타일, 의미론적 중요성을 부여할 수 있다.
같은 스타일의 태그라도, 의미론적 중요성을 부여할 수도, 부여하지 않을 수도 있다.

■제목(Headings) 태그

제목을 나타낼 때 사용한다.
h1에서 h6까지 있으며, h1이 가장 중요하며 글씨도 가장 크다.
시맨틱 웹의 의미를 살려, 제목의 용도 이외에는 사용하지 않는 편이 좋다.
검색엔진은 제목 태그를 중요한 의미로 받아들일 가능성이 크다.

<!DOCTYPE html>
<html>
    <body>
    	<h1>heading 1</h1>
        <h2>heading 1</h2>
        <h3>heading 1</h3>
        <h4>heading 1</h4>
        <h5>heading 1</h5>
        <h6>heading 1</h6>
    </body>
</html>

Result

heading 1

■글자 형태(Text Formatting) 태그

◆b 태그

bold체를 지정한다.
의미론적(Semantic) 중요성의 의미는 없다.

<!DOCTYPE html>
<html>
	<body>
		<p>This text is normal.</p>
		<p>This text is bold.</p>
		<p style="font-weight: bold;">This text is bold.</p>
	</body>
</html>

Result

This text is normal.

This text is bold.

◆strong 태그

b 태그와 동일하게 bold체를 지정한다.
b 태그와는 달리, 의미론적(Semantic) 중요성을 갖는다.
표현되는 외양은 b 태그와 동일하지만, 웹표준을 준수하고자 한다면 strong을 사용하는 것이 바람직하다.

<!DOCTYPE html>
<html>
	<body>
		<p>This text is normal.</p>
		<strong>This text is strong.</strong>
	</body>
</html>

Result

This text is normal.

This text is strong.

◆i 태그

italic체를 지정한다.
의미론적(Semantic) 중요성의 의미는 없다.

<!DOCTYPE html>
<html>
	<body>
		<p>This text is normal.</p>
		<i>This text is italic.</i>
		<p style="font-style: italic;">This text is italic.</p>
	</body>
</html>

Result

This text is normal.

This text is italic.

This text is italic.

◆em 태그

emphasized text(강조된 텍스트)를 지정한다.
i 태그와 동일하게 italic체로 표현된다.
i 태그와 달리, 의미론적(Semantic) 중요성을 갖는다.

<!DOCTYPE html>
<html>
	<body>
		<p>This text is normal.</p>
		<em>This text is emphasized.</em>
	</body>
</html>

Result

This text is normal.

This text is emphasized.

◆small 태그

small text를 지정한다.
주로 덧붙이는 글이나, 저작권과 법률 표기 등의 작은 텍스트의 표현에 사용된다.

<!DOCTYPE html>
<html>
	<body>
		<h2>HTML <small>Small</small> Formatting</h2>
	</body>
</html>

Result

HTML Small Formatting

◆mark 태그

highlighted text를 지정한다.
태그로 감싼 텍스트를 형광펜으로 그은 것처럼 표현한다.

<!DOCTYPE html>
<html>
	<body>
		<h2>HTML <mark>Marked</mark> Formatting</h2>
	</body>
</html>

Result

HTML Marked Formatting

◆del 태그

deleted (removed) text를 지정한다.
태그로 감싼 텍스트의 가운데를 관통하는 취소선을 그은 것처럼 표현한다.

<!DOCTYPE html>
<html>
	<body>
		<p>The del element represents deleted (removed) text.</p>
		<p>My favorite color is <del>blue</del> red.</p>
	</body>
</html>

Result

The del element represents deleted (removed) text.

My favorite color is ~~blue~~ red.

◆ins 태그

inserted (added) text를 지정한다.
태그로 감싼 텍스트에 밑줄을 그은 것처럼 표현한다.

<!DOCTYPE html>
<html>
	<body>
		<p>The ins element represent inserted (added) text.</p>
		<p>My favorite <ins>color</ins> is red.</p>
	</body>
</html>

Result

The ins element represent inserted (added) text.

My favorite color is red.

◆sub / sup 태그

sub 태그는 subscripted(아래에 쓰인) text를, sup 태그는 superscripted(위에 쓰인) text를 지정한다.
sub 태그는 태그로 감싼 텍스트를 아래 첨자로서 표현한다.
sup 태그는 태그로 감싼 텍스트를 위 첨자로서 표현한다.

<!DOCTYPE html>
<html>
	<body>
		<p>This is <sub>subscripted</sub> text.</p>
		<p>This is <sup>superscripted</sup> text.</p>
	</body>
</html>

Result

This is _subscripted text.

This is ^{superscripted} text.

■본문 태그

◆p 태그

단락 (Paragraphs)을 지정한다.
- 단락이란?
  - 문장이 모여서 한 가지 통일된 주제를 나타내는, 글의 작은 덩어리.
태그로 감싼 텍스트의 위아래를 줄바꿈 해주고, 약간의 여백(1 em)을 추가해준다.

<!DOCTYPE html>
<html>
	<body>
		<h1>This is a heading.</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
		<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	</body>
</html>

Result

This is a heading.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

em이란?
- CSS의 상대 단위의 하나이다.
- 상대(Relative) 단위란?
  - 고정되지 않고, 어떤 기준에 따라서 유동적으로 바뀔 수 있는 길이를 나타내는 단위이다.
  - 대표적으로 em, rem, %, vw, vh 등이 있다.
  - 절대 단위 cm를 보면 1cm는 항상 1cm이고, 1px는 항상 1px(=0.02645833cm)이다.
  - 1em이나 1rem은 항상 고정된 길이가 아닌, 브라우저가 어떤 기준에 따라 계산하여 px로 변환해준다.
  - 브라우저의 기준을 파악하는 것이 em과 rem을 정확히 이해하는 핵심이 된다.
- em과 rem의 공통점
  - CSS의 font-size 속성 값에 비례해서, 길이가 결정된다.
  - font-size: 16px인 경우
    - 0.5em = 16px * 0.5 = 8px
    - 1em = 16px * 1 = 16px
    - 2em = 16px * 2 = 32px
    - 3em = 16px * 3 = 48px
- em과 rem의 차이점
  - 정확히 어디에 있는 font-size 속성 값인지에 따라 차이가 발생한다.
  - em의 경우, 해당 단위가 사용되고 있는 요소의 font-size 속성 값이 기준이 된다.
    - 단, 해당 요소의 font-size가 없는 경우, 부모 요소의 font-size를 상속받아 계산한다.
    - 이로 인해 html과 해당 요소 사이에 부모 요소가 층층이 끼어 있으면, 어떤 값으로 계산될 지 예측하기 힘들다.
    - 많은 CSS 가이드들이 em을 사용해야만 하는 타당한 이유가 없으면, rem을 우선적으로 쓰도록 권고하고 있다.
  - rem의 r은 root 즉, 최상위 요소(html)의 font-size 속성 값이 기준이 된다.

html {
    font-size: 16px;
}
div {
    font-size: 20px;
    width: 10em; /* 200px */
    height: 10rem; /* 160px */
}

◆br 태그

br은 break의 약자이다.
br 태그는 (강제)개행 (line break)을 지정한다.
br 태그는 빈 요소(empty element)로 종료 태그가 없다.

<!DOCTYPE html>
<html>
	<body>
		<p>This is<br>a para<br>graph with line breaks</p>
	</body>
</html>

Result

This is
a para
graph with line breaks

HTML에서는 1개 이상의 연속된 공백(space)이나 연속된 줄바꿈(enter)을 삽입하여도 1개의 공백으로 표시된다.

<!DOCTYPE html>
<html>
	<body>
		<p>HTML은 1개 이상의 연속된 공백(space)과 1개 이상의 연속된 줄바꿈(enter)을 1개의 공백으로 표시한다.</p>
		<p>
			var myArray = [];
			console.log(myArray.length);	// 0
            
			myArray[1000] = true;			// [ , , ... , , true ]
            
			console.log(myArray.length);	// 1001
			console.log(myArray[0]);		// undefined
		</p>
	</body>
</html>

Result

HTML은 1개 이상의 연속된 공백(space)과 1개 이상의 연속된 줄바꿈(enter)을 1개의 공백으로 표시한다.

var myArray = []; console.log(myArray.length); // 0 myArray[1000] = true; // [ , , ... , , true ] console.log(myArray.length); // 1001 console.log(myArray[0]); // undefined

연속된 공백을 삽입하는 방법은 다음과 같다.
nbsp는 줄 바꿈 없는 공백(non-breaking space)을 의미한다.

<!DOCTYPE html>
<html>
	<body>
		<p>This is&nbsp; a para&nbsp; &nbsp; graph</p>
	</body>
</html>

Result

This is a para graph

◆pre 태그

형식화된(preformatted) text를 지정한다.
pre 태그 내의 content는 작성된 그대로 브라우저에 표시된다.

<!DOCTYPE html>
<html>
	<body>
		<p>HTML은 1개 이상의 연속된 공백(space)과 1개 이상의 연속된 줄바꿈(enter)을 1개의 공백으로 표시한다.</p>
		<pre>
			var myArray = [];
			console.log(myArray.length);	// 0
			
			myArray[1000] = true;	// [ , , ... , , true]
			
			console.log(myArray.length);	// 1001
			console.log(myArray[0]);		// undefined
		</pre>
	</body>
</html>

Result

HTML은 1개 이상의 연속된 공백(space)과 1개 이상의 연속된 줄바꿈(enter)을 1개의 공백으로 표시한다.

			var myArray = [];
			console.log(myArray.length);	// 0
			
			myArray[1000] = true;	// [ , , ... , , true]
			
			console.log(myArray.length);	// 1001
			console.log(myArray[0]);		// undefined

◆hr 태그

수평줄을 삽입한다.
빈 태그이다.

<!DOCTYPE html>
<html>
	<body>
		<h1>HTML</h1>
		<p>HTML is a language for describing web pages.</p>
		<hr>
		<h1>CSS</h1>
		<p>CSS defines how to display HTML elements.</p>
	</body>
</html>

Result

HTML

HTML is a language for describing web pages.

CSS

CSS defines how to display HTML elements.

◆q 태그

짧은 인용문(quotation)을 지정한다.
브라우저는 인용부호(큰따옴표/quotation marks)로 q 요소를 감싼다.

<!DOCTYPE html>
<html>
	<body>
		<p>Browsers usually insert quotation marks around the q element.</p>
		<p>WWF's goal is to: <q>Build a future where people live in harmony with nature.</q></p>
	</body>
</html>

Result

Browsers usually insert quotation marks around the q element.

WWF's goal is to: Build a future where people live in harmony with nature.

◆blockquote 태그

긴 인용문 블록을 지정한다.
브라우저는 blockquote 요소를 들여쓰기 한다.
CSS를 이용한 다양한 style을 적용할 수 있다.

<!DOCTYPE html>
<html>
	<body>
		<p>Browsers usually indent blockquote elements.</p>
		<blockquote>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
		</blockquote>
	</body>
</html>

Result

Browsers usually indent blockquote elements.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

출처: https://poiemaweb.com/html5-tag-text

저작자표시

'■　웹 개발 > HTML' 카테고리의 다른 글

웹페이지 구성에 관한 태그 (0)	2022.06.27
시맨틱 웹(Semantic Web)이란? (0)	2022.06.20
HTML의 기본 (0)	2022.06.17
HTML이란? (0)	2022.06.17
웹 컴포넌트란? (0)	2020.11.10

웹페이지 구성에 관한 태그

2022. 6. 27. 22:52

■문서 형식 정의

문서 형식 정의(Document Type Definition, DTD) 태그
- 출력할 웹 페이지의 형식을 브라우저에게 전달한다.
- 문서의 최상위에 위치해야 한다.
- 대소문자를 구별하지 않는다.
문서별 기술 양식
- HTML5

<!DOCTYPE html>

- HTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

- XHTML 1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

■html 태그

모든 HTML 요소의 부모 요소이다.
웹페이지에 단 하나만 존재한다.
모든 자식 요소는 html 요소의 자식 요소이며, html 요소 내부에 기술해야 한다.
단, 문서 형식 정의 태그(DTD Tag)는 예외이다.

<!DOCTYPE HTML>
<!-- html은 글로벌 속성을 지원한다. -->
<html lang="ko">
    <head>
    	<meta charset="utf-8">
        <title>문서 제목</title>
    </head>
    <body>
    	화면에 표시할 모든 콘텐츠는 이곳에 기술한다.
    </body>
</html>

■head 태그

메타데이터를 포함하기 위한 요소이다.
메타데이터는 HTML 문서의 타이틀, 스타일, 링크, 스크립트에 대한 데이터이다.
메타데이터는 화면에 표시되지 않는다.
웹페이지에 단 하나만 존재한다.
메타데이터 이외의 화면에 표시되는 일체의 요소를 포함시킬 수 없다.

◆head 태그 - title 태그

문서의 제목을 정의한다.
정의된 제목은 브라우저의 탭에 표시된다.

<!DOCTYPE html>
<html>
    <head>
    	<meta charset="utf-8">
        <title>문서 제목</title>
    </head>
    <body>
    	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </body>
</html>

문서 제목 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

◆head 태그 - style 태그

HTML 문서를 위한 스타일 정보를 정의한다.

<!DOCTYPE html>
<html>
    <head>
    	<meta charset="utf-8">
        <title>문서 제목</title>
        <style>
        	body {
            	background-color: yellow;
                color: blue;
            }
        </style>
    </head>
    <body>
    	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </body>
</html>

문서 제목

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

◆head 태그 - link 태그

외부 리소스와의 연계 정보를 정의한다.
주로 HTML과 외부 CSS 파일, 스크립트 파일과의 연계에 사용된다.

<!DOCTYPE html>
<html>
    <head>
    	<meta charset="utf-8">
        <title>문서 제목</title>
        <link rel="stylesheet" href="style.css">
        <link rel="script" href="script.js">
    </head>
    <body>
    	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </body>
</html>

◆head 태그 - script 태그

클라이언트 측의 자바스크립트 코드를 정의한다.

<!DOCTYPE html>
<html>
    <head>
    	<meta charset="utf-8">
        <script>
        	document.addEventListener('click', function() {
            	alert('Clicked!');
            });
        </script
    </head>
    <body>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </body>
</html>

src 속성을 사용하면, 외부 자바스크립트 파일을 로드할 수 있다.

<!DOCTYPE html>
<html>
    <head>
    	<meta charset="utf-8">
        <script src="main.js"></script>
    </head>
    <body>
    	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </body>
</html>

◆head 태그 - meta 태그

설명, 키워드들, 저자, 기타 등등의 메타데이터 정의에 사용된다.
메타데이터는 브라우저, 검색엔진 등에 의해 사용된다.
charset 속성은 브라우저가 사용할 문자셋을 정의한다.
검색엔진 최적화를 위해, 검색엔진이 사용할 키워드들을 정의한다.

<meta name="keywords" content="HTML, CSS, XML. XHTML, JavaScript">

웹페이지의 설명을 정의한다.

<meta name="description" content="Web tutorials on HTML and CSS">

웹페이지의 저자를 명기한다.

<meta name="author" content="John Doe">

웹페이지를 30초마다 새로고침 한다.

<meta http-equiv="refresh" content="30">

■body 태그

HTML 문서의 내용을 나타낸다.
웹페이지에 단 하나만 존재한다.
메타데이터를 제외한 웹페이지를 구성하는 대부분의 요소가 기술된다.

출처: https://poiemaweb.com/html5-tag-basic

HTML5 Tag - Basic | PoiemaWeb

문서 형식 정의(Document Type Definition, DTD) 태그는 출력할 웹 페이지의 형식을 브라우저에게 전달한다. 문서의 최상위에 위치해야 하며 대소문자를 구별하지 않는다. 문서별 기술 양식은 아래와 같

poiemaweb.com

저작자표시

'■　웹 개발 > HTML' 카테고리의 다른 글

텍스트 관련 태그 (0)	2022.07.05
시맨틱 웹(Semantic Web)이란? (0)	2022.06.20
HTML의 기본 (0)	2022.06.17
HTML이란? (0)	2022.06.17
웹 컴포넌트란? (0)	2020.11.10

PREV 1 NEXT

Wanna be a thinker

HTML태그

텍스트 관련 태그

■관점

■제목(Headings) 태그

heading 1

heading 1

heading 1

heading 1

heading 1

heading 1

■글자 형태(Text Formatting) 태그

◆b 태그

◆strong 태그

◆i 태그

◆em 태그

◆small 태그

HTML Small Formatting

◆mark 태그

HTML Marked Formatting

◆del 태그

◆ins 태그

◆sub / sup 태그

■본문 태그

◆p 태그

This is a heading.

◆br 태그

◆pre 태그

◆hr 태그

HTML

CSS

◆q 태그

◆blockquote 태그

'■ 웹 개발 > HTML' 카테고리의 다른 글

웹페이지 구성에 관한 태그

■문서 형식 정의

■html 태그

■head 태그

◆head 태그 - title 태그

◆head 태그 - style 태그

◆head 태그 - link 태그

◆head 태그 - script 태그

◆head 태그 - meta 태그

■body 태그

'■ 웹 개발 > HTML' 카테고리의 다른 글

+ Recent posts

티스토리툴바

'■　웹 개발 > HTML' 카테고리의 다른 글

'■　웹 개발 > HTML' 카테고리의 다른 글