display

block

• div, h1~h6, p, ol, ul, li, hr, table, form

• 항상 다음 라인에 표시
• 화면의 전체 너비를 차지
• width, height, margin, padding property 설정가능
• block 요소안에 inline 요소 포함 가능

inline

• span, a, strong, img, br, input, select, textarea, button

• 새로운 라인 표시 X
• content 너비만큼 가로폭 차지
• width, height, margin, padding 등의 property 지정 불가
  • 상, 하 여백은 line-height로 지정 가능
• inline 특성을 가지는 요소 뒤에 공백이 있을 경우, default로 4px이 자동 지정
• inline 특성을 가지는 요소안에 block 특성을 가지는 요소를 포함할 수 없다.

inline-block

• inline 요소와 같이 한 라인에 표시 + block 요소와 같이 width, height, margin, padding등의 property 지정가능
• content 너비만큼 가로폭 차지
• 하지만 이때 \n 이나 띄어쓰기가 들어가면 역시 4px의 공간이 생기기에 이땐 태그 끝을 붙여서 작성해주어야한다.

방법 1
<div>hello</div><div>
universe</div>
방법 2
<div>hello</div><
div>universe</div>
방법 3
<div>hello</div><!--
--><div>universe</div>

none

• 해당 요소가 차지하는 공간까지 안 보임

visibility

• visible
• hidden : 해당 요소의 공간은 보임 하지만 content는 안 보임
• collapse : table 요소에 사용하며 행이나 열을 안 보이게 함
• none : table 요소의 row나 column을 보이지 않게 함

  ---

font

주요 값

• medium : 기본 브라우저 default 크기 (통상 16px)
• xx-samll, x-small, small, large, x-lartge, xx-large : medium에 대한 상대값
• smaller, larger : 부모 요소의 상대값
• length : px, %, em, rem : css 단위룰 사용한 설정값 rem이 가장 안전할 듯

font-family

• font-family는 여러 값을 설정해 둔다. 사용자가 없는 폰트가 있을 수 있기 때문.
• 통상 3개정도 설정하고 마지막 3번째는 generic-family font가 들어있어야 한다.

  generic-family : serif, sans-serif, monospace, cursive, fantasy

순으로 많이 설정한다.

font-variant

• small-caps : 소문자를 소문자 크기의 대문자로 바꾸기

font 단축 property

font : font-style(옵션) font-variant(옵션) font-weight(옵션) font-size(필수) 
       line-height(옵션) font-family(필수)

letter-spaceing, word-spacing

• 글자간 공간 설정
• 단어간 공간 설정

text-align

• 글자 수평 정렬 설정
• left, right, center, justify

text-decoration

• line-through
• overline, underline

white-space

property 값	space and tab	줄바꿈	자동 줄바꿈
normal	병합	병합	O
nowrap	병합	병합	X
pre	보존	보존	X
pre-wrap	보존	보존	O
pre-line	병합	보존	O

* pre : html 문서상에 내가 작성한 대로 보여줌 nowrap : 줄바꿈이 다 사라지고 한 줄로 나옴 pre-wrap : html 문서상에 내가 작성한 줄바꿈을 바탕으로 반응형으로 바뀜

text-overflow

• 문자열이 넘칠경우에 자동 줄바꿈이 되지 않은 문자열 처리 설정, 다음 조건이 설정되어있는 상태에서 설정 가능

1. width 값 설정
2. white-space : nowrap 설정
3. overflow가 visible 이외의 값 설정

• clip : 텍스트를 잘라냄
• ellipsis : 나머지 텍스트를 (...)로 표시