[CSS] 폰트&텍스트 알아보기

##1. 타이포그래피 구조

 

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

 

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

---

##2. Font-family

font-family

• 글꼴을 지정하는 속성
• family-name과 generic-family로 구성됨
• family-name은 지정순서로 폰트의 우선순위를 결정함(한글 지원여부)
• generic-family는 family-name으로 지정한 폰트가 사용자의 컴퓨터에 없을 시 적정한 폰트를 선택할 수 있도록 함
• family-name: 사용할 폰트의 이름을 나타내며, ','로 구분하여 여러 개를 선언 할 수 있다. 먼저 선언된 순서대로 우선 순위가 결정되며, 이름 중간에 공백이 있거나, 한글일 경우 홑따옴표로 묶어 선언함
• generic-family: family-name으로 지정된 글꼴을 사용할 수 없을 경우를 대비해, 브라우저가 대체할 수 있는 폰트가 필요한 경우 선택할 수 있게 해준다. font-family 속성의 맨 마지막에 선언해야 하며, 키워드이기 때문에 따옴표 등의 인용부호로 묶지 않는 것이 원칙이다. 예를 들어 아래와 같이 사용한다

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

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

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

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

 

돋움체를 영문으로 한번, 한글로 한번 선언하였다. 왜일까?

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

마지막에는 반드시 generic-family를 선언해주어야 한다.

그 이유는 선언된 모든 서체를 사용할 수 있다는 보장이 없으므로.

 

이때 generic-family 선언해주면 시스템 폰트 내에서 사용자가 의도한 스타일과 유사한 서체로 적용되기 때문이다. 또한 자식 요소에서 font-family를 재선언하면 generic-family가 선언되어 있어도 재선언해야 한다.

 

Generic-family에 대표서체: serif, sans-serif (serif-> 삐침 이라는 뜻)

 

---

##3. line-height (행간)

텍스트 라인의 높이를 의미하는 것으로 주로 행간을 제어할 때 사용함

line-height: normal;

line-height: 2; ->숫자만 입력 가능

line-height: 20px;

line-height: 200%;

 

---

##4. Webfont

 

Font-face

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

기본값: 없음

 

<속성값>

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

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

body {
    font-family: webNanumGothic;
}

참고 사이트: wit.nts-corp.com/2017/02/13/4258

웹폰트 사용하기 (웹폰트의 모든 것) | WIT블로그

---

##5. Vertical-align (수직정렬)

vertical-align 속성을 이용해 수직정렬이 가능

※주의사항※

block요소가 아닌 inline 또는 inline-block에서만 사용이 가능함

따라서 display 속성이 변하지 않은 div, p와 같은 블록레벨 요소에는 적용되지 않음

 

<속성값>

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를 기준으로 내에서 이동하며 음수 값 사용 가능합니다.

 

---

 

##6. text-align (텍스트 정렬)

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

 

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

 

text-align과 display의 관계

text-align: inline-level에 적용 (block-level 적용안됨)

그럼 block요소를 가운데 정렬하고 싶으면 어떻게 해야 하나?

margin의 auto값 지정.

 

---

##7. text-indent (텍스트 들여쓰기)

문단 첫줄 들여쓰기, 음수 사용 가능

• length: 문단 첫 줄에 대한 들여쓰기 수행. 음수 값 사용가능하며, 음수 값 사용시 왼쪽으로 이동
• percent(%): 텍스트를 포함하는 컨테이너 블록의 width(부모의 width)를 기준으로 변환된 백분율 값으로 들여쓰기 한다.

 

---

##8. text-decoration

텍스트의 장식을 지정하는 속성

기본값: 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	물결 스타일

 

---

##9. 단어 관련 속성 (실무 값 기준)

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	모든 글자가 요소를 벗어나지 않고 강제로 개행