Computer Security

#7 폰트텍스트 본문

프로그래밍/HTML & CSS

#7 폰트텍스트

쿠리 Kuri 2022. 6. 1. 18:30

타이포그래피의 구조


모든 폰트는 em박스를 가지고 있고 위 그림과 같은 구조로 이루어져 있습니다.

•em 폰트의 전체 높이를 의미한다.
•ex ( = x-height ) 해당 폰트의 영문 소문자 x의 높이를 의미한다.
•Baseline 소문자 x를 기준으로 하단의 라인을 의미한다.
•Descender 소문자에서 baseline 아래로 쳐지는 영역을 의미한다. 서체에 따라 descender의 길이가 다르다. ( g, j, p, q, y )
•Ascender 소문자 x의 상단 라인 위로 넘어가는 영역을 의미한다.( b, d, h, l )

 

font-family 속성

글꼴을 지정하는 속성입니다.

font-family: family-name | generic-family ( | initial | inherit );
  • family-name: 사용할 폰트의 이름을 나타내며 ' , ' 로 구분하여 여러 개 선언 할 수 있다.
  • 먼저 선언된 순서대로 우선순위가 결정된다. 
  • 이름 중간에 공백이 있거나, 한글일 경우 홑따옴표로 묶어서 선언한다.

 

generic-family

  • family-name으로 지정된 글꼴을 사용할 수 없을 경우를 대비해, 브라우저가 대체할 수 있는 폰트가 필요한 경우 선택할 수 있게 해준다.
  • font-family 속성의 맨 마지막에 선언해야 하며, 키워드이기 때문에 따옴표 등의 인용부호로 묶지 않는 것이 원칙이다.

ex)

font-family: Helvetica, Dotum, '돋움', Apple SD Gothic Neo, sans-serif;

-가장 먼저 Helvetica를 사용하고, 이를 사용할 수 없을 때 Dotum을 사용하는 방식으로 우선순위에 따라 차례대로 적용 된다.

-만약 "abc 가나다 123" 이라는 글자가 있다면, "abc"와 "123"은 Helvetica로 표현이 되고, "가나다"는 Dotum으로 표현 된다.

-"가나다"가 Dotum으로 표현된 이유는 Helvetica는 한글을 지원하는 폰트가 아니기 때문이다.

 

ex)를 보면 돋움체를 영문으로 한번, 한글로 한번 선언 했다.

왜 이렇게 선언 했을까?

-한글을 지원하지 않는 디바이스일 경우 해당 한글 폰트를 불러올 수 없으므로 영문명으로도 선언해 주어야한다.

-마지막에는 반드시 generic-family를 선언 해주어야 한다. 그 이유는 선언된 모든 서체를 사용할 수 있다는 보장이 없기 때문이다.

-이때 generic-family를 선언해주면, 시스템 폰트 내에서 사용자가 의도한 스타일과 유사한 서체로 적용되기 때문이다.

-또한, 자식 요소에서 font-family를 재선언하면 부모에 generic-family가 선언되어있어도 다시 선언해주어야 한다.

 

-Generic-Family에는 대표적인 서체로 serif, sans-serif가 있다.

-serif는 삐침이라는 뜻이고, sans는 프랑스어로 '~이 없이'라는 의미가 있다.

-serif는 글자 획에 삐침이 있는 폰트로 대표적으로 명조체가 있으며, sans-serif는 획에 삐침이 없는 폰트로 대표적으로 돋움체가 있다.

 

line-height 속성

line-height는 텍스트 라인의 높이를 의미하는 것으로 주로 행간을 제어할 때 사용된다.

    기본 값 : normal

line-height: normal | number | length | initial | inherit ;
 

-행간을 제어할 때 사용하는 속성이라 해서 줄 간격으로 생각해 오해하기 쉬울 수가 있다.

-줄 바꿈이 되었을 때, 윗줄의 텍스트 하단과 아랫줄의 텍스트 상단까지의 간격이라고 생각할 수도 있지만,

