아래 책에 대한 공부 내용 정리
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
이어서..
오늘의 하이라이트 % Percentage !!
이놈... 이놈을 반드시 잡고야 말겠다..
레이아웃 구성하는데 미친듯이 에러나는 이녀석을 잡기위해 이 모든것을 시작함...
그럼시작..
대전제
가기 전에 앞서..
box-sizing 에는 대 전제가 필요하다
일단 content-box 기준이다.
저번시간에 이은 것인데,
부모 박스(containing block)과 자식 박스가 있으면
자식 박스의 길이 총합 (width + margin + border + padding) 은 부모 박스의 width와 같다
여기서 width는 content area의 가로 길이이다. margin이랑 border 등등은 다 여기다 살 붙이는 요소임!
이거부터 시작한다. 앞으로 말할 horizontal, vertical 특징들은 다 여기에 대입할 수 있음.
Horizontal Properties
자동으로 auto로 지정되는 값 : width, margin-left, margin-right
표기 안하면 자동으로 0되는 값 : padding, border...
이제부터 우리가 집중할 건, 자동으로 auto값이 되는 width, margin-left, margin-right이다.
얘네들에 대한 RULE로 가로 길이가 정해지기 때문임.
[RULE]
1. 셋 중 2개가 세팅되고, 1개가 auto로 설정되면
auto는 parent element 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="width: 500px; border: solid;" >
<p style="width: 100px; margin-left: 1em; margin-right: auto;
background-color: blueviolet;">
웅앵웅</p>
</div>
</body>
</html>
*p는 꼭 내용을 입력해야 화면에 구현됨!
*rem으로 구현해도 잘됨! (div width넘어가지 않는다면)
p의 width, margin left를 지정하고 margin right를 auto로 두면
div의 width 인 500px를 맞추기 위해 margin right가 늘어난다.
2. 만약 셋 다 일정한 값이 세팅됐는데 parent의 width에 맞지 않는다? (대전제에 맞지 않을 경우)
그러면 margin-right가 auto로 대전제를 맞추기 위해 사이즈가 조정된다.
즉, margin-right가 대전제에 맞추기 위해 길이가 변경된다.
<!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="width: 500px; border: solid;">
<p style="width: 200px; margin-left: 200px; margin-right: 200px;
background-color: coral;">힝힝</p>
</div>
</body>
</html>
div의 width가 500이고
p의 width, margin-left, margin-right가 전부 200 이다. 이대로라면 content-area의 총 길이가 600이어서
containing block의 500을 훌쩍 넘는 상황임.
이때, 우리 똑똑이 css는 margin-right를 자동 조정해서 500사이즈에 맞게 만듦.
여기서는 100px로 맞춤.
3. margin이 set되고 width가 auto면
width가 알아서 대전제에 맞춰지도록 늘어남.
이것은 마치,
margin set하고 width 아예 언급 안한 상황이랑 똑같음. (width는 언급안해도 기본값이 auto니까)
<!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="width: 500px; border: solid;">
<p style="width: auto; margin: 50px;
background-color: blueviolet;">힝힝</p>
</div>
</body>
</html>
잘 돌아간다.
즉, margin을 설정해놓고 width는 걍 내버려놔도, 알아서 containing block width 맞게 조정된다!
4. 이번엔 반대로, width가 세팅되고 margin이 둘다 auto일 경우
margin 길이가 같아지고 자식 element도 가운데 정렬(center) 됨
<!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="width: 500px; border: solid;">
<p style="width: 15rem; margin-left: auto; margin-right: auto;
background-color: blueviolet;">힝힝</p>
</div>
</body>
</html>
*margin 상하좌우 5rem 으로 했더니 top과 bottom margin은 아예 없어지고 '힝힝' 블록이랑 위아래가 딱붙어버림
left, right margin만 간격생김.
5. 셋다 auto일 경우
margin은 0되고 width는 최대화된다.
margin을 0으로 세팅하고 width를 auto로 둔 상황과 똑같음.
<!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="width: 500px; border: solid;">
<p style="width: auto; margin-left: auto; margin-right: auto;
background-color: blueviolet;">힝힝</p>
</div>
</body>
</html>
와 많다..
vertical properties 랑 percentage는 나중에... 학학
'Web > CSS' 카테고리의 다른 글
| input display를 inline으로 하는법 (0) | 2021.03.12 |
|---|---|
| z-index 와 background-color (0) | 2021.01.12 |
| [CSS]심화 : box-sizing 제대로 이해하기 (3) Vertical Properties, Percentage % (0) | 2020.09.09 |
| [CSS]심화 : box-sizing 제대로 이해하기 (1) 기본 용어 정리 (0) | 2020.09.08 |
| height, margin, width .. 오류 해결 (0) | 2020.09.06 |
댓글