가로 세로 영역 제어 width, height
블록 요소 : p, div, h1, header, ul, li, article, form ...
- 가로 값의 경우 부모 요소의 가로 값을 받음
- 일반적인 흐름에서는 블록 요소 옆에 다른 요소가 올 수 없음
- 자식으로 블록, 인라인 요소 올 수 있음
- 세로 값의 경우 자식 요소의 높이 값을 가져 옴
- width, height로 제어 가능
인라인 요소 : span, img, a, em, input, strong ...
- 가로 값의 경우 자식(컨텐츠)의 값을 가져 옴
- 인라인 요소 옆에 다른 인라인 요소가 올 수 있음
- 자식으로 인라인 요소만 올 수 있음
- 세로 값의 경우 자식의 높이를 가져 옴.
- width, height로 제어 불가능
<style>
* { /* 전체 선택자 : html 문서 내 각 각의 요소에 적용. 모든 태그에 영향을 끼치기 때문에 단독 사용 빈도 낮음.*/
color: lightgray;
}
h1 ~ * {
font-size: 30px;
font-weight: bold;
}
div.box_wrapper {
background-color: darkorange;
}
div.box_wrapper > div.block1 {
background-color: darkgreen;
}
div.box_wrapper > span.inline1 {
background-color: darkgoldenrod;
}
</style>
</head>
<body>
<h1>가로 세로 영역 제어 width, height</h1>
<div class="box_wrapper deco-size">
<div class="block1">블록 요소</div>
<span class="inline1">인라인 요소</span>
</div>
<p class="block2 deco-size"></p>
<span class="inline2 deco-size"></span>
</body>
</html>
* 인라인 요소는 width, height로 제어 불가능.
블록 요소와 같은 값을 줬지만 인라인 요소는 제어가 안됨.
width, height의 '%' 값
- width의 % 값은 브라우저의 너비에 맞춰 변화함. (부모의 값이 정의된 경우 부모의 값에 따라 변화)
- height의 % 값은 부모의 높이 값이 정의되어 있는 경우에만 적용됨.
최대 최소 너비 / max-width, min-width
- max-width: 값, px(단위); : ~이상 커지지 않음. / 너비의 최대값
- min-width: 값, px(단위); : ~이상 작아지지 않음. / 너비의 최소값