line-height로 제어되는 부분을 line-box라고도 하며 이는 타이포그래피 구조에서 배웠던 [em 박스] + [상하단의 여백]까지를 의미한다.

< 속성 값 >

normal 기본값으로 브라우저의 기본 속성을 따릅니다.
폰트에 따라 브라우저에 따라 다르지만 보통 1.2 정도로 할당되어 있습니다.
number font-size를 기준으로 설정한 숫자만큼 배율로 적용합니다.
length px, em 등 고정 수치로 할당할 수 있습니다.
% font-size를 기준으로 설정한 퍼센트만큼 배율로 적용합니다.

주의할 점은, line-height의 값으로 number를 선언할 때와 %로 선언할 때의 차이다.

-두 값 모두 font-size를 기준으로 동작하기 때문에 1이나 100%를 같은 것이라고 오해할 수 있다.

-하지만 두 값은 큰 차이가 있는데, 바로 line-height의 값이 자식 요소로 상속되었을 때의 계산 방식이다. 

  • number 부모 요소의 숫자 값이 그대로 상속된다.. 즉, 자식 요소에서도 또 한 번 자식 요소의 font-size를 기준으로 계산된 값을 가진다.

  • % 부모 요소에서 %값이 그대로 상속되는 것이 아니고, %에 의해 이미 계산된 px값이 상속된다.

아래 코드를 예시로 보자면,

body { font-size: 20px; line-height: 2; }       /* line-height = 40px; */
body { font-size: 20px; line-height: 200%; }    /* line-height = 40px; */

-두 경우 모두 <body>에 똑같이 line-height: 40px이 적용된다.

-하지만 자식 요소로 <p>가 있다고 생각을 하면 얘기가 달라진다.

body { font-size: 20px; line-height: 2; }    /* line-height = 40px; */
p { font-size: 10px; }                                  /* line-height = 20px; */


body { font-size: 20px; line-height: 200%; }    /* line-height = 40px; */
p { font-size: 10px; }                                          /* line-height = 40px; */

-이처럼 계산된 값이 아닌 숫자 값을 상속한다는 사실 때문에,

-숫자 값을 사용하면 부모 엘리먼트에서 계산된 값 대신 비율을 그대로 상속받을 수 있으므로,

가능하면 단위가 없는 값을 사용하는 것이 좋다.

 

 

 

 

 

font-size 속성

글꼴의 크기를 지정하는 속성이다.

    기본 값 : medium

font-size: keyword | length | initial | inherit ;

 < 속성 값 >

keyword medium(기본 값), xx-small, x-small, small, large, x-large, xx-large, smaller, larger
length px, em 등 고정 수치로 지정한다.
% 부모 요소의 font-size 기준의 퍼센트로 지정한다.

 

  • absolute size (keyword) 기본 값인 medium에 대한 상대적인 크기로, 브라우저마다 사이즈가 다르게 정의되어있다.
  • relative size (keyword) 부모 요소의 font-size 크기에 대해 상대적입니다. smaller는 0.8배, larger는 1.2배다.
  • length px, em, rem 등의 단위를 이용하여 고정된 크기를 지정할 수 있다.
  • - em :  부모 요소의 font-size에 em 값을 곱한 크기          - rem : 루트의 font-size에 rem 값을 곱한 크기
  • percent (%) 부모 요소의 font-size를 기준으로 백분율 계산된 값을 지정할 수 있다.
  • viewport units vw, vh 단위로 뷰포트를 기준으로 하여, 유동적인 font-size를 지정할 수 있다.
  • vw는 뷰포트 width의 1%, vh는 뷰포트 height의 1% 값을 가진다.

 

 

font-weight 속성

글꼴의 굵기를 지정하는 속성이다.

 

    기본 값 : normal

font-weight: normal | bold | bolder | lighter | number | initial | inherit ;

 

< 속성 값 >

