💛[부스트코스_웹 UI 개발] 6. 폰트, 텍스트

👾·2021년 1월 24일

UI boostcourse frontend

HTML & CSS

목록 보기

6/20

속성-typography

타이포그래피의 구조

Technology라는 문자열을 기준으로

소문자 x를 기준으로 그 밑의 기준점 라인이 baseline
소문자의 문자열 크기 ex
대문자와 소문자 중 아래로 뻗어나가는 문자열들의 영역의 크기 em
소문자 x를 기준으로 baseline밑으로 나오는 다른 영문자계열 하단의 부분들 : Descender 라인
소문자 x 상단 위쪽으로 em과의 사이의 거리 Ascender

문자열을 확인할때는 베이스라인을 확인하는것이 굉장히 중요하다
소문자 x를 넣어놓고 박스안에서 기준이 되는 문자열이 어디고 그 안에 여백이 어느정도, Descender 영역과 Ascender 영역이 있겠구나를 알고 있어야함.

속성- font-family

글꼴을 지정하는 속성

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

font-family 속성을 선언할때는 font-family name과 generic-family name을 보통 같이 선언한다.

generic-family
family-name으로 지정한 폰트가 사용자의 컴퓨터에 없을때를 대비해서 적절한 폰트를 선택할 수 있도록 몇가지 유형의 타입의 폰트를 같이 선언해주는것

폰트는 여러가지의 font-family name을 같이 선언할 수 있다.

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

: Helvetica라는 폰트를 가장 우선순위 높게 선언했기 때문에 Helvetica에 맞는 글꼴이 PC에서 지원을 하고 있다면 먼저 지원을 하고
없다면 그 다음 우선순위로 돋움을 두겠다.

돋움을 한글로만 선언하면 pc에 한글 글꼴을 인식하지 못할 수 있기 때문에 한글폰트의 경우 영문자를 반드시 같이 선언.

애플산돌고딕네오의 경우 ios계열에서 기본 글꼴. 근데 애플사의 버전업에 따라서 어떻게 달라질지 모를 일이기 때문에 이런 모바일 대응을 위해서 관련 속성을 선언하는 경우가 많다

항상 font-family의 마지막 값에는 generic-family를 선언

generic-family 종류

serif 명조체 계열. 삐침이 있는 글씨
sans-serif 꾸밈이 없는 돋움체 계열. 삐침이 없는 문자열
monospace 코드를 웹에서 볼 때 가로와 세로가 같은 문자열. 가독성이 코드적으로 읽을때 좋게 함
cursive
fantasy 둘다 꾸밈이 있는, 멋있는 폰트

폰트별로 지원범위가 다르기 때문에 generic-family를 넣음으로써 좀 더 지원율이 좋게 하는 의미이므로 generic-family는 중요

폰트별로 한글을 지원하는 폰트가 있고 아닌 경우가 있다

font-family에 따라서 인라인 박스가 차지하는 높이 값이 다르기 때문에
어떤 font-family를 기본으로 설정하는지에 따라서 각각 인식하는 기본 높이값이 달라진다.
그래서 정렬 할때 font-family가 중요한 역할을 한다.

기본적으로 body태그에다가 font-family를 대표적으로 기본 font-family를 선언해둔다.

font-family는 상속됨
모든 태그에 기본 대표 서체를 선언하는데 특정 부분에는 다른 서체로 적용하고자 할때 body에서 generic-family를 선언하고 재선언할 때 generic-family를 반드시 다시 한번 선언해야함.
generic-family는 세트로 선언을 해야한다.

속성 - line-height

줄간격을 의미

기본값은 normal

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

행간의 경우 number에 단위가 없는 숫자만 입력가능하다
고정값이 아닌 숫자만 입력할때는 font-size에 상속돼서 배수로 보일 수 있다

line-height의 영역은 em박스+상하단의 여백까지를 의미
px로 넣게 되면 폰트사이즈가 홀수/짝수일 수 있음. 17px, 18px
20px을 나눠서 넣을때 행간을 어떤식으로 계산할지는 브라우저마다 다름.
1, 1이나 2, 1 / 1, 2로 나눠서 넣을 수 있다
그래서 여러줄인 경우 브라우저마다 다르기 때문에 기준 브라우저를 확인하고 행간을 입력해야 한다.

