Home > Rhymix > Html

2018.09.26 13:20

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

팔공산

조회 수 16,633 추천 수 0 댓글 6

단축키

Prev이전 문서

Next다음 문서

위로 아래로 댓글로 가기 인쇄

단축키

Prev이전 문서

Next다음 문서

위로 아래로 댓글로 가기 인쇄

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

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

<font> ~ </font>태그로 속성주기
[ 예 ]

[실제 적용한 모습]

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

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

스타일(style)로 속성주기

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

[예]

<span style = " font-size:1.5em; color: green;">
이 글자는 Span에 스타일(style)로 속성을 주었다
</span>

[실제 적용한 모습]

이 글자는 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에서 폰트 속성을 준 코드 모습]

<span
style="
font-style: italic ;
font-weight: bold;
font-size: 1.5em;
line-height: 1.0em;
color: navy;
font-family: arial;
">
여기는 스타일에서 폰트 속성을 각각 주었다
</span>

[실제 적용한 모습]

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

폰트의 각 항목별 상세 설명
ㅇ 각 항목의 수자는 픽셀(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)와 같이 표시함

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

<span style="font-variant:normal;">이 글자의 VARIANT는 normal [노멀] 이다</span>
<span style="font-variant:small-caps;">이 글자의 VARIANT는 small-caps [스몰 캡스] 이다</span>
<span style="font-variant:initial;">이 글자의 VARIANT는 initial [이니셜] 이다</span>
<span style="font-variant:inherit;">이 글자의 VARIANT는 inherit [인헤리트] 이다</span>

[실제적용한 모습]

이 글자의 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)로 표시하고..... 그런 순서로 표시가 된다.

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

[출처] 사용법 어찌?

0 좋아요

Facebook Twitter Pinterest Band KakaoStory Kakao

이전 다음 위로 아래로 댓글로 가기 인쇄

✔댓글 쓰기

에디터 선택하기

✔ 텍스트 모드 ✔ 에디터 모드

댓글 쓰기

에디터 사용하기 닫기

Comment '6'

초
초롱 2021.05.04 02:03
#comment_536788

도움이 많이 되었습니다. 다른 글들도 종종 참고하겠습니다. 감사합니다 :)

수정 삭제 댓글
팔공산 2021.05.04 09:25 글쓴이
#comment_536802

초롱 님에게 달린 댓글

반갑습니다.

댓글
하루 2021.05.06 02:17
#comment_536950

댓글이 있어 정독하였습니다.
- 이 글자의 폰트크기는 xx-large [더블 엑스 라쥐]이다
- 이 글자의 폰트크기는 x-large [엑스 라쥐]이다
신기하게도 크기가 같은거같네요.

댓글
팔공산 2021.05.06 11:55 글쓴이
#comment_536981

하루 님에게 달린 댓글

이 글자의 폰트크기는 xx-large [더블 엑스 라쥐]이다
이 글자의 폰트크기는 x-large [엑스 라쥐]이다

<div style="border: 1px dashed #bbb; padding: 10px;"><span style="font-size: xx-large;">이 글자의 폰트크기는 xx-large [더블 엑스 라쥐]이다</span><br />
<span style="font-size: x-large;">이 글자의 폰트크기는 x-large [엑스 라쥐]이다</span></div>

소스코드에서 위와 같이 style="font-size: xx-large;" 를 적용해야 합니다.

댓글
하루 2021.05.07 07:40
#comment_537015

팔공산 님에게 달린 댓글

더블엑스 라쥐는 엄청 크네요!!

댓글
팔공산 2021.05.07 10:49 글쓴이
#comment_537031

하루 님에게 달린 댓글

님의 댓글을 이제야 이해 했네요.
본문 [더블 엑스 라쥐]가 font-size: x-large 로 되어 있었네요.
수정했습니다.^.^

댓글

Html Tips

홈페이지 작성시 요긴하게 사용되어지는 Html들을 정리해 놓았습니다

Category

List of Articles
번호	제목	글쓴이	날짜	조회 수
71	스크롤 바(Scrollbar) 스타일링	팔공산	2024.05.13	54
70	현재 시간 실시간으로 카운트 출력	팔공산	2024.03.31	127
69	line-height 와 height의 차이점	팔공산	2023.04.02	1,102
68	css 사이즈 태그 em, rem, vh, vw, vmin, vmax 정리 1	팔공산	2022.04.25	2,378
67	flex로 세로 가로 정렬 하기 1	팔공산	2022.04.22	921
66	버튼 클릭시 클립보드에 복사하는 방법	팔공산	2021.12.31	2,078
65	Hover시 테두리두께 설정	팔공산	2021.11.05	2,599
64	CSS 색상 이름 rgb , 16진수 자료( css 색상표 )	팔공산	2021.02.15	863
63	display 속성: inline, block, inline-block	팔공산	2021.02.02	928
62	접기, 펼치기 folding기능 - <details> 와 <summary>로 간단하게 구현하기 4	팔공산	2021.01.23	25,344
61	글 색상을 랜덤으로 출력하기	팔공산	2020.11.30	1,048
60	div 영역에 Width:100%; height:100%; 적용해 보기 - display:table	팔공산	2020.10.12	1,528
59	홈페이지에 화려한 에니메이션 효과를 주기 - aos animate	팔공산	2020.08.29	2,782
58	웹퍼블리셔가 알고있어야 할 display:table 속성 4	팔공산	2020.02.20	1,017
57	HTML Table이 디바이스 및 화면 가로사이즈보다 더 넓을 때	팔공산	2019.03.01	2,063
56	CSS 말줄임 처리하기	팔공산	2018.11.13	1,776
»	폰트(글자)의 스타일, 크기, 굵기, 색상, 글꼴, 줄간격, 캡션 등을 지정하는 방법 6	팔공산	2018.09.26	16,633
54	DIV 영역 자체에 링크 거는 방법 4	팔공산	2018.09.23	28,521
53	DIV 화면 정중앙에 박스 배치하기	팔공산	2018.09.19	1,031
52	DIV 가로 중앙정렬 , 세로 중앙정렬(display:flex; )	팔공산	2018.09.19	2,169

쓰기

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

단축키

단축키

Html Tips

홈페이지 작성시 요긴하게 사용되어지는 Html들을 정리해 놓았습니다

LOGIN