width, height
요소의 가로/ 세로 너비
auto(기본값) : 브라우저가 너비를 계산
단위 : px, em, vw 등으로 단위를 지정\
span 태그
대표적인 인라인 요소!
본질적으로 아무것도 나타내지 않는, 콘텐츠 영역을 설정하는 용도
HTML
<body>
<span>minseok</span>
</body>CSS
span {
width: 100px;
height: 100px;
background-color: orange;
}width, height 조정 불가능
div 태그
대표적인 블록 요소!
본질적으로 아무것도 나타내지 않는, 콘텐츠 영역을 설정하는 용도
max-width, max-height
none : 최대 너비 제한 없음
단위 : px, em, vw 등 단위로 지정
요소를 커질 수 있는 최대 가로/세로 너비
min-width, min-height
0 : 최소 너비 제한없음
단위 : px, em, vw 등 단위로 지정
요소가 작아질 수 있는 최소 가로/세로 너비
HTML
<div class="parent">
<div class="child"></div>
</div>CSS
.parent {
width: 300px;
height: 200px;
background-color: blue;
}
.child {
min-width: 500px;
height: 100px;
background-color: orange;
}
부모 요소를 자식요소를 넘어감
CSS 단위
- px 픽셀
- % 상대적 백분율
- em 요소의 글꼴 크기
- rem 루트 요소(html)의 글꼴 크기
- vw 뷰포트 가로 너비의 백분율
- vh 뷰포트 세로 너비의 백분율
%
HTML
<div class="parent">
<div class="child"></div>
</div>CSS
.parent {
width: 400px;
height: 200px;
background-color: blue;
}
.child {
width: 100%;
height: 100%;
background-color: orange;
}
rem,em
CSS
html {
font-size: 16px;
}
.parent {
width: 400px;
height: 200px;
background-color: blue;
}
.child {
width: 20rem;
height: 100%;
background-color: orange;
}HTML의 기본 font-size는 16px이다 rem은 HTNL의 font-size를 곱한 px값이다
20rem = 16px X 20 = 320px
em은 부모요소의 font-size에 비례한다
=> rem은 HTML
=> em은 부모요소
vw
CSS
.child {
width: 50vw;
height: 50%;
background-color: orange;
}50vw는 화면의 50%를 차지한다
