1. BFC : Block Formatting Context
BFC 의미 : overflow는 새로운 body가 생기는것처럼 독립적인 문서가 시작된다.
자식요소에 float이 들어가면 부모는 높이를 갖지 못한다. float의 개념때문인데, (부유함)이때 overflow:hidden을 주는것이 이 때문.
1-1. 안에 있는</span>p태그의 시작점은 container의 시작점과 같다.
이때가장 쉬운 방법: margin을 적용하여 .left와 떨어뜨린다는 점이 있는데, overflow:hidden은 부모의 높이를 유지하려고 만든 속성은 아니다.
그러나 float와 같이 쓰일때, 높이 유지의 문제해결을 할 수 있다. 왜일까?
float는 위로 뜬다. 부모입장에서 float의 높이를 인지하지 못한다. body는 최상위 요소이기 때문에 자식요소의 높이를 모두 알고 있다.
1-2. span에 clear:both를 주면 float가 적용된 영역의 밖에부터 시작된다.
1-3.하지만 p에 overflow:hidden을 주면 전혀 다른 body가 생긴것과 같아서 다시 위에부터 시작된다. (이게 BFC)
1-4. 단점: 원래 디자인상 넘치는 것은 안보이기 때문에 단점이 될수도 있다. 그러면 margin-lfet:150px 없애도 된다.
2. 두번째 주제 : 여기서 p에 ov:h를 주는 이유는 옆에 fl:l요소와 상관 없이 다시 독립적인 body처럼 들어감
3. 세번째 주제 : 겹치는 마진은 안들어간다. border-collapsing 됨. 박스의 상단,하단에 20씩 들어가고 중간부분은 20+20=40이 되어야 하는데,
이렇게 들어가진 않는다. 20만 들어간다. 겹치는 마진만 적용
즉, 내부에 들어가는 새로운 요소들에 대해 [부모와 자식간의 마진 겹칩현상을 없앨 수 있다.
4. overflow를 쓰게 되면 위에 안생기던 margin이 생기게 된다.
h1요소는 기본마진도 있는데, 안들어가지만, .container3에 of:h이 들어가면 h1요소의 마진이 생김
이때 of:h 대신 또 새로운 방법 등장~! display:flow-root를 써도 같은 결과가 된다. ㅜㅡ;;; 끝이 없군.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>overflow, margin</title>
<style>
/*첫번째 주제 : Block Formatting Context 개념
BFC의 의미 : overflow는 새로운 body가 생기는것처럼 독립적인 문서가 시작된다.
자식요소에 float이 들어가면 부모는 높이를 갖지 못한다. float의 개념때문인데, (부유함)이때 overflow:hidden을 주는것이 이 때문.
*/
.container1{
background: #999;
overflow: hidden;
/*작은 body가 만들어진것 과 같다 */
}
.item{
width: 150px; height: 150px;
background: #fe0;
border-radius: 50%;
}
.left{float: left;}
.right{float: right;}
p{
border: 10px solid #f00;
/* margin-left:150px;*/
overflow:hidden;
/*두번째 주제 : 여기서 p에 ov:h를 주는 이유는 옆에 fl:l요소와 상관 없이 다시 독립적인 body처럼 들어감*/
}
p span{
background: #00f;
clear: both;
display:block;
}
/*
세번째 주제 : 겹치는 마진은 안들어간다. border-collapsing
박스의 상단,하단에 20씩 들어가고 중간부분은 20+20=40이 되어야 하는데,
이렇게 들어가진 않는다. 20만 들어간다. 겹치는 마진만 적용
즉, 내부에 들어가는 새로운 요소들에 대해
[부모와 자식간의 마진 겹칩현상을 없앨 수 있다. */
.container2{
background: #fcc;
width:240px;
/*overflow를 쓰게 되면 위에 안생기던 margin이 생기게 된다. 이때 of:h 대신 또 새로운 방법 등장~! display:flow-root를 써도 같은 결과가 된다. ㅜㅡ;;; 끝이 없군. */
overflow: hidden;
}
.box{
width: 200px;
height: 200px;
background: #fff;
margin:20px;
}
.container3{
background: #f00;
/* overflow: hidden; */
display:flow-root;
}
h1{background: #fee;}
</style>
</head>
<body>
<div>
어항안에 물고기가 들어가면 물고기가 생활할 수 있는데, 어항이 없으면 물고기는 다 죽는다. Block Formatting Context의 의미를 이해해야 한다.
</div>
<div class="container1">
<div class="item left">1</div>
<div class="item right">2</div>
<p>
<span>이 안에 있는</span>p태그의 시작점은 container의 시작점과 같다.
이때가장 쉬운 방법: margin을 적용하여 .left와 떨어뜨린다는 점이 있는데,
overflow:hidden은 부모의 높이를 유지하려고 만든 속성은 아니다.
그러나 float와 같이 쓰일때, 높이 유지의 문제해결을 할 수 있다. <br>
왜일까? <br>
float는 위로 뜬다. 부모입장에서 float의 높이를 인지하지 못한다.
body는 최상위 요소이기 때문에 자식요소의 높이를 모두 알고 있다. <br>
2. span에 clear:both를 주면 float가 적용된 영역의 밖에부터 시작된다.<br>
3.하지만 p에 overflow:hidden을 주면 전혀 다른 body가 생긴것과 같아서 다시 위에부터 시작된다. (이게 BFC)
<br>단점: 원래 디자인상 넘치는 것은 안보이기 때문에 단점이 될수도 있다.
그러면 margin-lfet:150px 없애도 된다.
</p>
</div>
<div class="container2">
<div class='box'>
1. box의 마진<br>
: container안에서 사용한 box의 마진은 중복된 부분은 한번만 적용
</div>
<div class='box'></div>
</div>
<div class="container3">
<h1>h1요소는 기본마진도 있는데, 안들어가지만, .container3에 of:h이 들어가면 h1요소의 마진이 생김</h1>
</div>
</body>
</html>'UIUX Web Standard > COA Lab's CSS' 카테고리의 다른 글
| css 공간의 이해 2 - - margin collapsing (0) | 2021.02.09 |
|---|---|
| css 공간의 이해 1 - BFC (0) | 2021.02.08 |
| coding tip - 1. about vertical-align (0) | 2021.02.04 |
| 웹표준 검사 (0) | 2021.02.03 |
| 레이아웃 기초 1 (0) | 2021.02.02 |
