mbg1346 - 폰트(글자)의 스타일, 크기, 굵기, 색상, 글꼴, 줄간격, 캡션 등을 지정하는 방법

폰트에 속성을 주는 방법은 태그와 다른 태그 안의 스타일(style) 속성 두 가지를 쓸 수 있겠다.

이전에는 폰트를 적용할 때 ~~ 와 같이 하였는데, HTML5에서는 태그를 지원하지 않는다. 물론, HTML5가 일반화되고 브라우저 버전이 올라가도 이전에 만들어진 HTML 문서의 태그는 이상없이 작동을 할 것이므로 걱정할 일은 아니다.
단지, 앞으로 만드는 HTML문서는 가급적이면 스타일(style) 속성으로 주는 것이 낫지 않을까 싶다.

 ~ 태그로 속성주기
[ 예 ]

이 글자는 font 태그로 속성을 주었다

[실제 적용한 모습]

이 글자는 font 태그로 속성을 주었다

위에서 태그를 설정한 내용과 실제 적용된 모습이 다르다.
이렇게 된 이유는, 구글블로그는 페이지 첫머리에 <!DOCTYPE HTML>로 선언하여 HTML5가 적용되기 때문이고, 위의 예에서 준 태그를 강제로 스타일 속성으로 바꾸어 적용하기 때문이다.

이 글자는 태그로 속성을 주었다

스타일(style)로 속성주기

스타일(style)은 <div> 등과 같이 여러 태그에서 쓸 수 있다. (각 태그에 대한 자세한 설명은 링크페이지를 참조)

[예]

이 글자는 Span에 스타일(style)로 속성을 주었다

[실제 적용한 모습]

이 글자는 Span에 스타일(style)로 속성을 주었다

스타일(style)로 폰트 속성을 줄 때, 한꺼번에 줄 수도 있고, 항목을 각각 지정하여 줄 수도 있다.

스타일에서 폰트 속성을 한번에 주기

[한꺼번에 폰트 속성을 주는 예]

여기는 폰트 속성을 한꺼번에 주었다

[실제 적용한 모습]

여기는 폰트 속성을 한꺼번에 주었다

ㅇ font: 다음의 각 항목 순서는
폰트스타일(font-style) 폰트웨이트(font-weight) 폰트사이즈(font-size)/줄간격(font-height) 글꼴(font-family) 이다.

ㅇ 폰트스타일과 폰트웨이트는 순서가 바뀌어도 이상없이 잘 보여진다.
ㅇ 색상은 스타일 안에 별도로 지정하여 속성을 주어야 한다.

[한꺼번에 폰트 속성을 주고 색상을 지정한 예]

여기는 폰트 속성을 한꺼번에 주고 색상을 녹색으로 주었다

[실제 적용한 모습]

여기는 폰트 속성을 한꺼번에 주고 색상을 녹색으로 주었다

[색상을 지정하는 방법]
파랑(blue), 빨강(red) 등과 같이 HTML에서 지정할 수 있는 이름은 기본색상 17개를 포함하여 모두 140가지가 있다.
어떤 브라우저에서든 문제없이 정확하게 표현할 수 있는 웹안전색상(Web safe colors) 또는 웹표준색상(Web standard color)은 216가지가 있다.

예) 녹색을 윗쪽은 이름인 'green'으로 지정하고, 아래쪽은 Hex코드인 #008000 으로 지정함

<div style="color: green;">
이곳은 DIV 영역이며, 글자색을 green(녹색)으로 지정함
</div>

<div style="color: #008000;">
이곳은 DIV영역이며, 글자색을 Hex코드 #008800(녹색)으로 지정함
</div>

[HTML에서 이름으로 색상을 지정할 수 있는 기본 색상 17가지]

aqua	#00FFFF	olive	#808000
black	#000000	orange	#FFA500
blue	#0000FF	purple	#800080
fuchsia	#FF00FF	red	#FF0000
gray	#808080	silver	#C0C0C0
green	#008000	teal	#008080
lime	#00FF00	white	#FFFFFF
maroon	#800000	yellow	#FFFF00
navy	#000080

스타일에서 폰트 속성을 항목별로 각각 주기
스타일에 폰트에 속성을 주고자 하는 항목만 넣고 속성을 주면 되고, 항목의 순서는 상관이 없다.

