[부스트코스] 웹 UI 개발 : 폰트, 텍스트

1) 속성- typography

타이포그래피의 구조

• em : 폰트의 전체 높이
• ex ( = x-height) : 해당 폰트의 영문 소문자 x의 높이를 의미
• Baseline : 소문자 x를 기준으로 하단의 라인을 의미
• Descender : 소문자에서 baseline 아래로 처지는 영역을 의미
• Ascender : 소문자 x의 상단 라인 위로 넘어가는 영역을 의미

 

 

2) 속성 - font-family

font-family 속성

• 글꼴을 지정하는 속성
• family-name : 사용할 폰트의 이름으로 ','로 구분하여 여러개 선언 할수 있음, 먼저 선언된 순서대로 우선순위가 결정 됨
• generic-family : family-name으로 지정된 글꼴을 사용할 수 없는 경우를 대비해 브라우저가 대체할 수 있는 폰트가 있는 경우 선택 할 수 있게 해 줌

font-family: family-name | generic-family ( | initial | inherit );

 

3) 속성 - line-height

line-height 속성

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

• normal : 기본 값으로 브라우저의 기본 속성을 따름
• number : font-size를 기준으로 설정한 숫자만큼 배율로 적용
• length : px, em 등 고정 수치로 할당 할 수 있음
• % : font-size를 기준으로 퍼센트 만큼 배율로 적용

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

 

4)속성 - font-size

font-size  속성

 

• 글꼴의 크기를 지정하는 속성

• keyword : medium(기본 값), xx-small , x-small, small, large, x-lalrge, xx-large, smaller, larger
• length : px, em 등 고정 수치로 지정
• % : 부모 요소의 font-size 기준의 퍼센트로 지정
• absolute size (keyword) : 기본 값인 medium에 대한 상대적인 크기로, 브라우저마다 사이즈가 다르게 정의
• relative size (keyword) : 부모 요소의 font-size 크기에 대해 상대적
• length : px, em, rem 등의 단위를 이용하여 고정된 크기를 지정할 수 있음
• percent (%) : 부모 요소의 font-size를 기준으로 백분율 계산된 값을 지정할 수 있음
• viewport units : vw, vh 단위로 뷰포트를 기준으로 하여, 유동적인 font-size를 지정할 수 있음

 

 

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

 

 

5) 속성-font-weight

font-weight  속성

• 글꼴의 굵기를 지정하는 속성

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

6) 속성 -font-style

font-style  속성

• 글꼴의 스타일을 지정하는 속성

• normal : font-family 내에 분류된 기본 값
• italic : italic 스타일로 표현
• oblique : oblique 스타일로 표현

 

7) 속성 - font-variant

font-variant  속성

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

• normal : 기본 값
• small-caps : 소문자를 작은 대문자로 변형

 

8) 속성- font

font 속성

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

• 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-fmaily : font-family 지정
• font-size와 font-family는 반드시 선언해야 하는 필수 속성
• 빠진 속성은 기본 값으로 지정
• 선언 순서를 지켜야 함

 

9) 속성 - 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;
}

 

10) 속성-vertical-align

vertical-align 속성

• 요소의 수직 정렬을 지정하는 속성

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

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

 

11) 속성-text-align

text-align 속성

• 텍스트의 정렬을 지정하는 속성

• 기본 값은 left
• left : 텍스트를 왼쪽으로 정렬
• right : 텍스트를 오른쪽으로 정렬
• center : 텍스트를 중앙으로 정렬
• justify : 텍스트를 라인 양쪽 끝으로 붙여서 정렬

text-align과 display의 관계

• text-align은 inline-level에 적용

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

 

12) 속성-text-indent

text-indent 속성

• 텍스트의 들여쓰기를 지정하는 속성

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

text-indent: length | initial | inherit;

 

13) 속성-text-decoration

text-decoration 속성

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

• 기본 값 : none currentColor solid
• text-decoration-line : 텍스트 꾸밈의 종류를 지정하는 속성
• none : 텍스트 꾸밈을 생성하지 않음
• underline : 밑줄로 꾸밈을 설정
• overline : 윗줄로 꾸밈을 설정
• line-through : 중간을 지나는 줄로 꾸밈을 설정

 

14) 속성-단어 관련 속성

white-space 속성

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

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

letter-spacing 속성

• 자간을 지정하는 속성

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

word-spacing 속성

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

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

word-break 속성

• 단어가 라인 끝에 나올 경우 어떻게 처리할지 지정하는 속성

• 기본 값 : normal
• normal : 중단점은 공백이나 하이픈
• break-all : 중단점은 음절, 모든 글자가 요소를 벗어나지 않고 개행
• keep-all : 중단점은 공백이나 하이픈

word-wrap속성

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

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

 

<해당 포스트는 교육 목적을 위해 '부스트코스'의 강의를 듣고 강의자료를 개인적으로 정리한 것으로 모든 내용의 출처와 저작권은 부스트코스에 있습니다.>