[Html] Font 속성/스타일 (굵기,기울기,밑줄,취소선)등등

HTML을 사용하다보면 글자의 속성을 바꿔주고 싶을때가 종종 있습니다. 하지만 이럴때마다 CSS를 사용해서 바꿔주는건 좀 귀찮죠. 이럴때 간편하게 사용할 수 있는 HTML  태그들을 소개합니다.

 

Font 속성/스타일(굵기,기울기,밑줄선,취소선) 설정 

속성  태그 비고 
글꼴 속성/스타일 <B> 글자 굵기
<STRONG> 글자 굵기
<I> 글자 기울기
<STRIKE> 취소선 긋기
<U> 밑줄긋기
 <SUP> 위 첨자 
 <SUB> 밑 첨자
 <TT>  타자체
 <BIG>  주변보다 크게
 <SMALL>  주변보다 작게

CSS없이 HTML에서 간단하게 구현할 수 있는 여러가지 태그들입니다. 

 

1. <b>태그와<strong>태그는 글자를 진하게 만들어주는 태그로 서로 차이점은 없습니다.

2. <i>태그는 글자에 기울임을 줘서 이탤릭자처럼 만들어줍니다. 

3. <strike>태그는 글자에 취소선을 그어주는 태그입니다.

4. <u>태그는 글자에 밑줄을 그어주는 역할을 합니다. 

5. <sup>와<sub>는 각각 그 글자를 위/아래의 작은 첨자로 만들어주는 기능을합니다. 주로 단어의 설명을 기술할때 가끔 사용합니다.

6. <tt>태그는 글자를 타자체로 만들어 줍니다. 

7. <big>태그와<small>태그는 글자를 주변의 폰트크기보다 크거나 작게 만들어주는 역할을 합니다.

 

예제

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body> 
    <h2>다양한 글자 관련 물리 태그들</h2>
    <p><B>B 태그는 글자를 굵게 표현합니다.</B></p>
    <p><STRONG>STRONG 태그는 글자를 굵게 표현합니다.</STRONG></p>
    <p><I>I 태그는 글자를 기울여서 표현합니다.</I></p>
    <p><STRIKE>STRIKE 태그는 글자에 취소선을 표시합니다.</STRIKE></p>
    <p><U>U태그는 글자에 밑줄을 표시합니다.</U></p>
    <p>Sup 태그는 글자를 <Sup>위 첨자</Sup>로 표시합니다.</p>
    <p>sub 태그는 글자를 <Sub>아래첨자</Sub>로 표시합니다.</p>
    <p><TT>TT 태그는 글자를 타자체로 표현합니다.</TT></p>
    <p>BIG 태그는 글자를 주변의 글자보다 <BIG>크게</BIG>표현합니다.
    <p>SMALL 태그는 글자를 주변의 글자보다 <SMALL>작게</SMALL>표현합니다.
</body>
</html>

font예제

 

[Html] 수평선 긋기 HR태그 사용법

[Html] 하이퍼링크 A태그 사용법 (색상변경,링크설명,창 형태)

[Html] 옆으로 움직이는 텍스트 만들기 (MarQuee)

[Html] 일정시간 후 다른페이지로 보내기 (메타태그 활용)

[Html] UI 태그, OL태그, DI태그, LI태그 사용법

 

댓글

Designed by JB FACTORY