[폰트 속성을 주는 항목들]

색   상 color: 색상이름 또는 색상코드 ;
굵   기 font-weight: bold ;
기울임 font-style: italic;
크   기 font-size: 숫자px, 숫자% 또는 숫자em ;
글   꼴 font-family: 굴림, 돋움, 궁서, Arial, 등등 ;
줄높이 line-height: 숫자px, 숫자% 또는 숫자em ;

[예: Style에서 폰트 속성을 준 코드 모습]

여기는 스타일에서 폰트 속성을 각각 주었다

[실제 적용한 모습]

여기는 스타일에서 폰트 속성을 각각 주었다

폰트의 각 항목별 상세 설명
ㅇ 각 항목의 수자는 픽셀(px), 퍼센트(%), 이엠(em), 포인트(pt) 등을 쓸 수 있다. (단위에 관한 자세한 설명은 링크페이지 참조)
ㅇ 아래의 실제 적용 모습은 페이지의 설정에 따라 달라진다. 아래에서 보여지는 것은 현재 페이지의 설정을 기준으로 보여지는 것이다.

[글자크기: 폰트 사이즈 font-size]

xx-large [더블 엑스 라쥐] 아주 크게
x-large [엑스 라쥐] 조금 크게
large [라쥐] 크게
medium [미디엄] 중간 - 기본 글자 크기
small [스몰] 작게
x-small [엑스 스몰] 조금 작게
xx-small [더블 엑스 스몰] 아주 작게

smaller [스몰러] 더 작게 - 상위 요소(parent element)의 폰트 크기에 비해 더 작게
larger [라쥐어] 더 크게 - 상위 요소(parent element)의 폰트 크기에 비해 더 크게

initial [이니셜] 초기(기본, default) 폰트 크기
inherit [인헤리트] 상위요소(parent element)의 폰트 크기

[실제 적용한 모습]

이 글자의 폰트크기는 xx-large [더블 엑스 라쥐]이다
이 글자의 폰트크기는 x-large [엑스 라쥐]이다
이 글자의 폰트크기는 large [라쥐]이다
이 글자의 폰트크기는 medium [미디엄]이다
이 글자의 폰트크기는 small [스몰]이다
이 글자의 폰트크기는 x-small [엑스 스몰]이다
이 글자의 폰트크기는 xx-small [더블 엑스 스몰]이다

이 글자의 폰트크기는 smaller [스몰러]이다
이 글자의 폰트크기는 larger [라쥐어]이다

이 글자의 폰트크기는 initial [이니셜]이다
이 글자의 폰트크기는 inherit [인헤리트]이다

ㅇ HTML문서에서 폰트의 기본 크기(default font size)를 1.2로 주었다면, medium은 12pt, small은 10tp, x-small은 8pt, large는 14pt, x-large는 16pt 정도된다고 볼 수 있다.
ㅇ HTML에서 기본폰트크기는 방문자와 페이지의 내용 등을 잘 헤아려서 결정할 필요가 있다. 문서 안에서 폰트 크기를 조절할 때 대체로 기본폰트크기를 기준으로 하기 때문이다.

[글자꾸밈: 폰트 스타일 font-style]

normal [노멀] 브라우저가 보여주는 기본(default) 스타일
italic [이탤릭] 기울임
oblique [오블맄] 기울임
initial [이니셜] 초기(기본, default) 스타일
inherit [인헤리트] 상위요소(parent element)의 스타일

[실제 적용한 모습 : 쉽게 구분되도록 하기 위해 font-size:1.2em;로 함]

이 글자의 스타일은 normal [노멀] 이다
이 글자의 스타일은 italic [이탤릭] 이다
이 글자의 스타일은 oblique [오블맄] 이다
이 글자의 스타일은 initial [이니셜] 이다
이 글자의 스타일은 inherit [인헤리트] 이다

[글자변형: 폰트 베리언트 font-variant]

normal [노멀] small-caps [스몰 캡스] 영문자를 작은 대문자로 표시함
initial [이니셜] 초기(기본, default) 값으로 표시함
inherit [인헤리트] 상위요소(parent element)와 같이 표시함

[예: 아래의 실제적용한 모습의 코드]

