자신의 일은 스스로하자

[HTML] #3_2 HTML 글자 태그 [스마트인재개발원] 본문

HTML, CSS

[HTML] #3_2 HTML 글자 태그 [스마트인재개발원]

힐파르 사막 삼계탕 2021. 7. 5. 01:47
728x90

2021.06.27 - [HTML, CSS] - [HTML] #3_1 HTML 기본용어/ 구조/ 글자 태그 [스마트인재개발원]

 

[HTML] #3_1 HTML 기본용어/ 구조/ 글자 태그 [스마트인재개발원]

HTML기본 용어 / 구조 HTML은 태그, 요소, 속성으로 이루어져 있습니다. 태그는 HTML 페이지에서 객체를 만들 때 사용하는 것입니다. 사용할 수 있는 태그는 모두 미리 정해져 있습니다. 이 태그를 사

oneself.tistory.com

이전 글과 이어집니다. 

글자 형태 태그

: 글자 형태 태그를 사용해 웹 페이지의 글자 형태와 의미를 부여합니다.

 

<b>

-> 굵은 글자를 나타냅니다.

<i>

-> 기울어진 글자를 나타냅니다.

<small>

-> 작은 글자를 나타냅니다.

 

<body>
    Hyper Text <b>Markup</b> Language <br>
    Hyper Text <i>Markup</i> Language <br>
    Hyper Text <small>Markup</small> Language
</body>

위 코드를 실행하면

태그를 달아준 Markup만 변하는 것을 볼 수 있습니다.

<sub>

-> 아래에 달라붙는 글자 태그입니다.

<sup>

-> 위에 달라 붙는 글자 태그입니다.

<ins>

-> 밑줄 글자를 나타내는 태그입니다.

<del>

-> 가운데 줄이 그어지는 글자를 나타내는 태그입니다.

<body>
    Hyper Text <sub>Markup</sub> Language <br>
    Hyper Text <sup>Markup</sup> Language <br>
    Hyper Text <ins>Markup</ins> Language <br>
    Hyper Text <del>Markup</del> Language
</body>

위 코드를 실행하면

태그를 달아준 Markup만 변하는 것을 볼 수 있습니다.

 

 

루비 문자

: 루비 문자는 일본어에 자주 사용되는 후리가나 형식으로 한자 위에 표시되는 작은 글자입니다.

후리가나

 

<ruby>

-> 루비 문자 선언 태그입니다.

<rt>

-> 한자 위에 위치하는 작은 문자를 표시하는 태그

<rp>

-> ruby 태그를 지원할 경우 출력 x

 

기본 루비 태그

<body>
    <ruby>
        <span>落花流水</span>
        <rt>낙화유수</rt>
    </ruby>
</body>

이렇게 입력하면 루비 태그를 지원하는 웹 브라우저(크롬, 인터넷 익스플로러)에는 아래 사진처럼 출력됩니다,

하지만 지원하지 않는 웹 브라우저에서는 아래와 같이 출력됩니다.

지원하지 않는 웹 브라우저에서 루비 태그를 실행시키기위해 괄호를 rp태그안에 넣습니다.

<body>
    <ruby>
        <span>落花流水</span>
        <rp>(</rp>
        <rt>낙화유수</rt>
        <rp>)</rp>
    </ruby>
</body>

이렇게 실행하면 루비 태그를 지원하지않는 웹 브라우저에는 아래 사진처럼 출력됩니다. 

하지만 루비태그를 지원하는 웹 브라우저라면 rp태그는 무시되고 출력되지 않아 기존 루비 태그의 실행 형태로 출력됩니다. 

 

 

스마트인재개발원에서 진행된 수업입니다.

http://www.smhrd.or.kr

 

스마트인재개발원

4차산업혁명시대를 선도하는 빅데이터, 인공지능, 사물인터넷 전문 '0원' 취업연계교육기관

www.smhrd.or.kr

 

728x90
저작자표시 비영리 변경금지

'HTML, CSS' 카테고리의 다른 글

[HTML] #5 HTML 테이블 태그 [광주인공지능학원]  (0) 2021.07.12
[HTML] #4 HTML 목록 태그 [스마트인재개발원]  (0) 2021.07.05
[HTML] #3_1 HTML 기본용어/ 구조/ 글자 태그 [스마트인재개발원]  (0) 2021.06.27
[HTML] #2 Visual Studio Code / HTML 페이지 생성/ 페이지 작성/ 페이지 실행[스마트인재개발원]  (0) 2021.06.21
[HTML] #1 Visual Studio Code 다운로드/기본 설정[스마트인재개발원]  (0) 2021.06.01
'HTML, CSS' Related Articles more