* CSS - layout
* CSS 박스모델 - 디자인과 레이아웃을 말할 때 사용된다.
- 4가지 구성요소 : content, padding, border, margin
- css property : width/height. padding, border, margin
1. content : text,image,video 등 => width / height 사용
2. padding : 안쪽여백
3. border : 테두리
4. margin : 바깥여백
=> CSS 박스모델은 기본적으로 모든 HTML 요소를 감싸주는 박스이다.
EX)
<!-- <style>
div {
width : 300px;
height : 300px;
padding : 20px;
border : 5px solid red;
margin : 50px;
} -->
</div>
</style>
★ - 블럭 요소의 박스 모델 특성
- width / height : => 너비/높이 설정, px OR % 단위로 설정할 수 있다.
-> % 단위는 부모요소를 기준으로 크기를 결정 한다
- width/height 특성(기본값 상태일때)
* 기본값 상태는 width:auto; / height:auto; 로 설정한것과 같다.
- width : 부모요소를 기준으로 100% 크기로 채워진다.
- heigth : 자식요소 높이만큼 설정된다.
★ - 인라인 요소의 박스모델 특성
- 구성요소 : content(width/height) / pading / border / margin 중 padding과 border만 제대로 적용, width/heigh 적요안됨,margin 좌우만 적용된다.
- width/height 기본값일때 모두 자식 요소에 맞춰진다.
* background 적용 범위
- box model : contetn, padding, border, margin
- background는 content, padding에 적용
* background image의 기본성질 : 이미지를 반복해서 적용한다.
=> background repeat를 사용해 반복을 조절해준다.
* 박스 배치
- display 속성
: - 박스가 화면에 표시되는 성질을 변경
- block -> inline / lnline -> block
- inline-block : 박스에 inline 성질, block 성질 모두 적용
=> - inline : 가로길이 자식요소에 맞춰지는 성질이 적용된다.
- block : 박스 모델의 구성요소가 모두 적용 가능해진다.
- none : 화면에서 안보이게 한다 (** visibility : hidden과 비교)
-> 보이지 않을 때 공간 차지 여부의 차이가 있다.
- inline 박스 / inline-block 박스는 제어할수 없는 기본 여백이 있다.
- float : 띄우는 기능을 통해 가로단 배치
- left : 부모요소를 기준으로 왼쪽 배치
- right : 부모요소를 기준으로 오른쪽 배치
- none : float 취소
- 박스를 float으로 배치할 때 주위 박스가 겹치지않도록 해야한다.
- 겹치지 않도록 하기 위한 원리 : float으로 띄워지는 박스에 원래 공간을 차지할 수 있도록 해야한다.
- clear 속성을 사용해서 원래 공간 차지를 유지하도록 한다.