참조
킹포이마
제목(Headings) 태그
Heading 태그는 제목을 나타낼 때 사용하고, h1~ h6까지 태그가 있다. h1이 가장 중요한 제목 의미하고 크기도 크다. 시맨틱 웹의 의미를 살려 제목 이외에는 사용하지 않는 것이 좋다!
<!DOCTYPE html>
<html>
<body>
<h1>heading 1</h1>
<h2>heading 2</h2>
<h3>heading 3</h3>
<h4>heading 4</h4>
<h5>heading 5</h5>
<h6>heading 6</h6>
</body>
</html>결과
글자 형태 태그
b
bold체를 지정한다. semantic 중요성의 의미는 없다.
<!DOCTYPE html>
<html>
<body>
<p>This text is normal.</p>
<b>This text is bold.</b>
<p style="font-weight: bold;">This text is bold.</p>
</body>
</html>결과
strong
b 태그와 동일하게 bold체를 지정한다. 하지만! semantic 중요성의 의미를 가진다. bold와 동일하지만 웹표준 준수를 위해서는 strong을 사용하는게 유리하다.
<!DOCTYPE html>
<html>
<body>
<p>This text is normal.</p>
<strong>This text is strong.</strong>
</body>
</html>결과
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.</i>
</body>
</html>결과
em
강조, 중요한 text를 지정한다. i tag와 동일하게 Italic체로 표현, 의미론적 중요성의 의미를 가진다.
<!DOCTYPE html>
<html>
<body>
<p>This text is normal.</p>
<em>This text is emphasized.</em>
</body>
</html>결과
small
small text 지정
<!DOCTYPE html>
<html>
<body>
<h2>HTML <small>Small</small> Formatting</h2>
</body>
</html>결과
mark
highlighted text를 지정
<!DOCTYPE html>
<html>
<body>
<h2>HTML <mark>Marked</mark> Formatting</h2>
</body>
</html>결과
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>결과
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>결과
sub/sup
sub 태그는 아래에 쓰인 text를 sup 태그는 위에쓰인 text를 지정한다.
<!DOCTYPE html>
<html>
<body>
<p>This is <sub>subscripted</sub> text.</p>
<p>This is <sup>superscripted</sup> text.</p>
</body>
</html>결과
이 태그는 지수를 표현할때도 많이 사용될거 같다.
🌧본문 태그
p
단락 (paragraphs)를 지정한다.
<!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>결과
br
br tag는 강제 개행(line break) 을 지정한다. br tag는 빈 요소 (empty element)로 종료 태그가 없다.
<!DOCTYPE html>
<html>
<body>
<p>This is<br>a para<br>graph with line breaks</p>
</body>
</html>결과 - 생략
HTML에서는 1개 이상의 연속된 공백을 삽입해도 1개의 공백으로 표시됨, 1개 이상의 연속된 줄바꿈도 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>결과
연속적 공백 삽입
<!DOCTYPE html>
<html>
<body>
<p>This is a para graph</p>
</body>
</html>결과값
pre
형식화된 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>결과값
를 사용하지 않고 <pre> 태그를 사용해서 여러개의 띄어쓰기와 개행을 수월하게 사용했다.
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>q
짧은 인용문을 지정한다. 브라우저는 인용부호를 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>결과값
blockquote
긴 인용문 블록을 지정한다. blocquote 요소를 들여쓰기한다.
<!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>결과
안으로 들어간걸 볼 수 있다.
🌧소감
semantic 웹에서 감지 하는것, 그리고 웹 표준대로 작성하는 걸 꼭 기억하고 자주 보도록 하자.!
