아무 사이트나 들어가서 검사(inspect)를 해보면 대부분이 박스들로 이루어진 것을 알 수 있다.
위 그림에서도 Korea Times는 <div>라는 박스 안에 들어가 있다.
박스에는 기본적으로 두가지 종류가 있는데 첫번째는 block이고 두번째는 inline 방식이다.
<!DOCTYPE html>
<html>
<head>
<style>
div{
background-color: red;
width:50px;
height:50px;
}
span{
background-color: aqua;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<span>hello</span>
<span>hello</span>
<span>hello</span>
</body>
</html>
가장 기본적인 박스인<div>와 <span>을 보자.
다음 예시를 통해 유추할수 있듯이 block 방식의 박스 옆에는 아무것도 올수 없다.
반면에 inline 방식의 박스 옆에는 다른 요소가 올수 있다.
또한 block 방식의 박스는 사이즈가 지정될수 있지만, inline 방식의 박스는 사이즈가 없다.
정리해 보자면
1. block
- 옆에 다른 요소가 올 수 없음
- 박스의 크기가 존재함( 크기를 지정해 주어야함)
2. inline (in the same line)
- 옆에 다른 요소가 올 수 있음
- 박스의 크기가 존재하지 않음(크기를 지정해 주는 것은 의미가 없음)
- (추가) padding 값을 적용할 수 있지만 margin 값은 좌, 우에만 적용해 줄 수 있음(inline 이기 때문).
3.inline-block
- 옆에 다른 요소가 올 수 있으며 사이즈를 가질 수 있음
-참고-
대부분의 박스는 block 형식이다.
span, a 와 같은 것들이 inline형식이다.
inline 과 block 은 display 속성으로 바꿀수 있다.( display: block )
'웹 프로그래밍 > css' 카테고리의 다른 글
| selector, state (0) | 2023.09.02 |
|---|---|
| position: relative, absolute, fixed, static (0) | 2023.08.27 |
| margin, padding , border (0) | 2023.01.05 |
| css 작성법 ( id, class ) (0) | 2023.01.05 |
| html + css (css 를 html에 추가하는 방법) (0) | 2023.01.05 |
