display 속성
block / inline / inline-block
block - p, form, header, footer, section 등과 같이 너비를 좌우로 full로 차지하는 속성 값
inline - span 등 단락 내에 존재하며 해당 너비만큼만 자리를 차지하는 속성 값
inline-block - 요소를 인라인 레벨로 배치하면서 내용에는 블록 레벨 속성을 지정하는 속성 값
none - display: none; 으로 되어 자신의 영역만큼 공간을 차지하지만 보이지 않는 값
*visibility: hidden; 는 해당 요소가 감춰지며 마치 존재하지 않는 것 처럼 공간을 차지하지 않는 차이가 있다.
box-sizing 속성
속성 값
- content-box - padding과 content, border의 너비가 합쳐진 값이 width가 되도록 하는 값
- border-box - width에서 border와 padding을 뺀 값이 content 너비가 되도록 하는 값
position 속성
웹 문서 안의 요소들을 자유롭게 배치해 주는 속성
static을 제외한 나머지는 좌표를 이용해 요소 위치 조정 - top, bottom, left, right
속성 값
-
static - 문서의 흐름에 맞춰 배치
-
relative - 이전 요소와 연결하여 배치하되 위치 지정 가능
-
absolute - position이 relative인 부모를 기준으로 원하는 위치 지정해 배치
-
fixed - 브라우저 창 기준으로 지정한 위치에 고정
float 속성
왼쪽 혹은 오른 쪽 구석에 요소 배치하는 속성
속성 값
- left - 왼쪽 배치
- right - 오른쪽 배치
- none - 어느 쪽으로도 배치 x
*float이 부모의 높이를 인지할 수 없어 벗어날 때 이용하는 방법 3가지
-
바깥 div 마지막에 아무 태그나 넣고 clear 속성을 적용함
(코드를 더 입력해야 해 좋지 않음) -
바깥 div에 overflow: hidden;을 넣음 (가장 많이 쓰이는 방식)
-
바깥 div를 float시킴. 그럼 자식이 float을 인지하여 높이를 차지함. 그러나 float이 되어 block 요소의 성질이 사라져 문제될 수 있음. 이런 경우 width 100% 추가하는 등의 해결이 필요
clear 속성
float 속성 이후의 다른 요소들에게 해당 속성이 더 이상 쓰이지 않게 하기 위한 속성
속성값
- none - 기본 값
- left - left 값 celar
- right - right 값 clear
- both - 양쪽 값 모두 clear