normal인 경우 브라우저에 의존하게 되는데 거의 기본적으로 16px 정도가 기본값으로 선언된다

단위가 없는 숫자는 폰트사이즈에 대비해서 유동적으로 늘어난다
글자를 키울때 행간이 잘려서 나온다면 행간이 픽셀로 되어있을 가능성 높음
행간이 겹치지 않고 여백이 계속해서 커지면 단위가 없거나 상대단위로 되어있는것

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

글꼴의 크기를 결정

default값이 medium

x-small, absolute-size등으로 값이 들어갈 수 있는데 이런 값들은 브라우저마다 사이즈가 다르게 정의되어 있기 때문에 실무에서 잘 안쓰는편
실무에서는 여러 브라우저에서 동일한 화면을 제공해야 하기 때문에 이러한 절대적인 사이즈는 잘 사용하지 않는다

폰트 사이즈의 기본값을 미지정하면 글꼴의 기본크기는 16px. (1em)

속성- font-weight

글꼴의 굵기 지정

기본값은 normal

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

normal과 bold를 가장 많이 사용
strong태그의 경우 기본적으로 font-weight값이 bold를 갖고 있다
따라서 strong을 쓸때 normal로 표현하고 싶으면 font-weight:normal로 선언
lighter와 bolder는 부모 요소에 의존적이기 때문에 실무에서 많이 사용하지 않는다
실무에서는 부모 요소가 바뀌었을때 자식에게도 영향이 가는것들은 가급적 지양하면서 사용하고 있다
font-weight는 숫자로도 굵기 표현이 가능하다
normal = 400
bold=700
굵기의 수치는 100~900

폰트의 종류가 다양해서져서 굵기 자체를 font-family name으로 갖고 있는 경우가 있다. 이런 경우에도 font-weight로 조정가능

폰트에 따라서 ios나 안드로이드의 경우 굵기 차이가 존재
각각 디바이스 별로 지정하는 굵기도 조금씩 다름
font-weight를 넣어도 수치가 적용되지 않는다는건 그 해당 family에서 지원하지 않는것

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

font-family, font-size, font-weight 3가지가 연관성이 깊다
font-family 자체가 사이즈가 커지면 조금 더 굵게 표현하기 때문에 그럴때 수치를 조금 크게 조정하기도 한다.

속성- font-style

글꼴 스타일을 지정

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

em태그는 무언가 강조하고 싶을떄 사용하는데 태그 기본체가 이탤릭체.
강조도 하고싶고 normal로 표현하고 싶을때는 font-style을 normal로 선언가능하다.
italic과 oblique모두 사선으로 기울어지는데 oblique의 경우 각도를 추가해서 좀 더 기울임을 더 선언할 수 있다고 하는데 이것도 브라우저마다 지원율이 조금 더 다르기 때문에 일반적으로는 normal과 italic을 가장 많이 사용

속성- font-variant

글꼴 변환을 하는 속성

소문자를 작은 대문자 형태로 표현

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

small-caps : 소문자를 작은 대문자 형태로 바꿔주는 특징을 갖는 속성

속성-font

글꼴 속성의 축약형

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

실무에서 지양하는 속성
폰트에 대한 다양한 값을 포함하고 있어야하기도 하지만 각 속성마다 선언 순서를 지켜야 하는 제약이 존재.
그중에서도 font-size와 font-family는 반드시 선언해야 하는 필수 속성
이렇게 지켜야 할 룰이 많기 때문에 폰트 축약형을 좋아하지 않음

속성-webfont

웹폰트(@font-face)

실무에서 폰트 관련해서 쓰이는 명칭들이 있다.
시스템폰트, 이미지폰트, 웹폰트
폰트에 따라서 여러가지로 불리는 경우가 있음

