[CSS] 블럭 요소 vs 인라인 요소

0207

블럭 요소와 인라인 요소의 차이점에 대해 알아보자.

---

블럭 요소의 특징

블럭 요소는 다음과 같은 세 가지의 특징을 가진다.

1. 한 줄에 하나씩 쌓인다.
2. 가로와 세로 길이를 직접 명시할 수 있다.
3. 화면 배치를 위해 사용한다.

1. 한 줄에 하나씩 쌓인다.

    <div></div>
    <div></div>

div {
    width: 10px;
    height: 10px;
    background-color: #006bc0;

    margin: 5px;
}

div가 두 줄에 걸쳐 나타나는 모습이다.

2. 가로와 세로 길이를 지정할 수 있다.

    <div></div>
    <div></div>

div {
    width: 10px;
    height: 10px;
    background-color: #006bc0;

    margin: 5px;
    padding: 10px;/* 부풀리기 */
}

padding 전
padding 후

---

인라인 요소의 특징

인라인 요소는 다음과 같은 세 가지의 특징을 가진다.

1. 한 줄에 걸쳐 여러 요소가 나온다.
2. 가로 세로 길이를 직접 명시할 수 없다. 내용물의 크기만큼 가로 세로를 가진다.
3. 텍스트를 꾸밀 때 사용한다.

1. 한 줄에 걸쳐 여러 요소가 나온다.

   <span>1</span>
   <span>2</span>
   <span>3</span>

span {
    padding: 10px;
}

2. 가로 세로 길이를 직접 명시할 수 없다.

   <span>1</span>
   <span>22</span>
   <span>333</span>

span {
	width: 10px;
    height: 10px;
    background-color: pink;

    padding: 10px;
}

크기를 얼마나 지정하든지 내용물의 크기만큼 가로 세로가 지정되는 모습이다.

---