[인프런/생활코딩] 섹션3. 서체 다루기_font-size? color? text-align? font-family, font-weight, line-height, font-property, web font?????

1. 크기 : font:size (타이포그래피)

 

CSS 속성 중 가장 많이 사용되는 건 ‘font:size’이다.

겁나 쉬운데, 어려운 게 하나 있다. 그것이 바로 ‘단위(Unit)’이다.

종류도 다양한데, 우리가 관심 가질 것은 px(픽셀)와 em, rem이다.

세가지의 차이점은 상대적이냐 절대적이냐의 차이. 즉, 픽셀은 우리가 지정한 폰트의 크기가 딱 고정되어 있다. 그러나, em이나 rem은 사용자가 브라우저의 설정을 바꾸면 그에 맞게 폰트 크기가 달라지게 된다. 그럼 이중 누굴 써?? 케바케지만, 결론적으로 오늘날엔 ‘rem’을 쓴다. 라고 생각.

 

※ 픽셀과 rem의 차이점. ★

1) 사용자가 브라우저의 글꼴 크기를 키우면, px은 무반응 / rem은 바뀐다.

이렇게 코드를 설정하고

웹페이지에서 설정을 통해 폰트 사이즈를 줄이면

px 는 그대로 , rem 은 작게  변한 것을 확인할 수가 있다 .

 

크기를 고정시키는 게 필요한 경우에만 px을 사용하고! 그렇지 않은 대부분은 rem을 사용해주자. 시각적으로 불편한 분들은 잘 안 보이실테고 등 사용자의 편의를 위해서!!

 

2. 색상 : color (타이포그래피)

★ 원하는 컬러를 지정하는 방법 : 1) color name 적는 법 2) hex 3) rgb(red, green, blue)

1+2+3) https://www.w3schools.com/cssref/css_colors.asp

CSS Colors

위 사이트 참조하면 색상 다양하게 코드별로 나옴.

원하는 색상 클릭하면 16진수(hex)랑 rgb에 따른 코드들 다 나오니까 걱정말고

정석으로 배운다면 16진수에 대해서도 알아야 하지만, 우린 뉴비니까 나중에. (응애 나 애기)

내가 가장 좋아하는 색의 rgb는 rgb(47, 79, 79) / 16진수는 #2F4F4F

이름은 DarkSlateGray

 

3. 정렬 : text-align (타이포그래피)

예시를 들 때, 마땅한 게 없으면 구글에 ‘Lorem Ipsum’ 검색.

나는 여기 사용함 : https://loremipsum.io/

Lorem Ipsum – Generator, Origins and Meaning

 

원하는 단락 숫자 적고 generate 누르면 그에 맞게 의미 없는 문장들이 생성됨.

 

★ 강의 내용에 따라,

 

p{ text-align: left; border:1px solid gray; } 설정 시, 결과물

여기서 text-align:left; 또는 center; right;로 지정하면 그에 맞게 컨텐트에 빈 공간이 생성된다. 만약, 빈 공간이 꼴 보고 싫으면 text-align:justify; 라고 적어주자!! 그럼 빈 공간없이 매끄럽게 문장이 양쪽으로 정렬된다. ★ 다만, justify의 원리는 글자와 글자 간의 간격을 넓힘으로써 컨텐트의 외곽의 빈 공간을 없애주는 것이다.

 

4. 서체 : font-family, font-weight, line-height (타이포그래피)

처음으로 배운 ‘font-size’보단 덜 중요하지만 그래도 알아두면 좋은 것들에 대해 배워보자.

 

1) font-family (글꼴 지정)

2) font-weight (폰트의 두께 지정)

3) line-height (글자의 행과 행 사이의 간격 조정)

이러한 것들을 축약해서 표현하는 ‘font-property’까지 알아볼 것이다!

 

1) font-family (글꼴 지정)