시스템 폰트 : 우리가 폰트 패밀리로 선언한 그 글꼴이 선택되는 경우, 시스템 상에서 제공되는 값을 그대로 바꿀 수 있는 폰트를 시스템 폰트라고 통칭해서 부른다
이미지 폰트 : 이미지 자체를 잘라서 제공하는 폰트의 경우
ex) 네이버 로고
웹 폰트: 다른 글꼴을 서버에 저장해서 제공하거나 혹은 웹 경로를 가지고 와서 import해서 제공하는 폰트를 의미 혹은 사용자의 로컬 환경에 글꼴을 다운로드 받아 적용하는것.
ex) 네이버의 경우 나눔고딕을 설치해서 제공.
사용자가 설치하면 나눔고딕이 웹상에서 보이게됨.
설치형 폰트라고 할 수 있다.
- 설치형과 웹 폰트는 조금 유사
  웹 폰트는 최근 들어 클라이언트 단에서, 포털에서 제공하던지 경로를 따라서 제공하는것.

웹폰트의 경우 폰트 파일 자체를 웹에서 제공해주는것이기 때문에 여러 브라우저에서 나올 수 있도록 타입별로 여러가지 파일을 제공해주어야 한다.

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

body {
    font-family: webNanumGothic;
}

폰트 패밀리 자체도 @font-face로 따로 지정함
폰트 패밀리 이름을 내가 지었는데, 폰트 명에 대한 폰트 서체 글꼴 꾸러미를 src로 제공해주어야함.
그래야 body에다가 이 폰트를 썼을때 참조해서 해당 글꼴을 사용할 수 있다.
굵기에 대한 내용도 직접 선언가능

웹폰트의 경우 generic family가 없다
generic family에 대한 내용도 src에서 다 제공을 하고 있어야 하기 때문에 따로 선언을 하지 않을 수도 있다.

속성- vertical-align

vertical-align
수직정렬을 할때 사용하는 속성

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

기본이 baseline
baseline은 소문자 x를 기준으로 그 밑으로 위치한 값
이 값을 기준으로 vertical align이 이동
- baseline기준으로 px만큼 이동 가능
- %는 line-height을 기준으로 이동

주의)
vertical-align은 인라인 레벨에만 선언할 수 있기 때문에 인라인 요소 또는 테이블 셀 상자의 수직 정렬을 지정할때 사용한다.
대부분 부모 요소에 상대적으로 정렬된다.

x text

text라는 문자열이 나열될때 text는 line box라는 공간을 생성한다.
그리고 텍스트는 인라인 요소기 때문에 font-family, font-size, line-height등의 많은 영향을 받는다.
그럴떄 그 안에서 소문자 x를 기준으로 부모 요소가 폰트관련 속성을 선언
하면 그거를 이 x가 다 갖고 있음.
이때 x는 태그에 감싸져있지 않은 그냥 소문자 x 텍스트이고, text는 인라인 요소에 감싸진 텍스트라면 test에다가 vertical-aling을 선언할 수 있다.
그럼 text의 vertical-align값을 keyword들로 바꿀떄 x와 라인 박스안에서 기준을 가지고 왔다갔다 하는것

ex) vertical-algin:middle;
-> 부모 요소가 갖고있는 자식 소문자 x의 중간지점에 버티컬 얼라인을 선언한것.
소문자 x가 기준이다!

속성 - text-align

텍스트를 정렬할 때 사용하는 속성

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

보통은 기본값이 direction이 ltr로 되어있기 떄문에 left.
아랍어등은 오른쪽에서 부터 읽힘. 그럴때는 rtl로 선언하기 때문에 right가 기본값

left : 요소의 왼쪽 정렬
right: 요소의 오른쪽 정렬
center : 요소의 가운데에 정렬
justify : 양끝 정렬. 따라서 해당 줄이 잔뜩 늘어남

text-align을 적용할때 주의할 점
이 속성은 블록요소에다가 선언하게 되면 블록요소 안에 있는 인라인 요소들의 정렬을 정의하는것
인라인 레벨에 적용. 블록레벨에 적용할 수 없음
선언은 블록레벨에 하고 있지만 텍스트 얼라인은 인라인 레벨에 적용이되는것

