css지옥에서 탈출하자(7) - display inline-block 나열시 공백 제거하기

이 시리즈는 필자가 웹프로그래밍을 겪으면서 생각처럼 잘안되고 짜증나는 css를 효율적이게 쓰기위해서 만든 시리즈이다.

여기에 들어온 여러분들도 이 쓰레기 같은 css의 고통을 같이 덜수 있기를 바란다.

참고:

css지옥에서 탈출하자(1) - 인라인 요소(inline element)와 블록 요소(block element)는 다르다.

css지옥에서 탈출하자(2) - display와 인라인(inline), 블록(block) 그리고 div를 display를 이용해서 옆으로 나열

css지옥에서 탈출하자(3) - display와 flex, 세로로 뭔가 배치하고 싶다면 flexbox를 쓰자, (추가로 div를 flex로 나열, 비율에 맞게 div 세로로 배치)

css지옥에서 탈출하자(4) - display: flex와 margin: auto를 이용해서 기존의 문제 해결(header나 nav에서 한 엘리먼트만 좌측 배치, 바닥에 붙는 footer, 수직 중앙정렬)

css지옥에서 탈출하자(5) - 엘리먼트를 드래그 앤 드랍(drag and drop)으로 자유롭게 옮긴다고?

css지옥에서 탈출하자(6) - css로 삼각형을 그려보자

See the Pen block:inline-block:inline by justkukaro (@kukaro) on CodePen.

저번에도 언급했지만 display inline-block은 block과 inline의 특성을 섞어놨지만 사실 배치할때는 inline이라고 생각하면 편하다.

공백이 생기는 이유는 inline의 특성이다. inline에서는 몇가지 특징이 있는데 바로 글자를 개행으로 쓰는것과 붙혀 쓰는것과 차이가 있다.

See the Pen btag-atag by justkukaro (@kukaro) on CodePen.

보면 느껴지는가? html에서 붙혀쓰는것과 개행하는게 다르다.

block에서는 둘이 동등하다. 하지만 inline에서는 가독성 문제때문에 조금의 공백을 두게된다.

이는 font-size와 연관성이 있는데 font-size가 늘어 날수록 가독성 공백이 늘어나게된다.

chrome에서 기본 font-size는 16px쯤 된다.

그럼 여러분도 추측하겠지만 해결방법역시 2가지가 있다.

글자 붙혀쓰듯 붙혀쓰면 inline-block도 붙혀써 지는거 아닐까?

See the Pen inline-bloc space remove:chain by justkukaro (@kukaro) on CodePen.

이런 발상이 떠올랐다면 당연히 정답이다.

보기는 좀 많이 불편해 질것이므로 사실 추천하는 방식은 아니다.

그럼 font-size를 없애면 없어지나?

See the Pen inline-bloc space remove:font-size by justkukaro (@kukaro) on CodePen.

이 역시 당연히 정답이다. 다만 이때는 더 상위의 font-size를 바꿔줘야한다. 이 padding은 font-size에 따라 자동결정된다.

따라서 font-size를 0으로 하면 자동으로 수정되는 것을 확인할 수 있다.