CSS속성(5) - 투명도(opacity) & 글꼴(font) & 문자

투명도(opacity)

opacity는 요소의 투명도를 지정하는 속성입니다.

opacity는 1란 기본값(불투명)이 들어 있으며,

0부터 1 사이의 소수점 숫자를 지정해서 요소의 투명도를 결정할 수 있습니다.

 

opacity는 0에 가까울수록 더 투명합니다.

 

글꼴(font)

font-style는 글자의 기울기를 지정하는 속성입니다.

font-style는 normal란 기본값(기울기 없음)이 들어 있으며,

italic(이텔릭체), oblique(기울어진 글자) 값도 있습니다.

 

font-weight는 글자의 두께(가중치)를 지정하는 속성입니다.

normal, 400란 기본값(기본 두께)이 들어 있으며,

bold, 700(두껍게), bolder(부모 요소보다 더 두껍게), light(부모 요소보다 더 얇기),

100~900(100단위의 숫자 9개, normal과 bold이외 두께) 값도 있습니다.

 

font-size는 글자의 크기를 지정하는 속성입니다.

font-size는 16px인 기본 크기가 있으며,

px, em, rem등 단위로 지정할 수 있습니다.

%를 사용하면 부모 요소의 폰트 크기에 대한 비율로 지정됩니다.

smaller는 부모 요소보다 작은 크기고 나타나고,

larger는 부모 요소보다 큰 크기고 나타납니다.

xx-small ~ xx-large는 가장 작은 크기 ~ 가장 큰 크기까지,

7단계의 크기를 지정합니다.

 

line-height는 한 줄의 높이, 행간과 유사합니다.

line-height는 normal란 기본값(브라우저의 기본 정의를 사용)이 들어 있으며,

숫자(요소의 글꼴 크기의 배수로 지정) 값도 있습니다.

 또한 px, em, rem등 단위로 지정할 수 있습니다.

%를 사용하면 요소의 글꼴 크기의 비율로 지정됩니다.

 

font-family는 글꼴(서체)를 지정합니다.

위에 예시처럼 font-family에서 띄어쓰기 등

특수문자가 포함된 글꼴 이름은 큰 따옴표로 묶어야 합니다.

글꼴계열은 필수로 작성해야 합니다.

 

글꼴1, 글꼴2는 폰트 후보로 생각하시면 됩니다.

브라우저가 글꼴1부터 적용 시도하고

용량이 너무 크거나 다른 이유로 글꼴1 사용할 수 없을 때 글꼴2를 시도합니다.

끝까지 해보고 안 되면, 마지막인 글꼴계열에 있는 아무 폰트를 적용하라는 뜻입니다.

그래서 글꼴계열은 반드시 작성해야 됩니다.

 

폰트 이름 중 띄어쓰기 있으면 큰 따옴표로 묶어줘야 합니다.

띄어쓰기 없으면 큰 따옴표 없이 작성해도 됩니다.

 

	serif	바탕체 계열
	sans-serif	고딕체 계열
	monospace	고정너비(가로폭이 동등) 글꼴 계열
	cursive	필기체 계열
	fantasy	장식 글꼴 계열

이 중 sans-serif 를 가장 많이 사용됩니다.

 

 

문자

color는 글자의 색상을 지정하는 속성입니다.

rgb(0, 0, 0)란 기본값(검정색)이 들어 있으며,

기타 지정 가능한 색상도 적용될 수 있습니다.

 

text-align는 문자의 정렬 방식을 지정하는 속성입니다.

left란 기본값(왼쪽 정렬)이 들어 있으며,

right(오른쪽 정렬), center(가운데 정렬), justify(양쪽 정렬) 값도 있습니다.

 

text-decoration는 문자의 장식(선)을 지정하는 속성입니다.

none란 기본값(장식 없음)이 들어 있으며,

underline(밑줄), overline(윗줄), line-through(중앙선) 값도 있습니다.

 

text-indent는 문자 첫 줄의 들여쓰기를 지정하는 속성입니다.

0란 기본값(들여쓰기 없음)이 들어 있으며,

px, em, rem등 단위로 지정할 수 있습니다.

%를 사용하면 요소의 가로 너비에 대한 비율로 지정됩니다.

* 음수를 사용할 수 있습니다!