ABOUT ME

-

  • 2. HTML_Text
    Front-end/HTML5 2020. 6. 6. 15:49
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <b>This text is bold.</b><br>
    <!--bold 체를 지정한다. 제목 태그와 같이 의미론적(Semantic) 중요성의 의미는 없다.?-->
    
    
    <strong>This text is strong.</strong><br>
    <!--b tag 와 동일하게 bold 체를 지정한다. 하지만 의미론적(Semantic) 중요성의 의미를 갖는다.-->
    <!--표현되는 외양은 b tag 와 동일하지만 웹 표준을 준수하고자 한다면 strong 를 사용하는 것이 바람직하다.-->
    
    
    <i>This text is italic.</i>
    <p style="font-style: italic;">This text is italic.</p>
    <!--Italic 체를 지정한다. 의미론적(Semantic) 중요성의 의미는 없다.-->
    
    
    <em>This text is emphasized.</em>
    <!--emphasized(강조, 중요한) text 를 지정한다. -->
    <!--i tag 와 동일하게 Italic 체로 표현된다. 의미론적(Semantic) 중요성의 의미를 갖는다.-->
    
    
    <h2>HTML <small>Small</small> Formatting</h2>
    <!--small text 를 지정한다.-->
    
    
    <h2>HTML <mark>Marked</mark> Formatting</h2>
    <!--highlighted text 를 지정한다.-->
    
    
    <p>The del element represents deleted (removed) text.</p>
    <p>My favorite color is <del>blue</del> red.</p>
    <!--deleted (removed) text 를 지정한다.-->
    
    
    <p>The ins element represent inserted (added) text.</p>
    <p>My favorite <ins>color</ins> is red.</p>
    <!--inserted (added) text 를 지정한다.-->
    
    
    <p>This is <sub>sub scripted</sub> text.</p>
    <p>This is <sup>super scripted</sup> text.</p>
    <!--sub 태그는 sub scripted(아래에 쓰인) text 를
    sup 태그는 super scripted(위에 쓰인) text 를 지정한다.-->
    
    
    <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>
    <!--단락 (Paragraphs)을 지정한다.-->
    
    
    <p>This is<br>a para<br>graph with line breaks</p>
    <!--br tag 는 (강제)개행 (line break)을 지정한다. br tag 는 빈 요소(empty element)로 종료태그 없다.-->
    
    
    <p>This is&nbsp; a para&nbsp; &nbsp; graph</p>
    <!--연속적 공백을 삽입하는 방법-->
    
    
    <pre>
    var myArray = [];
    console.log(myArray.length); // 0
    
    myArray[1000] = true;  // [ , , ... , , true ]
    
    console.log(myArray.length); // 1001
    console.log(myArray[0]);     // undefined
    </pre>
    <!--형식화된(pre formatted) text 를 지정한다. pre 태그 내의 content 는 작성된 그대로 브라우저에 표시된다.-->
    <!--HTML 은 1개 이상의 연속된 공백(space)과 1개 이상의 연속된 줄바꿈(enter)을 1개의 공백으로 표시한다.-->
    
    
    <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>
    <!--수평줄을 삽입한다.-->
    
    
    <p>WWF's goal is to: <q>Build a future where people live in harmony with nature.</q></p>
    <!--짧은 인용문(quotation)을 지정한다. 브라우저는 인용부호(큰따옴표/quotation marks)로 q 요소를 감싼다.-->
    
    
    <p>Browsers usually indent blockquote elements.</p>
    <blockquote>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
            ut labore et dolore magna aliqua.</p>
    </blockquote>
    <!--긴 인용문 블록을 지정한다. 브라우저는 block quote 요소를 들여쓰기한다. -->
    <!--css 를 이용하여 다양한 style 을 적용할 수 있다.-->
    </body>
    </html>

    'Front-end > HTML5' 카테고리의 다른 글

    6. HTML_multimedia  (0) 2020.06.06
    5. HTML_Table  (0) 2020.06.06
    4. HTML_list  (0) 2020.06.06
    3. HTML_link_tag  (0) 2020.06.06
    1. HTML_Basic  (0) 2020.06.06

    댓글

Designed by Tistory.