네이버 부스트코스 CSS 폰트, 텍스트

 

 

 

typography

 

출처: https://www.boostcourse.org/cs120/lecture/92921?isDesc=false

 

x를 기준으로 꽉 차는 부분이 ex,

폰트 전체의 영역 em.

x를 기준으로 하단 라인이 baseline,

baseline 밑의 영역이 descender이다.

반대로 x보다 위의 영역은 ascender.

 

 

 

font-familiy

 

글꼴을 설정하는 font-familiy,

familiy-name과 genetic-familiy를 이용해야 한다.

family-name의 경우 사용할 글꼴을 말하는데

반점으로 구분해주고 먼저 표기될 글꼴 먼저 선언한다.

만약 표기한 글꼴이 나오지 않을 때를 대비하여

genetic-familiy를 설정한다.

태그의 가장 마지막에 작성하고 

대표적으로 sans-serif와 serif가 있다.

 

 

serif는 삐침이라는 뜻이다.

명조체처럼 끝이 삐친 글자이면

serif 체이고,

sans는 없다는 뜻이기에

sans-serif는 삐침이 없는 글자이다.

 

 

만약 자식 요소에서 font-familiy를 재 선언하면

부모 요소에 genetic-familiy가 선언되어있어도

꼭 다시 설정해주어야 한다.

 

 

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

 

여기서 helvetica로 한국어 설정이 안 된다고 치면

다음 폰트인 돋움체로 나타난다. (한국어만)

돋움이라고 하면 한국어 설정이 안 되어 있는 곳에서는

인식이 안 되기 때문에

꼭 영문명도 작성해주도록 한다.

 

 

 

line-height

 

 

행간의 간격을 줄 때 우리는 글자와 글자 사이를

조절한다고 생각할 수 있다.

그러나 글자 전체 크기인 em과 위아래의 여백을

합친 크기만큼 제어되는 것이다.

 

 

행간을 20px로 줬을 때

em의 크기가 17px과 18px이라고 생각해보자.

짝수는 18px의 경우 위아래로 1px씩 주면

20px로 잘 나누어 떨어진다.

하지만 17px은 짝수인데 이 경우는 어떻게 해야 할까?

 

 

사이트마다 다르게 표현된다.

한 사이트는 상단을 2px, 하단을 1px로 주기도 하고

다른 사이트는 하단을 2px, 상단을 1px로 주기도 한다.

따라서 사이트의 속성을 잘 살펴보아야 한다.

 

 

 

font-size

 

폰트의 사이즈에는 다양한 값이 있다.

xx-small, x-small, small, 등의 키워드를 입력하거나

px, em 등의 고정 수치를 입력하는 방법이 있으며,

부모 요소의 크기를 기준으로 설정하는 %가 있다.

 

 

 

font-weight

 

weight를 이용해 글꼴의 굵기를 변경할 수 있다.

가장 기본값인 normal은 400,

두꺼운 bord는 700으로 설정된다.

bolder나 lighter처럼 부모 요소에 따라 글꼴 크기가 달라지는

요소들도 있지만 사용을 지양한다고 한다.

조금 더 다양한 숫자와 양식을 통해

글꼴 크기를 조절할 수 있었다.

 

 

 

font-style

 

폰트 스타일에는 narmal, italic, oblique가 있었다.

italic의 경우 우리가 잘 알고 있는 이탤릭체로

기울어진 형태인데 처음에는 oblique와 차이를 알 수 없었다.

oblique도 기울임꼴으로 그냥 보면 비슷해 보이기 때문이다.

그러나 oblique의 경우 조금 더 추가해서 적으면

각도에 따라 기울임의 정도가 달라진다고 한다.

 

 

 

font-variant

 

소문자를 작은 대문자로 변경할 수 있다.

 

소문자로 설정한 글에

 

P{font-variant: small-caps;}

variant를 이용하면

 

작은 소문자로 바뀐다.

확연하게 티는 안 나서 진짜 대문자로 앞 글자만 바꾸어보았다.

 

같은 대문자임에도 크기 차이가 꽤 난다.

 

 

 

font 축약형

 

위에 설명한 내용들을 축약형으로 작성할 수 있다.

 

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

 

이 형식으로 말이다.

하지만 순서에 맞게 적어야 함은 물론이고

font-size와 font-family는 반드시 설정해야 한다.

잘 사용은 하지 않는다고 한다.

 

 

 

webfont

 

 

웹에 있는 글꼴을 컴퓨터로 다운하여 사용할 수 있다.

font-familiy를 통해 글꼴의 이름을 정해주고

src를 통해 경로를 적어주어야 한다.

