이 시리즈는 필자가 웹프로그래밍을 겪으면서 생각처럼 잘안되고 짜증나는 css를 효율적이게 쓰기위해서 만든 시리즈이다.
여기에 들어온 여러분들도 이 쓰레기 같은 css의 고통을 같이 덜수 있기를 바란다.
참고:
css지옥에서 탈출하자(1) - 인라인 요소(inline element)와 블록 요소(block element)는 다르다.
하다보면 정말 짜증나는게 이 inline과 block라인 정책, 그리고 이 때문에 이상하게 적용되는 display이다.
먼저 이 둘이 다르게 적용되는걸 이해해야 나중에 손을 볼 때 쉽게???? 고칠 수 있다.
먼저 여러분이 자주 생각할 수 있는 문제점을 정의하고 이에 대해서 고찰해보도록 하자.
목차
1. inline안에 inline이 있다. 근데 안쪽의 inline의 크기가 변하면 바깥쪽은?
2. block안에 inline혹은 block이 있다. 근데 안쪽의 element의 크기가 변하면 바깥쪽은?
3. block을 inline처럼? inline을 block처럼? 아니면 둘다? => display가 답
번외 .div를 inline처럼 배치하고 싶지만 크기를 가지고 싶어 => div를 옆으로 쭈르륵 나열하고 싶어
1. inline안에 inline이 있다. 근데 안쪽의 inline의 크기가 변하면 바깥쪽은?
여기의 경우 a는 outer고 b는 inner이다.
여기서 b의 크기를 변경하면 어떻게 될까?
b를 감싸고 있는 a도 크기가 바뀌리라 라고 생각하는게 일반적이다.
그러나 이러한 기대는 무참히 짓밟히게 될 것이다.
와... 할말을 잃었다.
왜 이렇게 만들었는진 모르겠지만 inline display 정책에서는 inner가 바뀐다고 해서 outer까지 바뀌지 않는다.
하지만 또 차지하는 공간은 inline에서 가장 큰녀석으로 계산된다.
이를 그리드(네모)로 생각했을때 네모처럼 공간을 차지하게 된다.
2. block안에 inline혹은 block이 있다. 근데 안쪽의 element의 크기가 변하면 바깥쪽은?
크기를 정하지않았다면 블록 엘리먼트는 높이의 경우 내부에서 가장 큰녀석이 자신의 높이가된다.
가로는 뭐 생각할 필요가 없다. 어짜피 한줄을 전부 차지하게 되니까.
만약 크기를 지정하게 된다면 어떻게 될까?
크기를 지정하게 된다면 자기가 정한 크기까지만 보여주게된다. 하지만 차지하는 공간은 마찬가지로 제일 큰 녀석이 기준이 된다.
3. block을 inline처럼? inline을 block처럼? 아니면 둘다? => display가 답
위처럼 div의 display를 inline으로 바뀌었더니 inline정책이 적용되었다.
일단 크기를 지정하는 css가 모조리 먹히지 않으며 크기는 적절히 지정된다.
그리고 span태그처럼 inline요소들이 서로 나란히 나열되게 된다.
반대로 이를 이용해서 inline을 block처럼 한줄씩 내릴 수도 있다.
이렇게 b태그와 a태그가 마치 block element처럼 적용된다.
크기도 이제 정상적으로 작동하고 한개의 엘리먼트가 한줄을 몽땅 차지하게 된다.
div를 inline처럼 배치하고 싶지만 크기를 가지고 싶어 => div를 옆으로 쭈르륵 나열하고 싶어
이 때 사용하는게 inline-block이다.
이는 inline속성의 나열적 현상과 block의 크기를 조정할 수 있는 속성을 모두 차지할 수 있는 박쥐 같은 display이다.
하지만 inline-block을 사용해서 그냥 나열하면 element끼리의 공백이 생기게 된다.
이 공백의 정체는 바로 font-size와 연결되어있는데 inline은 사실 font를 위해서 만들어진 element이다.
글꼴들을 그냥 나열해서 쓸 경우 서로 공백을 주지 않아도 자동으로 공백이 셋팅된다.
예를 들어 b태그나 a태그, span의 경우 <a/><강제개행:br태그 아니라 enter><b/>같은 형식으로 붙혀쓰게되면 원래는 공백이 없지만
가독성을 위해서 html에서 자동으로 공백을 부여햐게된다.
chrome에서 일반 inline태그들의 기본 font-size는 최상위인 body에 따라 셋팅되며 body의 기본 font-size는 16px이다.
그리고 보통 이 px에 비례해서 공백이 셋팅되는데 4px가량된다.
그래서 이를 조정하는 몇가지 방법이 있는데 다음에 언급드리겠다.
display속성
inline : inline엘리먼트처럼 보이게 한다.
block : block엘리먼트처럼 보이게 한다.
inline-block : 옆으로 나열되게되며 크기도 지정할 수 있다.