Display
1. display
1.1 block
- 항상 새로운 라인에서 시작
- width: 100%
- width, height, margin, padding 지정 가능
- block 엘리먼트 내부에 inline 요소 포함 가능
- div, h1~h6, p, ol, ul, li, hr, table, form 등이 있음
1.2 inline
- 새로운 라인에서 시작하지 않고 문자 그대로 인라인
- width: 컨텐트의 너비
- width, height, margin-top, margin-bottom 지정 불가
- 상하 여백은 line-height로 지정
- inline 요소 뒤에 엔터나 스페이스가 들어가면 space(4px) 들어감
- span, a, strong, img, br, input, select, textarea, button 등이 있음
1.3 inline-block
- inline 처럼 한 줄에 표현되면서 width, height, margin을 지정 가능(완전체ㅋ)
- 상하 여백을 지정할 때 margin-top, margin-bottom, line-height 전부 먹음
- inline 요소처럼 뒤에 엔터나 스페이스 들어가면 space(4px) 들어감
1.4 none
- 엘리먼트를 화면에 표시하지 않는다.
- visibility: hidden이 그냥 화면에 표시만 하지 않는 반면,
display: none은 dom 자체가 사라짐.
2. visibility
2.1 visible
2.2 hidden
- 요소를 화면에 보이지 않게 한다.
- display: none이 dom 자체를 사라지게 한다면 visibility: hidden은 공간은 있고 표시만 하지 않음
2.3 collapse
- table 요소에 사용하며 행이나 열을 보이지 않게 함
2.4 none
- table 요소의 행이나 열을 보이지 않게 함. IE, 파이어폭스에서만 동작하며 크롬에서는 hidden과 동일하게 동작한다. 잘 안쓸 것같다.
3. opacity
- 요소의 투명도를 정의
- 0.0 ~ 1.0 사이값
- 0에 가까울수록 투명해지고 1에 가까울수록 진해짐
- 요소를 투명하게 만들면 하위 노드들도 같이 투명해짐