경로는 필수로 적어야 한다.

 

 

 

 

vertical-align

 

 

수직정렬을 설정할 수 있다.

양수나 음수를 사용해 이동시킬 수 있고

% 나 키워드를 이용해서 이동시킬 수도 있다.

 

 

baseline을 기준으로 움직이는데

부모 요소에 따라 달라지는 경우에는

부모 요소의 x를 기준으로 옮겨진다.

따라서 middle의 경우 딱 중간에 옮겨지는 것이 아니라

부모요소의 x를 기준으로 중간에 위치하게 된다.

 

 

 

 

text-align

 

텍스트를 정렬한다.

기본값은 left이다.

한글이나 영어 같은 경우에는 왼쪽에서 오른쪽으로 읽히기에

기본값이 left이지만

아랍어 같은 경우에는 반대이기에

기본값이 right이다.

 

 

text-align은 인라인 요소를 정렬한다.

박스를 만들고 그 안에 텍스트가 있다고 하면

텍스트가 정렬되는 것이지

상자가 움직이는 것은 아니다.

상자를 가운데 정렬하려면 

margin: 0 auto;로 설정해야 움직인다.

 

 

left와 right는 텍스트를 왼쪽, 오른쪽으로 정렬하고

center는 텍스트를 중앙으로 정렬한다.

justify는 라인 양쪽 끝으로 딱 붙여서 정렬한다.

 

 

 

 

text-indent

 

 

들여 쓰기를 설정할 수 있다.

px나 em을 이용하거나 %를 사용할 수 있다.

음수 값도 가능하다.

 

 

 

text-decoration

 

텍스트에 장식을 할 수 있다.

text-decoration-line 속성을 이용하면 글에 줄 효과를 주는데

밑줄, 윗줄, 중간줄이 있다.

 

h1{text-decoration-line:overline;}
h2{text-decoration-line:underline;}
h3{text-decoration-line:line-through;}
h4{text-decoration-line:overline underline line-through;}

 

 

text-decoration-color를 통해 줄의 색을 바꿀 수 있고

text-decoration-style을 통해 선의 스타일을 바꿀 수 있다.

 

solid:기본값 한 줄

double:이중선

dotted:점선

dashed:파선

wavy:물결

 

 

 

단어 관련 속성

 

 

white-space 속성을 이용해 단어의 공백을 설정한다.

 

 

기본값은 normal로 공백과 개행을 무시하고 자동 줄 바꿈을 한다.

nowrap은 공백과 개행을 무시하는 것은 같지만 자동 줄 바꿈은 하지 않는다.

pre는 공백과 개항을 표현하고 자동 줄바꿈은 하지 않는다.

pre-line은 공백은 무시하고 개항만 표현한다. 필요한 경우 자동 줄 바꿈 한다.

pre-wrap은 공백만 표현하고 개행은 무시한다. 필요한 경우 자동 줄 바꿈 한다.

 

 

letter-spacing이나 word-spacing을 하면

간격을 지정할 수 있다.

letter-spacing의 경우 글자 사이의 간격을 조절하는

자간 조정이 가능하고

word-spacing의 경우 단어 사이의 간격을 조절한다.

둘 다 음수 값이 가능하다.

 

 

 

단어가 라인 끝에 나올 경우 어떻게 처리할지는

word-break 속성으로 설정할 수 있다.

 

normal의 중단점은 공백이나 하이픈(CJK는 음절)

break-all의 중단점은 음절.

keep-all의 중단점은 공백이나 하이픈(CJK는 그 외 기호도 포함)

*cjk는 중국, 일본, 한국어를 말한다.

이라는데 당체 무슨 말인지 이해하기 어려웠다.

 

 

그래서 예시를 캡처했다.

 

normal과 keep-all은 띄어쓰기에 따라 다음 줄로 넘겼지만

오히려 띄어쓰기를 하지 않은 첫 줄은 선을 침범하여 작성되었다.

그러나 break-all의 경우 테투리 선 안에서 작성되었음을 볼 수 있다.

 

 

word-wrap을 이용하면 

요소를 벗어난 단어를 줄 바꿈 설정할 수 있다.

기본값인 normal은 중단점에서 개행하고

break-word는 요소를 벗어나지 않고 개행한다.

 

 

 

이것도 무슨 뜻인지 감이 안 왔는데

break word 즉, 단어를 부순다는 것.

예시를 보면 긴 단어가 부서져서 

아랫줄로 내려간 모습을 볼 수 있다.

그렇게 생각하면 되려나...?

 

 

 

 

 

font 강의는 비교적 빠르게 끝났다.

그럼 다음 강의를 향해...!