* 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>'WEB > CSS_ concepts' 카테고리의 다른 글
| [CSS] 배치 _ BLOCK type의 수평 정렬 ( h1~h6, p, div) (0) | 2024.03.10 |
|---|---|
| [CSS] Inline box type _ 다른 요소를 수평방향으로 밀어낼 수 있지만, 위아래로는 못한다. (0) | 2024.03.10 |
| [CSS] box-sizing 속성 / content-box (x) vs ♥border-box(o)♥ (0) | 2024.03.10 |
| [CSS] CSS 상속 _ 일반적으로 text 관련은 상속됨/ 배치와 관련된 것 Box model, position은 안됨 (0) | 2024.03.10 |
| [CSS] 명시도 _ 선택자 우선순위 _ 퀴즈 (0) | 2024.03.10 |