normal 기본 값 (400)
bold 굵게 표현(700)
bolder 부모 요소 보다 두껍게 표현
lighter 부모 요소 보다 얇게 표현
number 100, 200, 300, 400, 500, 600, 700, 800, 900 (클수록 더 두껍게 표현)

-실무에서는 normal과  bold를 많이 사용하고, 부모 요소에 영향이 있는 bolder와 lighter는 사용을 될 수 있으면 지양하는 편이다.

-물론 상속 관계에서 바뀌어야 하는 스펙이라면 당연히 유용하게 사용될 수 있지만, 그 외의 경우에는 사용에 있어 신중해야 한다. 

-font-weight는 normal, bold와 같은 키워드 외에 숫자로도 그 굵기를 표현할 수 있다.

-100~900까지 100단위로 값을 지정하여 사용할 수 있고 숫자가 커질수록 더욱 굵게 표현된다.

-기본적으로 400은 normal과 같고, 700은 bold와 같다

-그러나 수치를 이용한 font-weight는 폰트 자체에서 지원을 해야 표현할 수 있다.

-폰트에 따라 font-weight를 적용해도 굵기에 변화가 없을 수도 있으며,

-normal과 bold만 지원하는 폰트일 경우에는 100~500까지는 normal로, 600~900까지는 bold로 표현된다.

-폰트가 점차 다양해지면서 굵기 자체를 폰트 family-name으로 가지고 있는 경우도 있다.

-또한,  디바이스별로 조금 다르게 표현될 수도 있다. 

-font-weight와 font-family, font-size는 서로 밀접하게 연관되어있다.

 

 

font-style 속성

글꼴의 스타일을 지정하는 속성이다.

    기본 값 : normal

font-style: normal | italic | oblique | initial | inherit;
 

< 속성 값 >

normal font-family 내에 분류된 기본 값
italic italic 스타일로 표현합니다.
oblique oblique 스타일로 표현합니다.

 

  • oblique 텍스트의 기울기에 대한 각도를 추가로 지정할 수 있다.

font-weight oblique <각도>;

-유효한 값은 -90 ~ 90도이며, 따로 각도를 지정하지 않으면 14도가 사용된다.

-수 값은 글의 끝 부분 쪽으로 기울어지며, 음수값은 시작 부분 쪽으로 기울어진다.

그러나 아직 초안 단계로 CSS Fonts Module Level 4를 지원하는 브라우저에서만 사용 가능하다.

 

font-variant 속성

글꼴의 형태를 변형하는 속성으로 소문자를 작은 대문자로 변환할 수 있다.

    기본 값 : normal 

font-variant: normal | small-caps | initial | inherit ;

 < 속성 값 >

normal 기본 값
small-caps 소문자를 작은 대문자로 변형합니다.

 

font 관련 속성

font-style, font-variant, font-weight, font-size/line-height, font-family 속성들을 한 번에 선언할 수 있는 축약형 속성이다. 

    기본 값 : 각 속성들의 기본 값

font: font-style font-variant font-weight font-size/line-height font-family | initial | inherit;

< 속성 값 >

font-style font-style 지정, 기본 값은 normal
font-variant font-variant 지정, 기본 값은 normal
font-weight font-weight 지정, 기본 값은 normal
font-size/line-height font-size/line-height 지정, 기본 값은 normal
font-family font-family 지정 
/* style | size | family */
font: oblique 2em "돋움", dotum, sans-serif;

/* style | variant | weight | size/line-height | family */
font: oblique small-caps bold 16px/1.5 '돋움';

/* The font used in system dialogs */
font: message-box;
font: icon;

축약형을 선언할 때는 아래 사항들을 유의해야 한다.

  • font-size와 font-family는 반드시 선언해야 하는 필수 속성이다.
  • 빠진 속성이 있다면 기본 값으로 지정된다.
  • 각 속성의 선언 순서를 지켜야 한다.

 

@font-face

웹에 있는 글꼴을 사용자의 로컬 환경(컴퓨터)으로 다운로드하여 적용하는 속성이다. 

    기본 값 : 없음

@font-face { 
    font-properties 
}

