웹/HTML

텍스트 관련 태그

  1.  제목 (Headings) 태그
    1. 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>​
  2. 글자 형태 (Text Formatting) 태그
    1. b
      1. 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>​
    2. strong
      1. b tag와 동일하게 bold 체를 사용한다. 하지만 의미론적(Semantic) 중요성의 의미를 갖는다.
        표현되는 외양은 b tag와 동일하지만 웹표준을 준수하고자 한다면 strong을 사용하는 것이 바람직하다.
    3. i
      1. 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>​
    4. em
      1. emphasized(강조) text를 지정한다. i tag와 동일하게 Italic체로 표현된다. 의미론적(Semantic) 중요성의 의미를 갖는다. 
        <!DOCTYPE html>
<html>
  <body>
    <p>This text is normal.</p>
    <em>This text is emphasized.</em>
  </body>
</html>​
    5. small
      1. small text를 지정한다. 
        <!DOCTYPE html>
<html>
  <body>
    <h2>HTML <small>Small</small> Formatting</h2>
  </body>
</html>​
    6. mark
      1. highlighted text를 지정한다. 
        <!DOCTYPE html>
<html>
  <body>
    <h2>HTML <mark>Marked</mark> Formatting</h2>
  </body>
</html>​
    7. del
      1. 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>​
    8. ins
      1. inserted (added) text를 지정한다.
    9. sub / sup 
      1. sub 태그는 subscripted text를 sup 태그는 superscripted text를 지정한다.
  3.  본문 태그
    1. p
      1. 단락 (Paragraphs)을 지정한다.
    2. br
      1. br tag는 강제개행 (line break)을 지정한다. br tag는 빈 요소(empty element)로 종료태그가 없다.
      2. HTML에서는 1개 이상의 연속된 공백(space)을 삽입하여도 1개의 공백으로 표시된다. 1개 이상의 연속된 줄바꿈(enter)도 1개의 공백으로 표시된다.
      3. 연속된 공백을 삽입하는 방법 
        <!DOCTYPE html>
<html>
  <body>
    <p>This is&nbsp; a para&nbsp; &nbsp; graph</p>
  </body>
</html>​
    3. pre
      1.  형식화된(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>​
    4. hr
      1. 수평줄을 삽입한다. 
        <!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>​
    5. q
      1. 짧은 인용문(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>​
    6. blockquote
      1. 긴 인용문 블록을 지정한다. 브라우저는 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>​

 

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

List and Table tags  (0) 2021.07.21
Hyperlink  (0) 2021.07.21
기본 태그  (0) 2021.07.20
시맨틱 웹(Semantic Web)  (0) 2021.07.20
1. HTML  (0) 2021.07.20

    티스토리툴바