Inline
a, img, span
다른 요소를 수평방향으로 밀어낼 수 있지만, 위아래로 밀어낼 수는 없다.
< 원래 평범한 상태 >
< 수직방향으로 padding 줬을 때>
Inline 본인의 영역이 커지기는 했지만, 다른 요소들을 밀어낼 수 는 없음
a,
span,
img {
/* inline 요소들 */
border: 3px solid rgb(58, 161, 240);
/* padding을 사용해서 수직방향으로 밀어내보기 */
padding-top: 100px;
}< 수평방향으로 padding을 줬을 때 >
Inline은 수평방향으로는 다른 요소들을 밀어낼 수 있음
아래에 보면 "자체 콘텐츠..."라는 말이 오른쪽으로 밀려난 걸 알 수 있음
a,
span,
img {
/* inline 요소들 */
border: 3px solid rgb(58, 161, 240);
/* padding을 사용해서 수평방향으로 밀어내보기 */
padding-right: 100px;
}
더보기
<!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 {
/* inline 요소들 */
border: 3px solid rgb(58, 161, 240);
/* padding을 사용해서 수직방향으로 밀어내보기 */
/* padding-top: 100px; */
/* padding을 사용해서 수평방향으로 밀어내보기 */
padding-right: 100px;
}
h1,
p,
div {
/* block 요소들 */
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] 배치 _ inline type의 수평 정렬 ( a, img, span ) (0) | 2024.03.10 |
|---|---|
| [CSS] 배치 _ BLOCK type의 수평 정렬 ( h1~h6, p, div) (0) | 2024.03.10 |
| [CSS] Normal Flow (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 |