< 속성 값 >

font-family(필수) 글꼴의 이름을 지정
src(필수) 다운로드 받을 글꼴의 경로(URL)
font-style(옵션) 글꼴의 스타일 지정, 기본 값은 normal
font-weight(옵션) 글꼴의 굵기 지정, 기본 값은 normal

 

ex)

@font-face {
    font-family: webNanumGothic; /* 사용자 지정 웹 폰트명 */
    src: url(NanumGothic.eot); /* 적용 될 웹 폰트의 경로 */
    font-weight: bold; /* 필요에 따라 지정 */
    font-style: italic; /* 필요에 따라 지정 */
}

body {
    font-family: webNanumGothic;
}

웹폰트는 선언 시 필요에 따라 굵기나 스타일 등을 같이 지정해서 사용할 수 있다.

 

vertical-align 속성

요소의 수직 정렬을 지정하는 속성이다. 

    기본 값 : baseline

vertical-align: keyword | length | percent | initial | inherit ;

< 속성 값 >

length 요소를 지정한 길이만큼 올리거나 내림. 음수 허용
% 요소를 line-height를 기준으로 올리거나 내림. 음수 허용
keyword baseline(기본 값), sub, super, top, text-top, middle, bottom, text-bottom

vertical-align은 기본 값이 baseline다.

이전에 타이포그래피 구조 강의에서 설명했듯이 baseline은 소문자 x를 기준으로 하단 라인을 의미한다. 

  • keyword sub : 부모 아래 첨자 기준으로 정렬 super : 부모 위 첨자 기준으로 정렬 text-top : 부모 텍스트의 맨 위(Ascender 제외)  text-bottom : 부모의 텍스트의 맨 아래(Descender 제외) middle : 부모의 중앙에 위치 top : 부모의 맨 위 위치 bottom : 부모의 맨 아래 위치

  • length px값 사용 시 baseline을 기준으로 이동하며, 음수 값도 사용 가능하다.

  • percent ( % ) line-height를 기준으로 내에서 이동하며 음수 값 사용 가능하다.

 

text-align 속성

텍스트의 정렬을 지정하는 속성이다. 

    기본 값 : left (Right to Left 언어일 경우는 right)

text-align: left | right | center | justify | initial | inherit ;

-기본 값은 left이지만 경우에 따라 다르다.

-문서의 방향이 LTR(Left To Right) 왼쪽에서 오른쪽 방향인 언어일 경우 left가 기본값이고,

-RTL(Right To Left) 로 오른쪽에서 왼쪽으로 읽힐 경우 right가 기본값이 된다. 

< 속성 값 >

left 텍스트를 왼쪽으로 정렬
right 텍스트를 오른쪽으로 정렬
center 텍스트를 중앙으로 정렬
justify 텍스트를 라인 양쪽 끝으로 붙여서 정렬. (마지막 라인은 정렬 하지 않음)

 

text-align과 display의 관계

 -  text-align은 inline-level에 적용

 -  text-align은 block-level에 적용할 수 없음 

 

 

그렇다면 block 요소를 가운데 정렬 하고자 한다면 어떻게 해야 할까?

-박스모델 챕터에서 다룬 margin의 auto 값을 이용해서 하면 된다. 

  • 가운데 정렬 인라인 요소 : text-align (center) 블럭 요소 :  margin (auto) 

 

 

text-indent 속성

텍스트의 들여쓰기를 지정하는 속성이다. 

    기본 값 : 0

text-indent: length | initial | inherit;

< 속성 값 >

length px, em 등 고정 수치로 지정. 음수 허용
% 부모 요소의 width를 기준으로 퍼센트로 지정

 

  • length 문단의 첫 줄에 대한 들여쓰기를 수행합니다. 음수 값을 사용할 수 있으며, 음수 값 사용 시 왼쪽으로 이동한다.

  • percent ( % ) 텍스트를 포함하는 컨테이너 블록의 width(부모의 width)를 기준으로 변환된 백분율 값으로 들여쓰기한다.

