인라인요소 VS 블록요소

인라인 요소

인라인 요소는 본인의 컨텐츠 크기만큼 영역을 차지하는 요소를 말한다.

기본적으로 width , height 를 가지지 않는다. 아니 못한다...😕

 

대표적인 인라인 요소

span , strong 등이 있다.

 

더 자세히 알아보고 싶다면 ⬇️

 

Inline element 시멘틱 태그

 

블록 요소

블록 요소는 하나의 독립된 덩어리로 화면의 가로 폭 전체를 영역으로 가진다.

일반적으로 블록 요소를 사용하면 줄 바꿈이 일어난다.

 

대표적인 블록 요소

header , section , article , div 등이 있다.

 

더 자세히 알아보고 싶다면 ⬇️

Block element 시멘틱 태그

See the Pen spandiv by kim-Yeji (@yeeed711) on CodePen.

인라인 요소는 한 줄로 나열되는 반면, 블록 요소는 한 줄씩 차지한 모습

---

See the Pen spandiv2 by kim-Yeji (@yeeed711) on CodePen.

인라인 요소는 높이와 넓이를 가질 수 없다. 블록 요소는 지정이 가능하다.

---

See the Pen spandiv3 by kim-Yeji (@yeeed711) on CodePen.

마진과 패딩은 넣을 수 있다.

다만 인라인 요소에 마진은 좌우로만 가능하고 패딩은 베이스라인 기준으로 영역을 차지한다.

그런데 보이는 것과 같이 인라인 요소에 적용한 패딩은 밑에 블록 요소 영역까지 침범한 것을 볼 수 있다.

이는 시각적으로만 침범한 것

그러나 여전히 높이, 넓이는 적용되지 않는 모습 (얼핏 보면 높이와 넓이가 지정된 것 같지만 이는 패딩으로 확장된 것뿐이다.)

 

블록 요소는 마진과 패딩 값을 얼마를 주든 간에 서로의 영역을 절대 침범하지 않는다.

---

inline- block

• 인라인 요소를 블록 요소처럼 만들고 싶다면

span:{display: block;}

속성을 적용해주면 된다.

현재 두 박스 모드 같은 크기를 갖고 있다.

---

• 반대로 블록 요소를 인라인으로 만들고 싶다면

div:{display: inline;}

편안 ~

---

• 그렇다면 블록 요소를 나란히 두고 싶을 때에는?

바로 inline-block 를 적용해주면 된다.

See the Pen spandiv4 by kim-Yeji (@yeeed711) on CodePen.

 

 

인라인 요소 또한 패딩, 마진, 높이, 넓이 모두 적용된 것을 볼 수 있다.

또한 블록 요소와 인라인 요소가 동일한 모습이 되었다! 

CSS를 통해 인라인 / 블록 요소를 동일한 모습으로 스타일링할 수 있으니 용도에 맞게 사용하면 될 것 같다.