본문 바로가기

IT개발 과정 [취성패 학원]/Frontend

[HTML] 01. 글자관련태그

<!DOCTYPE html> <!-- HTML문서 형식 선언 : HTML5형식이라는걸 알려주기 위한 태그 -->
<html lang="ko"> <!--
                    html문서의 시작과 끝을 표시해주는 태그
                    lang속성은 이 문서가 어느 나라 언어로 되어있는지 표시
                  -->
    <!--
        <head> 머리부를 나타냄 : 해당 이 문서의 각종 정보와 제목, 설명 및 스크립트, 스타일시트의 링크 선언하는 구문
                                <title>, <meta>, <link>, <style>, <script>
    -->
    <head>
        <meta charset="UTF-8">
        <meta name="generator" content="VScode"> <!--generator : 이 문서를 생성한 프로그램-->
        <meta name="author" content="sunyoung"> <!--author : 이 문서의 저자-->
        <meta name="keywords" content="글자,태그"> <!--keywords : 이 문서를 나타내는 키워드-->
        <meta name="description" content="이 문서는 글자관련된 태그들을 공부하는 페이지입니다.">
        
        <title>글자 관련 태그</title> <!--이 문서의 제목을 나타냄-->
    </head>

    <!--
        <body> 몸체부를 나타냄 : 화면에 출력해서 보여주는 모든 정보/내용을 작성하는 구문
    -->
    <body>

        안녕하세요 <br> <!--줄 바꿈 태그-->
        반갑습니다
        <br><br>
        안녕히가세요

        <!--h관련 태그 (h1 ~ h6)-->
        <h1>h1 태그입니다.</h1>
        <h2>h2 태그입니다.</h2>
        <h3>h3 태그입니다.</h3>
        <h4>h4 태그입니다.</h4>
        <h5>h5 태그입니다.</h5>
        <h6>h6 태그입니다.</h6>

        <h7>h7 태그있나?</h7> <!--존재하지 않는 태그 사용시 : 일반글꼴-->

        <hr>

        <h3>문단을 나누는 태그</h3>
        <p>
            문단 영역을 나누는 태그로는 p 태그와 pre태그가 있다.
            p태그는 줄바꿈입력을 별도의 태그로 지정해야된다. <br>
            그리고     공백은 한 개의 공백만을 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;표시하기 때문에 기호문구를 작성해야된다.

        </p>

        <pre>
            pre태그는 여러      공백 인식 가능하고
            줄 바꿈 등을 포함하여 입력한 내용 그대로를 표현하는 태그
        </pre>

        <hr>

        <h3>그 밖에 글자를 다루는 태그들</h3>
        
        일반 글꼴 (태그로 감싸지지 않은 텍스트)
        <br><br>

        <b>b : 글자를 굵게 표시하는 태그</b>
        <br><br>

        <strong>strong : 글자를 굵게 표시하는 태그</strong>
        <br><br>

        <em>em : 글자를 기울여서 표시하는 태그</em>
        <br><br>

        <i>i : 기울여서 표시하는 태그</i>
        <br><br>

        <mark>mark : 형광펜</mark> 효과를 주는 태그
        <br><br>

        <u>u : 글자에 밑줄이 그어지는 태그</u>
        <br><br>

        <s>s : 글자에 취소선을 넣어주는 태그</s>
        <br><br>

        <strike>strike : 글자에 취소선을 넣어주는 태그</strike>
        <br><br>

        <small>small : 글자를 작게 표현해주는 태그</small>
        <br><br>

        <big>big : 글자를 크게 표현해주는 태그</big>
        <br><br>

        <abbr title="Internet Of Things">IOT</abbr> 란 각종 사물에 센서와 통신기능을 내장해서 인터넷에 연결하는 기술이다.
        <br><br>

        기본 글자에 <sub><b>아래첨자</b></sub>를 나타내는 태그와
        <sup>윗첨자</sup>를 나타내는 태그이다.

        <hr>

        <h3>글자 관련 태그 응용</h3>
        <p>
            태그들은 해당 태그 내에서 중첩으로 사용 가능하다. 
            <b>굵은</b>글자를 사용할 수도 있고, <i>기울이거나, </i> <s>취소선</s>을 넣는 등 다양하게 사용할 수 있다.
            <br>
            <mark>형광펜</mark>을 넣어 글자를 강조할 수 있다.
        </p>

    </body>



</html>

결과물!

 

'IT개발 과정 [취성패 학원] > Frontend' 카테고리의 다른 글

[HTML]03. 표관련태그  (0) 2021.03.31
[HTML]02. 목록관련태그  (0) 2021.03.31