꿀단지

읽으면서 배우는 CSS, 폰트 설정

출처: Code Academy

1. 글꼴 변경

CSS를 통해 글꼴을 변경하는 방법, 어렵지 않습니다. 

아래 코드를 보면 글꼴과 관련되었기 때문에 'font-family' 를 사용해서 글꼴을 변경해 줍니다. 

출처: Code Academy

글꼴을 여러개 지정할 수 있는데 여러개를 지정하는 이유는 해당 서체가 없을 때 차선책으로 다음 글꼴을 사용하도록 해주는 것입니다. 가장 먼저 적은 것이 기본이며 해당 글꼴이 없을 경우 다음 글꼴로 표시 됩니다. 

2. 폰트 사이즈 변경

폰트 사이즈는 'font-size'를 통해 변경할 수 있습니다. 폰트 사이즈는 3가지 단위를 사용하는데 아래 그림과 같습니다. 실제로 사용하는 방법은 그 다음 그림과 같습니다. 

실제 사이즈를 적용하는 방법입니다. 

3. 줄 간격 변경

각종 문서 프로그램, 블로그 등에서도 줄 간격 설정이 가능합니다. CSS에서 줄 간격 설정은 'line-height'를 사용하여 가능합니다. 

실제로 line-height 값을 '1em' 과 '2em'을 줬을 때 차이를 보겠습니다. 

4. 단어 사이 간격

단어 사이 간격도 변경 가능합니다. 'word-spacing' 를 통해서 단어 사이 간격을 변경할 수 있습니다. 

여기서 단위도 줄 간격과 동일하게 'em'을 사용합니다. 사용 방법은 아래 그림과 같습니다. 

5. 글자 간 간격

글자 간 간격도 변경 가능합니다. 'letter-spacing' 를 통해서 글자 한자 한자 간의 사이 간격을 변경할 수 있습니다. 단어 사이 간격과 차이점은 단어 사이 간격은 각 단어 간 간격 즉, 스페이스바를 사용한 뒤 단어 간 간격을 말하는 것이고, 글자 간 간격은 한글자 한글자 간 간격을 의미합니다. 

6. 두껍게(볼드체)

폰트를 두껍게 나타내는 방법입니다. 강조할 때 사용하기도 하죠?  'font-weight'를 사용합니다. 

font-weight 다음에 올 수 있는 값은 bold와 숫자로 100, 200, 300 ... 900까지 사용할 수 있습니다. 

100은 thin 즉 얇은 글꼴, 200~400은 보통 두께, 500~900은 두꺼운 글자체를 의미합니다. 

7. Italic

기울여 쓰기를 하고 싶다면 font-style을 사용할 수 있습니다. 

8. 대문자, 소문자로 만들기

영문에만 해당하지만 모두 대문자나 소문자로 만드는 방법은 'text-transform'을 사용합니다. 

모두 대문자로 사용하려면 'uppercase'를 사용하고 모두 소문자로 사용하려면 'lowercase'를 사용합니다. 

9. 정렬

글자를 좌우로 정렬할 수 있는 기능 입니다. 'text-align' 을 사용하여 정렬하면 됩니다. 

사용하는 값은 'right', 'left', 'center'을 사용할 수 있다. 

읽으면서 배우는 CSS, 색상 변경하기

출처: Code Academy

CSS를 공부하는데 있어 가장 기본은 사용 법이다. HTML문 안에서 CSS를 어떻게 사용하는지 아래 그림을 보면 알 수 있다. 

출처: Code Academy

두 가지 link 사용이 나와있는데 각각 차이가 있다. 첫번 째 링크는 인터넷 상에 있는 주소를 직접 입력하여 CSS를 적용하는 것이고, 두 번째 방법은 직접 만든 CSS 파일을 가지고 적용하는 방법이다. 

이 글의 첫 이미지 처럼 selector를 지정하여 html 내에서 어떤 테그에 저 속성을 지정할지 정해야 한다. 그리고 그 뒤에는 적용하고자 하는 속성 즉 property를 지정해 폰트 크기, 사이즈, 배경 색깔, 배경 이미지 등을 지정할 수 있다. 속성 다음은 반드시 콜론( : ) 을 넣어 줘야하며 각각의 속성마다 세미콜론( ; )으로 마쳐야 한다. 

색상 변경하기

색상을 변경하는 방법에는 몇 가지가 있다. 색상 이름을 직접 입력 하는 방법, GRB 코드를 입려하는 방법, Hex 값을 입력하는 방법, HSL 값을 입력하는 방법 등이 있다.

1. 색상 이름을 직접 입력 하는 방법

색상을 직접 입력 할 수 있는 가지수는 무려 147개가 있다. 색상에 대해 입력 가능한 것을 보려면 아래 그림을 클릭 하면된다. 색상 위에 마우스를 올리면 해당 색상의 이름이 나온다. 

출처: Code Academy

2. Hex 코드를 입력하는 방법

위의 그림 처럼 입력해도 색상 값을 지정할 수 있다. # 뒤의 가장 앞의 두 자리는 red 값을, 중간 두 자리는 blue 값을, 가장 마지막 두 자리는 green 값을 나타내며 이 모든 값을 섞었을 때 색상이 최종적으로 나타난다. 

3. HSL 값을 입력하는 방법

hsl(Hue, Saturation, Lightness) 즉 색상, 채도, 명도로 볼 수 있는데 이 값을 입력해서 색상 값을 출력할 수 있다. 

Hue 값은 0 ~ 360 까지 입력이 가능하며 채도와 명도는 퍼센트로 입력한다. 

rgb나 hsl에 'a'를 붙이면 alpha 즉 투명도를 설정할 수 있는데 이 투명도는 0~1까지 값을 입력할 수 있다. 

투명도가 낮을 수록 유리창이 깨끗하다고 생각하면 된다. 투명도가 1이면 유리창이지만 뒤를 볼 수 없다고 생각하면 된다.