고래씌

[HTML] 3. 글자관련태그 본문

Front-End/HTML

[HTML] 3. 글자관련태그

고래씌 2023. 11. 1. 13:03

1. 글자 관련 태그

1) body 태그 <body></body>

: 몸통부를 나타냄. 화면에서 출력해서 보여줄 모든 정보 / 내용들을 작성하는 구분

 

① br태그  => 줄바꿈 태그

공백이 몇개가 있든 하나의 공백으로 인식하기 때문에 줄바꿈을 하고 싶다면 br태그를 이용해야함!

<body>
    <!-- <body> 몸통부를 나타냄. : 화면에 출력해서 보여줄 모든 정보 / 내용들을 작성하는 구분 -->
    
    안녕하세요<br><!-- 줄바꿈 태그 --> <!-- 공백이 몇개가 있든 하나의 공백으로 인식함!! 줄바꿈을 하고 싶다면 <br>태그 이용-->
    반갑습니다.

    <!-- h관련 태그 <h1 ~ h6> -->
    <h1>h1 태그입니다.</h1>

    
</body>

<br>태그를 사용하지 않았을 때
<br>태그를 사용했을때

 

 

② h 관련 태그 <h1 ~ h6>

- h숫자에 따라서 글자 크기를 정해줌. 뒤에 공백을 알아서 추가해준다.

<body>
    <!-- <body> 몸통부를 나타냄. : 화면에 출력해서 보여줄 모든 정보 / 내용들을 작성하는 구분 -->
    
    안녕하세요<br><!-- 줄바꿈 태그 --> <!-- 공백이 몇개가 있든 하나의 공백으로 인식함!! 줄바꿈을 하고 싶다면 <br>태그 이용-->
    반갑습니다.

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

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

    
</body>

${h$ 태그입니다.} *6  => 하면 아래와 같이 자동완성됨

 

 

2) 문단을 나누는 태그

① <p></p> 태그

문단 영역을 나누는 태그는 p태그와 pre태그가 있다.
단, p태그는 줄바꿈 입력을 별도의 태그로 지정해야한다.
그리고 공백은 한개의 공백만을 표시하기 때문에 공백을 여러개 작성하고자 하는 경우 기호문구(& nbsp;로 표시해야한다.)
 
 
 

② <pre></pre> 태그

 pre태그는 여러 공백이 인식 가능하고 줄 바꿈등을 포함하여 입력한 내용 그대로를 표현한다.
 
    <h3>문단을 나누는 태그</h3>
    <p>
        문단 영역을 나누는 태그는 p태그와 pre태그가 있다.
        단, p태그는 줄바꿈 입력을 별도의 태그로 지정해야한다.
        그리고 공백은 한개의 공백만을 표시하기 때문에 공백을 여러개 작성하고자
        하는 경우 기호문구(& nbsp;로 표시해야한다.)
    </p>
    <pre>
        pre태그는 여러              공백이 인식 가능하고
        줄 바꿈등을 포함하여 입력한 내용 그대로를 표현하다.
    </pre>

 

 

3) 그 밖에 글자를 다루는 태그들

    <hr>

    <h3>그 밖에 글자를 다루는 태그들</h3>

    <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>란
    각종 사물에 센서와 통신기능을 내장해 인터네셍 연결하는 기술이다.
    <!-- 
        abbr : 단어의 축약형이나 머리글자로만 된 단어를 정의할 때 사용하는 태그.
        마우스 커서를 가져다 대면 title 속성값이 보여짐
    -->
    <br><br>

    sub: 기본글자에<sub> 아래첨자</sub>를 나타내는 태그
    <br><br>

    sup: <sup>윗첨자</sup>를 나타내는 태그
    <br></br>

 

 

4) 실습문제

    <h3ss>글자 관련 태그 응용1</h3ss>

    <p>태그들은 해당 태그 내에서 중첩으로 사용 가능하다. <b>굵은</b>글자를 사용할 수도 있고,<br>
    <em>기울이거나</em>, <s>취소선</s>을 넣는 등 다양하게 사용할 수 있다.<br>
    <mark>형광펜</mark>을 넣어 글자를 강조할 수 있다.
    </p>
저작자표시 비영리 변경금지

'Front-End > HTML' 카테고리의 다른 글

[HTML] 5-2. 멀티미디어 관련 태그  (1) 2023.11.01
[HTML] 5-1. 표관련태그  (0) 2023.11.01
[HTML] 4-1. 목록관련태그  (1) 2023.11.01
[HTML] 1. HTML5 ~ 2. 헤더(HEAD)  (1) 2023.10.30
[HTML] 0. 설치 환경 구성하기  (0) 2023.10.30
'Front-End/HTML' Related Articles more