4. CSS - 중급 (Inline vs Block)

Inline vs Block 요소

 

 

참고 링크 :
1. display 속성 - https://developer.mozilla.org/ko/docs/Web/CSS/display
2. inline 속성 - https://developer.mozilla.org/ko/docs/Web/HTML/Inline_elements
3. block 속성- https://developer.mozilla.org/ko/docs/Web/HTML/Block-level_elements
4. inline-block 속성 - https://www.w3schools.com/css/css_inline-block.asp

 

이전에 올린 CSS 입문 포스팅을 먼저 읽고 보는 것을 추천합니다.

https://bellmir.tistory.com/22?category=569543 

3. CSS - 입문

 

 

들어가기 전에

이전 포스팅에서 언급했듯이 HTML 요소는 크게 Inline와 Block 요소로 나뉩니다.

각각의 요소는 서로 다른 특징을 지니는데 가장 큰 특징으로는 저번 포스팅에서 언급한 inline 요소에는 width와 height가 적용이 되지 않는다는 것입니다.

오늘은 이러한 특징들에 대해 자세히 알아보도록 하겠습니다.

 

목차

1. Inline 요소의 특징

2. Block 요소의 특징

3. Inline-block 요소?

---

 

Inline 요소의 특징

Inline 요소들은 기본적으로 글자와 같이 취급되어야 하는 요소들입니다.

따라서 글자처럼 넓이와 높이는 자신이 지닌 콘텐츠만큼만을 가지며, 여러 inline 요소들이 나열되면 줄 바꿈이 되는 것이 아닌 한 줄에 그대로 이어지게 됩니다. (콘텐츠의 흐름을 끊지 않음)

 

대표적인 인라인 요소로는 <span>, <a>, <img />가 있습니다.

아래는 해당 요소를 이용한 예제입니다.

inline 요소는 <span style="background-color: yellow;">이렇게</span> 문단이 이어집니다.

inline 요소는 이렇게 문단이 이어집니다.

 

인라인 요소들은 글자를 위한 요소이기 때문에 'vertical-align'과 같은 문자의 위치를 정렬하기 위한 속성들이 적용됩니다.

다만 'text-align'은 적용이 되지 않는데, 그 이유는 애초에 크기가 자신의 크기만큼을 가지기 때문에 정렬할 넓이가 없기 때문입니다.

* vertical-align: 수직 정렬, text-align: 블록 내의 글자 수평 정렬

 

다만 margin과 padding은 예외적으로 모든 요소들이 가지는 속성이기 때문에 적용이 되지만, 역시 글자가 가지는 특징 상 위아래 방향은 적용되지 않습니다.

다만 패딩은 예외적으로 위아래도 적용되긴 하지만 아래의 그림과 같이 생각한 대로 동작하지 않을 가능성이 큽니다.

따라서 인라인 요소에 높이나 너비를 주고 싶다면 CSS로 display: block; 속성을 줘서 요소를 블록 요소로 만든 후 진행해야 합니다.

 

 

인라인 특징 정리

1. 콘텐츠의 흐름을 끊지 않음(줄 바꿈 안 함)

2. width, height 속성 적용 안됨.

3. margin, padding은 양 옆 방향으로만 제한적으로 적용됨.

4. 높이, 너비 등을 주고 싶으면 CSS를 이용해 블록 요소로 변경한 후 적용시켜야 함

 

 

Block 요소의 특징

블록 요소는 기본적으로 레이아웃을 잡는 용도입니다.

큰 덩어리의 구조를 잡는 용도이며, 가장 큰 특징으로는 항상 새로운 줄에서 시작하기 때문에 블록 요소를 사용하면 줄 바꿈이 일어납니다. 또한 넓이는 기본적으로 한 줄 전체를 차지합니다.

차례대로 상자를 쌓는다고 생각하시면 됩니다.

 

대표적인 블록 요소로는 <div>, <h1>, <p>가 있습니다.

블록요소는 <div style="background-color: yellow;">이렇게</div> 줄바꿈이 일어납니다.

블록요소는

이렇게

줄바꿈이 일어납니다.

 

* 주의점

블록 요소는 자식 요소로 블록 요소를 가질 수 있지만, 인라인 요소는 자식 요소로 블록 요소를 가지면 안 됩니다.

인라인 안에 블록 요소가 있는 구조는 웹 표준에 어긋나니 지양하셔야 합니다.

 

 

Inline-block?

위에서 봤듯이 인라인 요소는 스타일을 적용시키기에 많은 한계점이 존재합니다.

그렇다고 블록 요소로 만들기엔 의미가 맞지 않으며, 또 다른 불편한 점이 생기기도 합니다.

이럴 때 사용하는 것이 바로 inline-block입니다.

 

이름에서부터 알 수 있듯이, inline-block 속성은 인라인과 블록 속성을 동시에 지닙니다.

줄 바꿈이 일어나지 않고, 크기를 따로 정해주지 않으면 인라인처럼 콘텐츠의 크기만을 가집니다.

다만, width, height, margin, padding을 주게 되면 마치 블록 요소처럼 문제없이 속성이 적용된다는 차이점이 있습니다.

 

대표적인 인라인 블록 요소로는 <button>, <input />, <textarea>가 있습니다.

인라인 블록 요소는 <button style="width: 100px; height: 40px">이렇게</button> 줄바꿈이 되지 않지만, 크기를 가질 수 있습니다.

인라인 블록 요소는 줄바꿈이 되지 않지만, 크기를 가질 수 있습니다.

 

---

 

마무리

오늘은 이렇게 인라인 요소와 블록 요소, 그리고 인라인 블록 요소까지 각각의 특징들을 배워보았는데요.

아직 input이나 button 같은 인라인 블록 요소들은 다루지 않았는데 벌써 언급이 되어버렸네요.

어느 정도 CSS를 배웠으니 다음 포스팅에서는 여러 가지 자주 쓰이는 HTML 태그들을 소개해보겠습니다.