2일차 : CSS display, overflow, line-height, font-family, 색상

Display

block과 inline은 설명 생략.

inline-block은 inline이지만 block처럼 크기를 가질 수 있고 패딩. 마진값을 가질 수 있게 한다.

 

 

Overflow

기본값은 visible. 넘친 부분을 자르지 않고 그대로 보여준다.

hidden : 넘친 부분 잘라내고. 보이지 않게 한다.

scroll : 넘친 부분 잘라내고. 스크롤 내리면 볼 수 있다.

auto : 넘친 부분이 있을 때만 잘라내고. 스크롤 내리면 볼 수 있다. (넘치지 않으면 스크롤이 없다.)

 

 

Line-height

값 자체를 명시해줄수도 있지만 폰트 크기에 비례해서 2배 커지고 싶다고 하면 단순하게 lineheight: 2; 를 적어주면 된다.

일반적으로 1.4 ~ 1.7 배수 정도를 추천한다.

 

 

Font-family

font-family: Arial, "Open Sans", "돋움", dotum, sans-serif;

이렇게 있다고 하면 Arial부터 dotum까지 글꼴후보이고 이 글꼴 후보들 중에서도 해당 컴퓨터에 아무 폰트도 없다면 sans-serif를 통해서 브라우저에게 동일한 계열의 폰트를 넣어달라고 요청한다.

 

계열에는 5가지가 있다.

serif : 바탕체 계열

sans-serif : 고딕체 계열

monospace : 고정너비(가로폭이 동등한) 글꼴 계열

crsive : 필기체 계열

fantasy : 장식(재미있는 문자 포함) 글꼴 계열

일반적으로 sans-serif가 많이 사용 된다.

 

색상 표현