- 인라인 요소
크기값 x
한줄에 여러개 배치
상하마진 못가짐
기본 너비값은 컨텐츠의 너비값
<head>
<style>
span {
border: 1px solid #000;
width: 100px;
height: 100px;
margin: 20px;
}
</style>
</head>
<body>
<div>1. inline</div>
<span>Inline</span>
<span>Inline2 </span>
</body>크기값x 좌우마진만 갖는다.
- 블럭 요소
크기값 o
한줄에 한개만 배치
상하좌우 마진 가짐
기본 너비값 100%
div {
width: 100%;
이렇게 기본 너비값을 써줄 필요가 없음!
}
<head>
<style>
.block {
border: 1px solid red;
width: 100px;
height: 100px;
margin: 20px;
}
</style>
</head>
<body>
<div>2. block</div>
<div class="block">Block</div>
<div class="block">Block2</div>
</body>
- 인라인 블럭
크기값 o
한줄에 여러개 배치
상하좌우 마진 가짐
기본 너비값은 컨텐츠의 너비값
img, input, button, fontawesome icon
h1은 block요소이지만 display: inline-block으로 바꿔서 img옆에 붙게 된다.
<head>
<style>
img {
margin: 20px;
width: 300px;
height: 300px;
}
h1 {
border: 1px solid blue;
display: inline-block;
}
</style>
</head>
<body>
<img src="img/face-02.jpg" alt="">
<img src="img/face-02.jpg" alt="">
<h1>block elements</h1>
</body>
- 포지션
position: static; // 기본값
어떤 요소이건 position: absolute; fixed; 가 들어가면 모든 요소는 인라인 블럭으로 바뀐다.
position: absolute;
/* display: inline-block; 의미가 없음, absolute면 인라인블럭이 된다. */
'Web > CSS' 카테고리의 다른 글
| CSS 변수 var() 사용하기 (0) | 2022.02.09 |
|---|---|
| CSS calc() 산술식(사칙연산) (0) | 2022.02.07 |
| [animation] 도형로딩 애니메이션 #2 (0) | 2021.08.02 |
| [animation] 도형로딩 애니메이션 #2 (0) | 2021.08.01 |
| UIKit #1 사용법, Accordion 컴포넌트 (0) | 2021.07.27 |