[CSS]심화 : box-sizing 제대로 이해하기 (3) Vertical Properties, Percentage %
아래 책에 대한 공부 내용 정리
www.oreilly.com/library/view/basic-visual-formatting/9781491929957/
Basic Visual Formatting in CSS
Some aspects of the CSS formatting model may seem counterintuitive at first, but as you’ll learn in this practical guide, the more you work with these features, the more they … - Selection from Basic Visual Formatting in CSS [Book]
www.oreilly.com
이어서 2번째.. horizontal 을 조졌으니 이젠 수직가자 수쥑쥑수쥑!
horizontal 에 썼던 대전제는 vertical 에도 적용되니 remind 겸 한번 더 명시하고 감.
대전제
가기 전에 앞서..
box-sizing 에는 대 전제가 필요하다
일단 content-box 기준이다.
저번시간에 이은 것인데,
부모 박스(containing block)과 자식 박스가 있으면
자식 박스의 길이 총합 (width + margin + border + padding) 은 부모 박스의 width와 같다
여기서 width는 content area의 가로 길이이다. margin이랑 border 등등은 다 여기다 살 붙이는 요소임!
이거부터 시작한다. 앞으로 말할 horizontal, vertical 특징들은 다 여기에 대입할 수 있음.
Vertical Height
Vertical Properties 중에
auto 로 지정되는 값 : width, margin-top, margin-bottom
지정하지 않으면 자동으로 0으로 처리되어 화면에 안 나타나는 값 : padding, border 등
[RULE]
1. top, bottom margin 둘중 하나가 auto 면
둘다 0으로 처리된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div style="height: 300px; border: solid;">
<p style="height: 100px; margin-top: auto; margin-bottom: 50px;
background-color: lime">힝힝</p>
</div>
</body>
</html>
*height를 조절하면 width는 자동으로 화면 전체를 채운 크기가 됨
2. content height가 containing box보다 길어질 때,
overflow 속성을 이용한다.
Percentage
%
[RULE]
1. containing block의 height 가 설정이 되어야 그 안에 있는 element도 설정됨.
2. top, bottom 둘다 auto 면 height 0됨
(margin top, bottom 안 써놓고 height만 써놓을 경우)
3. top, bottom 둘다 0으로 주고 height 세팅할경우
width 는 자동으로 화면 전체 너비로 설정됨.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div style="height: 300px; border: solid;">
<p style="height: 50%; margin-top: 0; margin-bottom: 0;
background-color: lime;
overflow: scroll;">힝힝</p>
</div>
</body>
</html>
*셋다 auto로 했을 경우 : p글자만 나오고 height 적용 안됨. 마진없으니까..
<-> width랑 다름. width 는 margin left, right auto면 알아서 둘이 equal한 값으로 산정됨
이럴 경우,
margin top, bottom을 25%로 산정하면 중앙으로 옴
(div와 상관없이 화면의 중앙으로 옴. %가 body 기준임)
그대신 element는 center로 와도, 안에 있는 content는 중앙 정렬 안됨.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div style="height: 300px; border: solid;">
<p style="height: 100%; margin-top: 0; margin-bottom: 0;
width: 50%;
background-color: lime;
overflow: hidden;">힝힝</p>
</div>
</body>
</html>
margin top,bottom 0으로 지정해주기~!
3. containing block의 height가 auto면
자식 percentage height에 맞춰짐. (헐!)
그래서 자식 담을크기로 늘어남
안에 들어있는 element의 display 방식에 따라서,
inline content 담을 크기로 늘어남
만약 자식 요소가 전부 block 이라면,
맨 위 블럭의 outer border edge 부터 맨 아래 블록의 bottom border egde 까지의 영역으로 산정됨
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div style="height: auto; border: solid; width: 20%;">
<p style="height: 10rem; margin-top: 0; margin-bottom: 0;
background-color: lime;
overflow: hidden;">힝힝</p>
</div>
</body>
</html>
