실무에서 폰트 관련해서 주로 사용되는 명칭으로 '시스템 폰트', '이미지 폰트', '웹 폰트'가 있다. 시스템 폰트 : font-family로 선언한 글꼴이 사용자 시스템에 기본으로 설치 되어 있어 사용할 수 있는 경우 이미지 폰트 : 글자를 표현함에 있어 시각적인 요소를 많이 넣고 싶을 때 글꼴 대신 이미지를 이용해서 표현하는 경우를 의미한다. 이미지 폰트는 폰트가 아니라 이미지이다. 웹 폰트 : 서버에 저장해 제공하거나, 웹 경로를 통해 사용하는 폰트를 의미한다. @font-face 웹에 있는 글꼴을 사용자의 로컬 환경(컴퓨터)으로 다운로드하여 적용하는 속성이다. (기본 값 : 없음) @font-face { /* font-properties */ } @font-face의 속성 값 font..
font의 경우 앞서 배운 font와 관련된 다양한 값을 축약 속성에 넣을 수 있다. 다만 속성마다 선언 순서를 지켜야 하는 제약이 있음에 유의해야한다. 또한, 반드시 꼭 넣어야 하는 속성들이 있는 등 지켜야 할 규칙이 많고 가독성이 좋지 않기 때문에 실무에서 선호하는 편은 아님을 알아두자. 그렇지만 font로 선언된 속성을 보고 어떤 값들이 적용되어 있는지 해석할 수 있어야 한다. 축약 가능한 font 관련 속성 font-style, font-variant, font-weight, font-size/line-height, font-family 속성들은 한 번에 선언할 수 있는 축약형 속성이다. (기본 값 : 각 속성들의 기본 값) font: font-style font-variant font-weigh..
[CSS] 폰트 (font) - font-style, 폰트 스타일
font-style 글꼴의 스타일을 지정하는 속성이다. (기본 값 : normal) font-style: normal | italic | oblique | initial | inherit; font-style의 속성 값 normal : font-family 내에 분류된 기본 값 italic : italic 스타일로 표현 oblique : oblique 스타일로 표현 - oblique 텍스트의 기울기에 대한 각도를 추가로 지정할 수 있다. font-style: normal; font-style: italic; font-style: oblique; font-weight oblique : 유효한 값은 -90 ~ 90도이며, 따로 각도를 지정하지 않으면 14도가 사용됩니다. 양수 값은 글의 끝 부분 쪽으로 기울..
font-weight 글꼴의 굵기를 지정하는 속성이다. (기본 값 : normal) font-weight: normal | bold | bolder | lighter | number | initial | inherit ; font-weight의 속성 값 normal : 기본 값 (400) bold : 굵게 표현(700) bolder : 부모 요소 보다 두껍게 표현 lighter : 부모 요소 보다 얇게 표현 font-weight: normal; /* 400과 같음 */ font-weight: bold; font-weight: lighter; font-weight: bolder; number : 100, 200, 300, 400, 500, 600, 700, 800, 900 (클수록 더 두껍게 표현) - 수..
font-size 글꼴의 크기를 지정하는 속성이다. (기본 값: medium) font-size: keyword | length | initial | inherit ; 기본 값 미지정 시 글꼴의 기본크기는 16px (1em) keyword : medium(기본 값), xx-small, x-small, small, large, x-large, xx-large, smaller, larger - absolute size : 기본 값인 medium에 대한 상대적인 크기로, 브라우저마다 사이즈가 다르게 정의한다. - relative size : 부모 요소의 font-size 크기에 상대적으로 적용되며, smaller는 0.8배, larger는 1.2배이다. font-size: medium; /* ..
[CSS] 폰트 (font) - line-height, 행간 조정
장문의 글에서는 가독성을 위해서 글 사이의 간격을 띄우기도 한다. 이때 행간을 조정한다고 하는데, line-height 속성을 이용해 이 행간을 조정할 수 있다. 그러나 정확하게 line-height는 줄의 높이를 의미하는 것이고, 이를 이용해서 행간을 조정할 수 있는 것이다. line-height의 속성 행간을 제어할 때 사용하는 속성이라 해서 줄 간격으로 생각해 오해하기 쉬울 수가 있다. 줄 바꿈이 되었을 때, 윗줄의 텍스트 하단과 아랫줄의 텍스트 상단까지의 간격이라고 생각할 수도 있지만, line-height로 제어되는 부분을 line-box라고도 하며 이는 타이포그래피 구조에서 배웠던 [em 박스] + [상하단의 여백]까지를 의미한다. line-height: normal | number | len..
[CSS] font - font-family
font-family 글꼴을 지정하는 속성이다. font-family: family-name | generic-family ( | initial | inherit ); family-name 사용할 폰트의 이름을 나타내며 ' , ' 로 구분하여 여러 개 선언 할 수 있다. 먼저 선언된 순서대로 우선순위가 결정된다. 이름 중간에 공백이 있거나, 한글일 경우 홑따옴표로 묶어서 선언한다. 이때 한글 글꼴을 선언할 경우 영문과 한글 모두 적어주어야 한다. generic-family family-name으로 지정된 글꼴을 사용할 수 없을 경우를 대비해, 브라우저가 대체할 수 있는 폰트가 필요한 경우 선택할 수 있게 해주는 기능을 한다. font-family 속성의 맨 마지막에 선언해야 하며, 키워드이기 때문에 따옴..
[CSS] font - 타이포그래피 (typography)
타이포그래피(typography)의 구조 폰트를 이해하기 위해서는 타이포그래피의 구조를 먼저 이해해야 한다. 모든 폰트는 em박스를 가지고 있고 위 그림과 같은 구조로 이루어져 있다. em : 폰트의 전체 높이를 의미합니다. ex ( = x-height ) : 해당 폰트의 영문 소문자 x의 높이를 의미합니다. Baseline : 소문자 x를 기준으로 하단의 라인을 의미합니다. Descender : 소문자에서 baseline 아래로 쳐지는 영역을 의미합니다. 서체에 따라 descender의 길이가 다릅니다. ( g, j, p, q, y ) Ascender : 소문자 x의 상단 라인 위로 넘어가는 영역을 의미합니다. ( b, d, h, l )