arial이란 폰트가 사용자에게 없을 수도 있으니 콤마(,) 쓰고 verdana, 또 없으면 helvetica neue 적자. 근데 헬베티카처럼 이름에 띄어쓰기가 있는 애들은 구분해주기 위해 꼭 큰 따옴표(“ ”)로 묶어주자!!!! ★ (즉, 사용자가 없는 폰트를 쓰면 폰트가 깨질 수도 있으니까) 즉, 다음 그림과 같이 적혀 있다는 것을 읽어보면 무슨 말이냐면

사용자에게 폰트 아리알이 없으면 버다나로 읽히고 또 없으면 헬베티카로 글꼴이 설정될 것이다.

그래서 비슷한 폰트들을 우선순위에 따라 더 선호하는 걸 먼저 보여주려고 이렇게 설정한 것.

그리고 마지막엔 이런 정보를 꼭 적어주어야 한다! ★ (쓰기 전에 폰트 앞에도 콤마가 꼭 쓰여야 하고 당연히 CSS영역이니까 마지막에 새미콜론도 와야제!! 그니까, arial, verdana, "Helvetica neue", sans-serif; 이런식으로 쓰라고! ) ★

serif 혹은 sans-serif // 뭔 차이? : serif는 밑의 그림처럼 저런 장식이 있는 형태이고, sans가 붙은 것은 없다는 의미.

★ 그림 참조 : https://opentutorials.org/course/2418/13362

서체 - 생활코딩

2) font-weight(폰트 두께)

만들어 놓은 p에다가 추가로 font-weight:bold; 하게 되믄, 글씨가 굵어진다. 그 정도만 알면 돼.

 

3) line-height(폭의 간격)

기본값이 1.2배이기 때문에 line-height:1.2; 해도 차이가 나지 않는다잉!

이 값을 픽셀로 바꾸면 아까 배웠듯, 폭의 간격이 고정되기 때문에 픽셀값은 웬만하면 쓰질 말자.

 

4) font-property

: 새로운 형태가 아니고 우리가 차례대로 폰트 사이즈~라인 하이트까지 적어주면 너무 복잡해 보이니까 나열하는 형태라고 생각.

★ 요 그림 순서대로 나열해주면 된다.

★ 순서가 잘 안 보이니 여따 다시 적어야 쓰겄다.

font: font-style font-variant font-weight font-size/line-height font-family|caption|icon|menu|message-box|small-caption|status-bar|initial|inherit; 

 

어떻게?

다음과 같이! (라인-하이트는 슬래시(/)를 써줘야 하네.)

이렇게 간결하게 표현할 수 있다잉!

기존에 만든 방식과 Property를 구분하기 위해서 이렇게 만들 수도 있다잉!

보이듯 id 속성값 type1으로 설정한게 처음에 하나 하나 나열한 것id 속성값 type2로 설정한건 font-property 방식! ★★★

5. 웹 폰트(Web font)_타이포그래피 (지금 들어도 되고, 나중에 들어도 되고, 난 정리만 해놓아야지!)

: font-family에서 배웠듯, 사용자가 폰트가 없어서 글씨가 깨지는 경우, 사용자의 웹 브라우저가 없는 폰트를 다운로드해서 사용할 수 있도록 하는 것을 ‘웹 폰트’라 한다.

 

※ 문제점

1) 폰트의 용량(영문은 상관없으나, 국문은 상당히 방대하기에)

이걸 해결해주는 구글의 무료 폰트 서비스( 참조 사이트 : https://fonts.google.com/ ) ★ 

강의 보면서 따라하기 ( 출처 : opentutorials.org/course/2418/13372 )

이렇게 표현해줄 수 있다잉!!

--

웹 브라우저는 <link>라는 태그를 만나믄 href 속성에 해당하는 파일을 다운로드 받는다.

그리고 이 파일을 css 문법에 따라 해석하여 저 파일 안에 있는대로 동작.

(솔직히 무슨 소린지 모르겠으니, 그냥 따라 해보면 짜잔~ 마법처럼 된다. 라고 생각)

 

만약, 한국어 폰트가 없으믄 구글에 web font generator 검색

 

웹 폰트는 한번 따라해보기만 했고, 나중에 필요에 의하면 다시 이해해보도록 할 예정이다.