flex 사용하지 않고 HTML 태그들을 가로 정렬시키는 방법(+코드펜예제)

항상 flex를 사용해서 아주 쉽게 모든 HTML 태그들을 가로 정렬시킬 수 있었지만, 이번에는 flex를 사용하지 않고 태그들을 가로 정렬을 시켜보는 연습을 했다. 

 

이를 제대로 알고 구현하기 위해서는 inline, block, inline-block을 제대로 알고 있어야 한다. 

CSS에는 block-level과 inline-level의 구분이 있다. display 값은 모두 이 2가지 범주 중 하나에 속한다. 

 

 

block-level

---

블록 레벨 박스는 요소 박스가 기본으로 부모 요소의 콘텐츠 영역 너비를 채운다. 블럭 요소가 있을 경우 줄바꿈 현상이 일어난다. 

 

• block은 height, width, margin, padding을 지정할 수 있다. 

블록 박스를 만드는 display 값:
block, list-item, table, table-row-group, table-header-group, table-footer-group, table-column-group, table-row, table-column, table-cell, table-caption, flex, grid

출처: w3schools

 

inline-level

---

인라인 레벨 박스는 요소 박스가 텍스트 행 안에 생성된다. 줄바꿈을 만들지 않기 때문에 다른 요소의 디스플레이를 방해하지 않그 그 콘텐츠 안에 존재할 수 있다.

 

• inline은 height, width를 명시할 수 없다.
• margin은 상하로는 적용되지 않는다.
• padding은 상하좌우 모두 적용된다. 

인라인 박스를 만드는 display 값:
inline, inline-block, inline-table, ruby

 

여기서 확인할 수 있듯이 inline-block도 inline-level이라는 점을 기억하자!

 

출처: w3schools

728x90

 

See the Pen block과 inline 차이 by 고주디 (@1two13) on CodePen.

 

 

inline-block

---

위에서 살짝 언급했듯이 inline-block은 inline 특징과 block 특징을 모두 가진 요소이다.

 

• 줄바꿈이 되지 않는다.
• block처럼 width, height을 지정할 수 있다.
• 만약, width와 height를 지정하지 않은 경우 inline과 같이 컨텐츠만큼 영역이 잡힌다. 

 

 

+ HTML과 CSS의 블록 레벨, 인라인 레벨의 차이?

---

거의 비슷하긴 하지만, HTML에서 블록 레벨 요소는 인라인 레벨 요소 안에 들어갈 수 없지만,

CSS에서는 디스플레이 역할과 무관하게 블록 레벨이 인라인 레벨 안에 들어갈 수 있다. 

반응형

 

 

 

그럼 다시 본론으로 돌아와서 

어떻게 flex 사용하지 않고 HTML 태그들을 가로 정렬시킬 수 있을까?

---

예를 들어 부모 <div> 안에 2개의 <button>과 1개의 <h1>가 있다고 가정해보자. 

참고로 <button>은 inline-level이고, <h1>는 block-level이다. 

 

<div>
  <button><</button>
  <h1>나는 div</h1>
  <button>></button>
</div>

 

간단하다. block-level 요소를 inline-block으로 변경해주면 된다. 하지만 <h1>에게 display: inline-block; 속성을 줬을 때 발생되는 또 다른 문제점이 있다. 모든 HTML 태그들이 가로 정렬은 되지만 가운데 정렬은 되지 않는다!

 

See the Pen flex 사용하지 않고 HTML 태그들을 가로 정렬시키는 방법 by 고주디 (@1two13) on CodePen.

 

해결방법부터 말하자면 <h1>에게 vertical-align: middle; 속성을 주면 해결이 된다. vertical-align은 조금 특이한(?) 알다가도 모를 녀석이기 때문에.. 다음 글에 이어서 작성하도록 하겠습니다. 곧이요!

 

 

 

 

참고자료

---

• https://ajdkfl6445.gitbook.io/study/html5-css/block-level-inline-level

• https://www.w3schools.com/html/html_blocks.asp

• vertical-align, 하이브랩

 

 

---

질문이나 잘못된 점은 댓글로 남겨주세요 :)💖