HTML 문자 스타일 지정 태그 (물리적 스타일 지정 방법)

IT/HTML

HTML 문자 스타일 지정 태그 (물리적 스타일 지정 방법)

-_-* 2020. 12. 30. 22:40

안녕하세요. 이미보라입니다 :)

지난 포스트에서 HTML 글자의 색상, 글꼴, 그리고 크기를 변경할 수 있는 글자 태그에 대해서 살펴보았습니다.

오늘은 문자의 스타일을 지정할 수 있는 태그를 살펴보려고 합니다.

문자의 스타일을 지정하는 태그의 종류로는 크게 두 가지로 나뉩니다. 물리적 스타일 지정방법과 논리적 스타일 지정방법이 있습니다.

먼저, 물리적 스타일 지정방법이라고 함은 글자를 표현할 때 글자의 형태를 직접적으로 지정하여 출력함을 말합니다.

물리적 스타일 지정 태그는 아래와 같습니다.

... : 이탤릭체

시작태그와 종료 태그 사이에 위치한 글자를 이탤릭체 (Italic) 체로 지정합니다.
이탤릭체는 기울어진 글자체를 생각하시면 됩니다.

... : 볼드체

시작 태그와 종료 태그 사이에 위치한 글자를 볼드(Boldface) 체로 지정합니다.
이탤릭체는 진한 글자체를 생각하시면 됩니다.

... : 밑줄

시작 태그와 종료 태그 사이에 위치한 글자를 밑줄(Underline)로 지정합니다.

<S>... </S> : 삭제 문자

시작 태그와 종료 태그 사이에 위치한 글자를 삭제문자(Strike through)를 지정합니다.
예를 들면 ~~이미보라는 열정적이다.~~ 와 같습니다.

... : 위 첨자

시작 태그와 종료 태그 사이에 위치한 글자를 위 첨자 (Superscript)로 지정합니다.
예를 들어 수학 문제에서 엑스 제곱을 표현할 때 우리는 x2이라고 표현합니다.
이때 숫자 2를 윗 첨자로 표현할 수 있습니다.

... : 아래 첨자

시작 태그와 종료 태그 사이에 위치한 글자를 아래 첨자 (Subscript)로 지정합니다.
예를 들어 화학식에서 물의 원소 표현을 H20라고 표현합니다.
이때 숫자 2를 아랫 첨자로 표현할 수 있습니다.

실습 예제

<HTML>
<HEAD>
<TITLE> 물리적 스타일 지정 태그 실습 </TITLE>
</HEAD>
<BODY>
<I> 이탤릭체:기울어진 글자 스타일 </I> <BR><BR>
<B> 볼드체:진한 글자 스타일 </B> <BR><BR>
<U> 밑줄: 글자 아래 줄 스타일 </U> <BR><BR>
<S> 취소 문자체: 글자 중앙 줄 스타일 </S> <BR><BR>
위 첨자: X + Y<SUP> 2</SUP> = 8 <BR><BR>
아래 첨자 : O<SUB> 2</SUB>는 산소입니다. <BR> <BR>
</BODY>
</HTML>

위의 실습 예제 코드를 실행하면 위의 그림과 같이 실행 결과를 얻을 수 있습니다. 각각의 스타일은 위의 이미지를 참고하면 이해하기 쉬울 것 같습니다.

참고로, 제가 작성하고 있는 티스토리 에디터에서는 위 첨자와 아래 첨자의 기능을 제공하지 않기 때문에 편집 모드를 기본 모드에서 HTML모드로 변경하여 위의 코드를 입력하였습니다 :) 이미지를 클릭하여 확대하면 확인 가능합니다.

이와 같이 HTML에 대해서 알아두면 블로그를 운영하는 데 조금이나마 도움이 될 것 같아요.

다음 포스트에서는 HTML의 논리적 스타일 지정 태그들을 알아보도록 하겠습니다. 감사합니다.

티스토리