하나솔루션
Home > 고객센터 > 자료실

자료실

자료실

폰트 패밀리

  • 하나솔루션
  • 2021-07-09 15:58:12
  • hit198
  • 121.66.28.43
폰트의 각 항목별 상세 설명
ㅇ 각 항목의 수자는 픽셀(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)로 표시하고..... 그런 순서로 표시가 된다.

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

열기 닫기

CUSTOMER CENTER

010-2343-0702

월-금 am 9:30 - pm 06:00
점심시간 : am 12:00 - pm 01:00
토ㆍ일 / 공휴일 휴무

무통장 입금계좌 안내

661-910388-38207

네임서버안내

1차 ns1.webit.kr
211.215.17.210
2차 ns2.webit.kr
211.215.17.212