CSS font/line-height/float/clear

font

font: 기울기 두께 크기 / 줄높이 글꼴;

 

font-style

• 글자 기울기 지정

• normal, italic, oblique

 

font-weight

• 글자 두께 지정

• normal, bold, bolder, lighter, 숫자

• 400이 normal

• bolder나 lighter는 부모요소에서 상속 받은 값에 따라서 계산이 됨

• bolder는 400~900

• lighter는 100~700

• 숫자 값과 두께가 불일치 했을 때, 근사값과 비교하면서 가장 유사한 두께를 선택함

 

font-size

• 글자 크기 지정

• %: 부모 요소의 비율로 지정

• 단위: px, em, rem 등

line-height

• 줄 높이 지정

• normal, 숫자, 단위, % 등을 사용함

• 숫자만 적으면 요소 자체 글꼴 크기의 배수로 지정이 됨

• 1.4~ 1.7 정도의 배수를 주로 많이 사용함

 

font-family

• 글꼴 지정

• 글골이름(serif, sans-serif, monospace, cursive, fantasy)

• font-family: 후보1, 후보2, 글꼴계열;

 

문자 관련 속성

color: 문자의 색상을 지정

 

색상 표현법

• 색상이름, Hex 색상코드, RGB, RGBA(투명도까지 지원), HSL, HSLA(투명도까지 지원)

 

text-align

• 문자 정렬 방식을 지정

• left, right, center, justify

 

text-decoration

• 문자의 장식을 설정

• none, underline, overline, line-through

 

text-indent

• 들여쓰기 지정, 음수값을 사용할 수 있음

• 텍스트를 화면 밖으로 밀어낼 때 text-indent: -9999px;를 사용

 

letter-spacing

• normal, px, em, cm 등

• 글자 간의 간격을 설정

 

word-spacing

• 단어와 단어 사이의 간격 설정

• normal, px, em, cm

 

float

• 요소를 좌우 방향으로 띄움(수평 정렬)

• (요즘은 float보다는 flex-box를 이용함)

• none, left, right

• float: 방향;

• float은 기본적으로 공중에 떠있음

• 차곡차곡 정렬되는 것임

• float을 적용한 다음 요소에서 clear: both(방향);을 추가하면 됨

• float은 형제 요소에서 해제가 가능함

• 부모요소에서 overflow 추가

• 부모요소에서 가상요소로(::after) clearfix값을 clear: both;로 설정을 해놓음

• clearfix가 있는 요소의 자식에는 float이 있는 애들만 와야 함

• display를 수정함

• float 속성이 추가된 요소는 display속성의 값이 대부분 block으로 수정됨

• 요즘은 flexible 박스를 이용해 수평정렬 함

 

clear

• float 속성이 적용되지 않도록 지정

• none, left, right, both