text-decoration 속성

텍스트의 장식을 지정하는 속성입니다. 아래 속성들의 단축 속성으로, 기본 값은 차례대로 아래 3가지 속성의 값이다. 

    기본 값 :  none   currentColor   solid

text-decoration: text-decoration-line text-decoration-color text-decoration-style | initial | inherit;
  • text-decoration-line 텍스트 꾸밈의 종류를 지정하는 속성이다.    
  • 기본 값 : none  

< 속성 값 >

none 텍스트 꾸밈을 생성하지 않음 ( 기본값 )
underline 밑줄로 꾸밈을 설정
overline 윗줄로 꾸밈을 설정
line-through 중간을 지나는 줄로 꾸밈을 설정
  • text-decoration-color
  • 텍스트 꾸밈의 색상을 지정하는 속성이다.    
  • 기본 값 : currentColor
  • 색상 값을 사용하여 원하는 색상을 지정할 수 있다.
  • text-decoration-style 꾸밈에 사용되는 선의 스타일을 지정하는 속성이다.    
  • 기본 값 : solid  

< 속성 값 >

solid 한줄 스타일 ( 기본 값 )
double 이중선 스타일
dotted 점선 스타일
dashed 파선 스타일
wavy 물결 스타일

 

white-space 속성

요소 안에 공백을 어떻게 처리할지 지정하는 속성이다.

    기본 값 : normal

white-space: normal | nowrap | pre | pre-line | pre-wrap | initial | inherit;

< 속성 값 >

normal 공백과 개행을 무시하고, 필요한 경우에 자동 줄바꿈 발생. 기본 값
nowrap 공백과 개행을 무시하고, 자동 줄바꿈이 일어나지 않음.
pre 공백과 개행을 표현하고, 자동 줄바꿈이 일어나지 않음.
pre-line 공백은 무시하고, 개행만 표현. 필요한 경우에 자동 줄바꿈 발생.
pre-wrap 개행은 무시하고, 공백만 표현. 필요한 경우 자동 줄바꿈 발생.

 

letter-spacing 속성

자간을 지정하는 속성이다.

    기본 값 : normal

letter-spacing: normal | length | initial | inherit;

< 속성 값 >

normal 기본 값
length 길이만큼 자간을 지정. 음수 허용

 

word-spacing 속성

단어 사이의 간격을 지정하는 속성이다.

   기본 값 : normal

word-spacing: normal|length|initial|inherit;

< 속성 값 >

normal 기본 값
length 길이만큼 단어 사이의 간격을 지정. 음수 허용

 

word-break 속성

단어가 라인 끝에 나올 경우 어떻게 처리할지(중단점) 지정하는 속성이다.

    기본 값 : normal

word-break: normal | break-all | keep-all | initial | inherit;

< 속성 값 >

normal 기본 값. 중단점은 공백이나 하이픈(-)(CJK는 음절)
break-all 중단점은 음절. 모든 글자가 요소를 벗어나지 않고 개행
keep-all 중단점은 공백이나 하이픈(-)(CJK는 그 외 기호도 포함)

 

word-wrap 속성

요소를 벗어난 단어의 줄바꿈을 지정하는 속성이다.

  기본 값 : normal

word-wrap: normal|break-word|initial|inherit;

< 속성 값 >

normal 기본 값. 중단점에서 개행
break-word 모든 글자가 요소를 벗어나지 않고 강제로 개행

 

저작자표시 비영리 변경금지

'프로그래밍 > HTML & CSS' 카테고리의 다른 글

#9 미디어 쿼리  (0) 2022.06.05
#8 레이아웃  (0) 2022.06.04
#6 단위, 배경, 박스모델  (0) 2022.05.31
#5 CSS 이해하기 (가상선택자,구체성,상속,캐스케이딩)  (0) 2022.05.24
#4 CSS 이해하기 (선택자)  (0) 2022.05.23
'프로그래밍/HTML & CSS' Related Articles more
Comments