Float를 연습해보는 시간을 갖던 중, 원하는 대로 요소들을 배치하지 못하고 있단 사실을 깨달았다.
이유를 나름대로 고민해봐서 내린 결론은...
시멘틱 태그들이 어떤 display를 가지고 있는지 확실히 모른다는 것이었다.
그런 의미에서 display의 block, inline, inline-block에 대해 짚고 넘어 가보려 한다.
Block
기본적으로, 부모 요소의 너비(width)를 모두 차지하려고 한다.
그렇기에, 블록 레벨 요소들은 새로운 줄에서 시작하며, 너비와 높이, 상하좌우 마진을 설정할 수 있다.
블록 레벨 요소로는 헤딩 태그인 <h1>~<h6>, <div>, <p>, <ul>, <li>, <table>, <dl>, <dd>, <fieldset>, <figcaption>, <figure>등이 있다.(주로, 구조나 컨테이너의 역할을 한다.)
Inline
기본적으로, 컨텐츠가 가지고 있는 영역만큼의 너비만을 차지하고, 연달아 작성했을 때 새로운 줄에서 시작하지 않는다.
너비와 높이를 직접 설정할 수 없으며, 상하 마진은 적용되지 않는다.
인라인 레벨 요소로는 <span>, <a>, <img>, <button>, <label>, <input> 등이 있다.
(주로, 텍스트나 내용을 구성하는데 사용된다.)
Inline-block
Inline-block은 인라인 요소와 블록 요소의 특징을 모두 가지고 있다. 따라서 인라인 요소처럼 한 줄에 배치하면서, 블록 요소처럼 크기와 마진 등을 조절해야 하는 경우에 inline-block이 유용하게 사용된다.
Inline-block을 사용하기 좋은 경우
- 수평 메뉴 생성: inline-block은 메뉴 아이템들을 수평으로 배치하면서 각각의 아이템에 마진, 패딩, 너비, 높이 등을 적용할 수 있게 해주므로 수평 메뉴 생성에 유용한다.
- 그리드 레이아웃: inline-block을 사용하면 요소들을 그리드 형태로 정렬하는 데 유용하다. 블록 요소처럼 너비와 높이를 설정할 수 있으며, 인라인 요소처럼 여러 요소를 같은 줄에 배치할 수 있기 때문이다.
- 이미지 갤러리: 이미지 갤러리를 만들 때 inline-block을 사용하면 이미지를 가로로 나열하면서 이미지 간의 간격을 조정할 수 있다.
- 텍스트와 함께 있는 아이콘: 아이콘과 텍스트를 같은 줄에 배치하면서 아이콘의 크기나 마진을 조절해야 하는 경우에 inline-block을 사용할 수 있다.
참고할 요소들
- <img>: 기본적으로 인라인 요소지만, width와 height 속성을 사용하여 너비와 높이를 지정할 수 있어 inline-block 처럼 보일 수 있다.
- <br>: <br> 태그는 인라인 요소이지만, 블록 요소처럼 줄 바꿈을 수행하지만, width, height, margin 등의 CSS 속성을 적용할 수 없다.
- <textarea>: <textarea> 태그는 블록 요소와 유사하게 작동하는데, 텍스트 영역의 크기를 cols와 rows 속성으로 지정할 수 있어, 마치 inline-block처럼 작동한다.
- <input>: <input> 태그는 기본적으로 인라인 요소이지만, type 속성에 따라 다르게 동작한다. 예를 들어, type="checkbox"나 type="radio"는 inline-block 요소처럼 동작하며, type="text"는 블록 요소처럼 동작할 수 있다.
- <button>: <button> 태그는 인라인 요소이지만, 블록 요소와 같이 너비, 높이, 패딩, 마진 등을 조절할 수 있다.
- <li>: <li> 태그는 기본적으로 블록 요소지만, <ul>이나 <ol> 안에서만 사용되는 특성 상 인라인 요소처럼 동작하기도 한다. display 속성을 inline 또는 inline-block으로 설정하면 수평 목록을 만드는 데 사용할 수 있다.
각 태그들이 어떤 display를 가지고 있는지 알고 있는 게 당연할 수 있겠지만, 이렇게도 저렇게도 짜보면서 연습이 필요한 시점이다.
flow가 예상했던 대로 흘러가지 않는다면, 개발자도구로 부모요소나 자식요소의 display를 우선적으로 봐서 당황하지 말자.
