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
- 문자열이 넘칠경우에 자동 줄바꿈이 되지 않은 문자열 처리 설정, 다음 조건이 설정되어있는 상태에서 설정 가능
- width 값 설정
- white-space : nowrap 설정
- overflow가 visible 이외의 값 설정
- clip : 텍스트를 잘라냄
- ellipsis : 나머지 텍스트를 (...)로 표시