You cannot see this page without javascript.

조회 수 44 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
폰트에 속성을 주는 방법은 <font >태그와 다른 태그 안의 스타일(style) 속성 두 가지를 쓸 수 있겠다.

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

<font> ~ </font>태그로 속성주기
[ 예 ]
<font size="2em" color="green">
이 글자는 font 태그로 속성을 주었다
</font>

[실제 적용한 모습]
이 글자는 font 태그로 속성을 주었다

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


스타일(style)로 속성주기

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

<div style=" ~~ "> </div>
<p style=" ~~ "> </p>
<span style=" ~~ "> </span>


[예]

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


[실제 적용한 모습]

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

 


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

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

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

<span style=" font: italic bold 1.5em/1em Georgia, serif ;">
여기는 폰트 속성을 한꺼번에 주었다
</span>


[실제 적용한 모습]

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


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

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

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

<span style=" font: italic bold 1.5em/1em Georgia, serif ; color: green;">
여기는 폰트 속성을 한꺼번에 주고 색상을 녹색으로 주었다
</span>


[실제 적용한 모습]

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


[색상을 지정하는 방법]
파랑(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)로 표시하고..... 그런 순서로 표시가 된다.

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

 

[출처] 사용법 어찌?

    댓글이 하나도 없네요ㅠㅠ
    자료가 도움이 되었다면 댓글과 평가 부탁합니다.
?

Html Tip

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

List of Articles
번호 제목 글쓴이 날짜 조회 수
» 폰트(글자)의 스타일, 크기, 굵기, 색상, 글꼴, 줄간격, 캡션 등을 지정하는 방법 팔공산 2018.09.26 44
54 DIV 영역 자체에 링크 거는 방법 DIV 영역 그 자체에 링크를 걸어서 DIV 영역을 클릭하면, 지정된 주소(URL)로 이동하도록 하려면 아래와 같이 스타일(style) 속성으로 지정해 주면 된다. [DIV 영... file 팔공산 2018.09.23 40
53 DIV 화면 정중앙에 박스 배치하기 DIV로 만든 박스를 화면 정중앙에 배치하는 방법은 생각보다 간단하지가 않습니다. 특히 박스의 가로 크기가 변하는 경우는 더욱더 어렵습니다. 예를 들면 Popup... file 팔공산 2018.09.19 36
52 DIV 가로 중앙정렬 , 세로 중앙정렬(display:flex; ) DIV 가로 중앙 정렬, 세로 중앙 정렬 코딩을 할 때 가장 기본이 되지만 또 가장 어려웠던 부분이었다. display:flex; 이 코드를 알고 나서 정말 쉽게 코딩이 가능... file 팔공산 2018.09.19 43
51 커서(cursor) 모양 정리 마우스 커서 모양에 대해 알아보겠습니다. 보통 cursor 작업을 하면 pointer 위주로 작업을 합니다. 하지만 pointer 외에 아주 많는 cursor 가 있습니다. 그종류... file 팔공산 2018.07.19 48
50 webkit-animation 적용 방법 css3를 지원하는 브라우즈에서 이미지나 문구를 에니메이션 처럼 꾸미는 방법으로 webkit-animation을 많이 사용합니다. 스케치북5 게시판에 댓글달기 추천 문구... file 팔공산 2018.01.31 136
49 각종 css3를 자동으로 만들어주는 사이트 {CSS3} animation / transform / transition 각종 css3를 자동으로 만들어주는 사이트 http://www.css3maker.com/index.html * animation 참고 사이트 http://dan... 팔공산 2017.11.07 231
48 html에 사용되는 Character Entities(특수기호) #ce { font: .8em Monaco; display: block; } #ce tr { background: #EEE; display: inline-block; text-align: center; width: 10em; height: 10em; margin: .5e... file 팔공산 2017.11.04 126
47 이미지 마우스 hover시 좌우 기울이기 아래의 이미지와 같이 마우스 hover시 좌우로 기울이는 코드 .h img { border:1px solid #D4D4D4; padding:5px; } .h img:hover{ border:1px solid #666666; filt... file 팔공산 2017.10.27 164
46 모바일웹에서 스마트폰으로 전화바로연결 코드 모바일웹(스마트폰)에서 자동으로 전화 걸기 태그 는 아주 간단합니다 아래 코드만 입력하면 끝입니다. 스마트폰에서 터치하면 자동으로 등록된 전화번호가 키패... file 팔공산 2017.06.16 619
45 반응형 CSS 테이블 .head { background-color: #327a81; color: white; font-size: 1.5em; padding: 1rem; text-align: center; text-transform: uppercase;} .head1 { display: non... file 팔공산 2017.06.13 464
44 실시간 환율조회 html 외환은행과 하나은행이 합병되면서 기존의 실시간 환율조회 html이 작동을 하지를 않아서 정상적으로 작동하는 html을 올립니다. &lt;center&gt;&lt;iframe frameborder=&quot;o... file 팔공산 2017.04.18 289
43 HTML 만으로 마우스오버 구현하는 방법 [URL링크시] &lt;a href=&quot;#&quot; onMouseOver=&quot;this.innerHTML=&#039;마우스오버시 변경되는 텍스트&#039;&quot; onMouseOut=&quot;this.innerHTML=&#039;마우스가 범위를 벗어날시 변경되는 텍스... 1 file 팔공산 2017.01.07 4003
42 <div> 와 같은 블록 요소를 가운데 정렬하는 방법 팔공산 2016.12.26 562
41 float 속성을 가진 div 100% 설정하는 방법 css작업하다보면 간혹 곤욕스러운 경우가 많습니다. 대표적인게 float 속성인데요.. div, p 태그는 대표적인 block속성을 가지고 있는데요.. 이게 float을 만나면... file 팔공산 2016.04.21 324
40 배경이미지 슬라이드 스크립트 팔공산 2016.04.19 996
39 CSS3 border-radius 이해하기 border-radius가 출현하면서 웹 디자이너들은 정말 열광했습니다 . 이전까지는 둥근모서리를 만들기 위해 엄청난 편법과 기법들이 난무했습니다. 이미지를 이용해... file 팔공산 2016.04.07 215
38 IE 버젼별로 css 따로 적용하는 방법 웹이 널리 보급된 이유를 개발자 입장에서 찾으라면 html, css와 같은 비교적 간단한 문법과 jsp, php, asp 같은 server-side 언어의 발전을 들 수 있을것이다. ... file 팔공산 2011.02.17 11464
37 마퀴태그의 기본 팔공산 2010.02.06 9664
36 이미지 바꾸기 소스 1 감로수 2009.06.06 10159
목록
Board Pagination Prev 1 2 3 Next
/ 3
서버에 요청 중입니다. 잠시만 기다려 주십시오...