이 글자의 VARIANT는 normal [노멀] 이다
이 글자의 VARIANT는 small-caps [스몰 캡스] 이다
이 글자의 VARIANT는 initial [이니셜] 이다
이 글자의 VARIANT는 inherit [인헤리트] 이다

[실제적용한 모습]

이 글자의 VARIANT는 normal [노멀] 이다
이 글자의 VARIANT는 small-caps [스몰 캡스] 이다
이 글자의 VARIANT는 initial [이니셜] 이다
이 글자의 VARIANT는 inherit [인헤리트] 이다

[글자굵기: 폰트 웨이트 font-weight]

normal [노멀] 기본(default)bold [볼드] 두껍게
bolder [볼더] 더 두껍게
lighter [라이터] 더 가늘게

initial [이니셜] 초기(기본, default) 값으로 표시
inherit [인헤리트] 상위요소(parent element)와 같이 표시

<수자로 폰트 웨이트 설정>
수자가 클 수록 더 두터워지며, 위의 normal [노멀]은 400과 같고, bold [볼드]는 700과 같다.
100 200 300 400 500 600 700 800 900

[실제 적용한 모습]

이 글자의 폰트웨이트는 normal [노멀] 이다
이 글자의 폰트웨이트는 bold [볼드] 이다
이 글자의 폰트웨이트는 bolder [볼더] 이다
이 글자의 폰트웨이트는 lighter [라이터] 이다

이 글자의 폰트웨이트는 initial [이니셜] 이다
이 글자의 폰트웨이트는 inherit [인헤리트] 이다

이 글자의 폰트웨이트는 100 이다
이 글자의 폰트웨이트는 200 이다
이 글자의 폰트웨이트는 300 이다
이 글자의 폰트웨이트는 400 이다
이 글자의 폰트웨이트는 500 이다
이 글자의 폰트웨이트는 600 이다
이 글자의 폰트웨이트는 700 이다
이 글자의 폰트웨이트는 800 이다
이 글자의 폰트웨이트는 900 이다

[줄간격: 라인 하이트 line-height]

normal [노멀] 기본(default). 브라우저들이 대체로 150%를 기본으로 하는 것 같다.
initial [이니셜] 초기(기본, default)값
inherit [인헤리트] 상위요소(parent element)와 같이 표시
수자로 지정: 픽셀(px), 퍼센트(%), 이엠(em), 포인트(pt) 등으로 지정함

[실제 적용한 모습]

이 문장은 줄간격을 normal [노멀]로 주었다. 이 문장은 줄간격을 normal [노멀]로 주었다. 이 문장은 줄간격을 normal [노멀]로 주었다. 이 문장은 줄간격을 normal [노멀]로 주었다. 이 문장은 줄간격을 normal [노멀]로 주었다. 이 문장은 줄간격을 normal [노멀]로 주었다. 이 문장은 줄간격을 normal [노멀]로 주었다. 이 문장은 줄간격을 normal [노멀]로 주었다. 이 문장은 줄간격을 normal [노멀]로 주었다.

이 문장은 줄간격을 initial [이니셜]로 주었다. 이 문장은 줄간격을 initial [이니셜]로 주었다. 이 문장은 줄간격을 initial [이니셜]로 주었다. 이 문장은 줄간격을 initial [이니셜]로 주었다. 이 문장은 줄간격을 initial [이니셜]로 주었다. 이 문장은 줄간격을 initial [이니셜]로 주었다. 이 문장은 줄간격을 initial [이니셜]로 주었다. 이 문장은 줄간격을 initial [이니셜]로 주었다. 이 문장은 줄간격을 initial [이니셜]로 주었다.

이 문장은 줄간격을 inherit [인헤리트]로 주었다. 이 문장은 줄간격을 inherit [인헤리트]로 주었다. 이 문장은 줄간격을 inherit [인헤리트]로 주었다. 이 문장은 줄간격을 inherit [인헤리트]로 주었다. 이 문장은 줄간격을 inherit [인헤리트]로 주었다. 이 문장은 줄간격을 inherit [인헤리트]로 주었다. 이 문장은 줄간격을 inherit [인헤리트]로 주었다. 이 문장은 줄간격을 inherit [인헤리트]로 주었다.

