WEB/CSS_ concepts
[CSS] Normal Flow
bay07
2024. 3. 10. 14:15
* Normal Flow
CSS를 적용하지 안핬을 경우 웹페이지 요소가 기본적으로 배치되는 방향
모든 웹페이지의 시작 요소들은 모두 다 좌측 상단에서 시작한다.
(박스, 텍스트, 이미지 등등)
| inline flow | Block flow |
 |
 |
Q. 블락 요소는 왜 아래로 흐를까?
오른쪽을 다 차지하고 있기 때문에, 다음 것이 오른쪽으로 나올 수가 없기 때문이다.
오른쪽이 다 있기 때문에 어쩔 수 없이 아래로 나오게 되는 것.
inline이 파란색 block이 검정색이다.
더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
background-color: rgb(249, 217, 222);
}
a,
span,
img {
border: 3px solid rgb(58, 161, 240);
}
h1,
p,
div {
border: 1px solid rgb(1, 1, 16);
}
</style>
</head>
<body>
<h1>Normal flow</h1>
<p>Lorem, ipsum dolor sit amet consect explicabo</p>
<div>
<p>block 요소는 기본적으로 부모 요소의 너비 100%를 차지하며, 자식 콘텐츠의 최대 높이를 취한다.</p>
<p>block 요소의 총 너비와 총 높이는 content + padding + border width/height다.</p>
</div>
<p>block 요소는 서로 margins로 구분된다.</p>
<p>inline 요소는 <span>이 것처럼</span> 자체 콘텐츠의 너비와 높이만 차지한다.
그리고 inline 요소는 <a href="#">width나 height 속성을 지정 할 수 없다.</a>
</p>
<p>
물론 이미지도 <img src="#"> 인라인 요소다.
단, 이미지는 다른 inline 요소와 달리 width나 height로 크기를 조정할 수 있다.
</p>
<p>
만약 inline 요소의 크기를 제어하려면 block 요소로 변경하거나 inline-block 요소로 설정해주어야 한다.
</p>
</body>
</html>