블록 레벨을 텍스트 얼라인으로 정렬할 수 없다
= div자체가 화면에서 가운데 정렬로 오는게 아니라 div 요소 안에 있는 인라인 레벨의 텍스트에 적용이 돼서 div 요소 안에 있는 요소들이 가운데 정렬이된다. 그것도 인라인 레벨들만 가운데 정렬이 된다.
div자체를 영역의 가운데에 위치하고 싶으면 margin:0 auto; 사용

따라서

블록레벨요소를 정렬 : margin:0 auto; 사용
인라인 레벨요소 정렬 : text-align 사용

속성 - text-indent

텍스트를 들여쓰기 할 떄 사용하는 속성

text-indent: length | initial | inherit;

값으로 length 선언가능
-> 문단의 첫줄 들여쓰기, 음수 가능

default값은 0
상속 됨
값을 양수나 음수로 선언할 떄 자식요소들이 상속이 될 수 있기 떄문에 주의해서 선언
length, %값으로도 선언가능하다

속성 - text-decoration

텍스트의 장식을 선언할때 사용하는 속성

기본값은 none

text-decoration: text-decoration-line text-decoration-color text-decoration-style | initial | inherit;

속성값
overline, underline, line-through등

color의 기본값은 solid 실선.

overline : 텍스트의 위쪽으로 라인 생김
line-through : 텍스트 가운데로 취소선처럼 보임
underline : 텍스트 아래쪽으로 라인 생김
두개의 값을 멀티로도 선언가능

선은 텍스트에 의존적이기 때문에 선을 1px내리고싶다, 올리고싶다고 할때 그 상세한 픽셀값은 속성값으로 조절이 불가능하다.
이럴때는 다른 css속성을 활용해서 마치 text-decoration처럼 꾸며주는것
기본적으로, 시스템적으로 표현할떄는 text-decoration을 사용한다.

속성 - 단어관련 속성

white-space
공백관련해서 제어할 수 있는 속성

기본값은 normal
실무에서 가장많이 사용하는 속성은 nowrap

normal: 텍스트들이 자동으로 영역안에서 줄바꿈됨
nowrap : 공백이 무시되면서 한줄로 쭉 넘쳐흐른다.
화면을 볼떄 맨끝의 영역에 ... 말줄임될떄 nowrap 사용
공백을 무시하는 원리로 말줄임을 표현
pre
공백과 개행을 표현하고, 자동 줄바꿈이 일어나지 않음.
pre-line
공백은 무시하고, 개행만 표현. 필요한 경우에 자동 줄바꿈 발생.
pre-wrap
개행은 무시하고, 공백만 표현. 필요한 경우 자동 줄바꿈 발생.

letter-spacing
자간

기본값 normal

상속이 되는 값. 선언할떄 주의
값을 픽셀단위, 다른 단위로도 length값으로 선언가능
음수값도 가능. 폰트에 따라서 자간이 큰 경우도 있어서 음수값으로 압축시키기도 한다.
- 너무 많이 압축시키면 겹쳐 보일 수 있으므로 주의
- 폰트마다 엄청 크고 굵은 폰트의 경우 자간이특히 더 긴 경향이 있다. 그럴떄 음수로 해줄 수 있다.

word-spacing
단어간의 간격 조정

기본값 normal
음수 가능
다른 단위일떄도 가능

word-break
단어를 어디서 자를지에 대한 속성

상속됨
자주 사용. 기사 내용등을 어떻게 끊을지
단어하나가 엄청 긴 경우 이 단어를 그 영역안에서 어떻게 자를것인지
영어 대륙별, 한글별로 언어가 다름. 이들간에 차이 존재

word-wrap
영역 바깥으로 넘어가는 텍스트를 어디서 자를지, 어디서 감싸줄지에 대한 내용

word-break와 조합해서 사용하기도 함
기본값은 normal
word-break와 word-wrap은 같이 썼을때 조합에 따라서 굉장히 많이 달라진다

텍스트나 폰트 관련된 속성들이 그 값을 상속하는 경우가 굉장히 많다
박스모델, 레이아웃 관련 속성들은 상속 잘 안됨

👾

이전 포스트

💛[부스트코스_웹 UI 개발] 5. 단위, 배경, 박스모델

다음 포스트