이 문장은 줄간격을 15px로 주었다. 이 문장은 줄간격을 15px로 주었다. 이 문장은 줄간격을 15px로 주었다. 이 문장은 줄간격을 15px로 주었다. 이 문장은 줄간격을 15px로 주었다. 이 문장은 줄간격을 15px로 주었다. 이 문장은 줄간격을 15px로 주었다. 이 문장은 줄간격을 15px로 주었다. 이 문장은 줄간격을 15px로 주었다. 이 문장은 줄간격을 15px로 주었다. 이 문장은 줄간격을 15px로 주었다.

이 문장은 줄간격을 100%로 주었다. 이 문장은 줄간격을 100%로 주었다. 이 문장은 줄간격을 100%로 주었다. 이 문장은 줄간격을 100%로 주었다. 이 문장은 줄간격을 100%로 주었다. 이 문장은 줄간격을 100%로 주었다. 이 문장은 줄간격을 100%로 주었다. 이 문장은 줄간격을 100%로 주었다. 이 문장은 줄간격을 100%로 주었다. 이 문장은 줄간격을 100%로 주었다. 이 문장은 줄간격을 100%로 주었다.

이 문장은 줄간격을 1em으로 주었다. 이 문장은 줄간격을 1em으로 주었다. 이 문장은 줄간격을 1em으로 주었다. 이 문장은 줄간격을 1em으로 주었다. 이 문장은 줄간격을 1em으로 주었다. 이 문장은 줄간격을 1em으로 주었다. 이 문장은 줄간격을 1em으로 주었다. 이 문장은 줄간격을 1em으로 주었다. 이 문장은 줄간격을 1em으로 주었다. 이 문장은 줄간격을 1em으로 주었다.

이 문장은 줄간격을 1.5em으로 주었다. 이 문장은 줄간격을 1.5em으로 주었다. 이 문장은 줄간격을 1.5em으로 주었다. 이 문장은 줄간격을 1.5em으로 주었다. 이 문장은 줄간격을 1.5em으로 주었다. 이 문장은 줄간격을 1.5em으로 주었다. 이 문장은 줄간격을 1.5em으로 주었다. 이 문장은 줄간격을 1.5em으로 주었다. 이 문장은 줄간격을 1.5em으로 주었다. 이 문장은 줄간격을 1.5em으로 주었다.

이 문장은 줄간격을 2em으로 주었다. 이 문장은 줄간격을 2em으로 주었다. 이 문장은 줄간격을 2em으로 주었다. 이 문장은 줄간격을 2em으로 주었다. 이 문장은 줄간격을 2em으로 주었다. 이 문장은 줄간격을 2em으로 주었다. 이 문장은 줄간격을 2em으로 주었다. 이 문장은 줄간격을 2em으로 주었다. 이 문장은 줄간격을 2em으로 주었다. 이 문장은 줄간격을 2em으로 주었다.

[글꼴: 폰트 패밀리 font-family]

글꼴은 아래와 같이 여러가지를 줄 수 있다.
글꼴과 글꼴의 구분은 쉼표( ,)로 하고, 첫번째 글꼴은 따옴표(" ")로 감싸 준다.

font-family: "Hanna", Jeju Gothic, Nanum Gothic, Serif;

브라우저는 첫번째 글꼴을 표시할 수 있으면 첫번째 글꼴로 표시를 하고, 첫번째 글꼴이 없으면 두번째 글꼴로 표시를 한다. 두번째 글꼴도 없으면 세번째 글꼴.... 순서로 표시한다.

위의 예에서는 한나(Hanna)체가 있으면 한나체로 표시하고 한나체가 없으면 그 다음의 제주고딕체(Jeju Gothic)로 표시한다. 두번째의 제주고딕체도 없으면 또 그 다음의 나눔고딕체(nanum Gothic)로 표시하고..... 그런 순서로 표시가 된다.

글꼴이 있느냐는 웹페이지를 보는 방문자의 컴퓨터에 해당 글 꼴이 있는가를 말한다. 그러니까, 방문자의 컴퓨터에 해당 글꼴이 없으면, 위와 같이 글꼴을 지정해 주어도, 의미가 없다.

[출처] 사용법 어찌?

폰트(글자)의 스타일, 크기, 굵기, 색상, 글꼴, 줄간격, 캡션 등을 지정하는 방법

단축키

Articles