box-sizing / background-size
2018. 1. 10. 23:42
HTML , CSS
box-sizing 속성:
width 속성과 height 속성이 차지하는 범위를 지정합니다.
box-sizing: content-box : 이 값은 CSS 표준에 의해 정의된 기본 스타일이다.
width와 height 속성은 padding, border, margin을 포함하여 측정되며,
을 포함하지 않는다.
box-sizing: padding-box :
width와 height 속성은 padding 크기를 포함한다.
하지만 border 및 margin을 포함하지 않는다.
margin을 포함하지 않는다. 이 box model 은 인터넷 익스플로러에서 문서가 쿽스 모드일 때 사용된다.
background-size:cover;
cover로 설정하면 이미지의 가로/세로 비율은 고정되고 , 가로 크기가 요소의 가로 크기로 맞추어진다
(가로크기=요소 가로크기)
세로크기가 요소의 세로크기보다 크면 아래가 감추어져 화면에는 보이지 않는다.
background-size:contain;
이미지의 가로/세로 비율은 고정되고 세로크기가 요소의 세로크기로 맞추어 진다.
가로 크기가 요소의 가로 크기보다 작으면 빈공간이 생긴다.
'HTML , CSS' 카테고리의 다른 글
| how to use pseudo-class :not with :nth-child (0) | 2018.01.11 |
|---|---|
| float< position absol, fixed 우선시 됨 (0) | 2018.01.11 |
| transition 속성 (0) | 2018.01.10 |
| background 단일속성으로 사용하기 등 (0) | 2018.01.09 |
| 가상요소 (0) | 2018.01.09 |