우리가 CSS를 하다보면 의도하지않게
레이아웃 혹은 BOX가 뜻대로 움직이지 않는경험!
왜 이럴까? 왜 레이아웃이 자꾸 무너질까?
Model을 제대로 이해 못해서? BoxSizing을 안해서? 물론 그럴 수 있다.
하지만
바로 BOX를 제대로 이해하지 못해서이다.
우리는 대부분의 사람들을 보면,
Box보다 Model에 대해 더 많이 알고있다.
사실BoxModel보다 앞선 개념인 Box에 대해 제대로 이해를 해야된다.
CSS랜더 하는 과정을 보면, HTML요소를 사각형 모양의 BOX로 표현하고, -> 원하는 위치에 배치한다.
근데 여기서 중요한것은 BOX의 Type이 뭔지에 따라 Box의 Model이 어떤식으로 작동할지도 천차만별로 달라진다.
예) 각나라 사람들마다 사고하는방식, 행동하는 방식이 다른것처럼말이다.
Box Type-> Box Model
즉, 어떤 Type의 Box를 사용하냐에 따라서 기본적으로 BoxModel의 작동방식 또한 완전히 달라진다.
따라서 BoxModel공부만 하는것은 아무 의미가없다.
❗ 그럼 이제 제대로 Box에 대해 공부해보자!
Block / Inline / InlineBlock / Flex
| Box Type | 속성(attribute) |
설명 |
| Block | Box Model에 있는 모든 속성들은 다 Block Type에게 적용이 가능하다 width, height, padding, border, margin 👌 |
길막 사전적 의미 : (지나가지 못하게)막다, 차단하다 브라우저가 HTML을 화면에 랜더를 할때 Markeup이 된 순서대로 위에서부터 아래로 차곡차곡 쌓여나가는데, 그럴때 쌓아올린 요소가 Block Box라면 자기 다음에 오는 요소가 옆자리에 오지 못하게 쭉~ 길막을한다. |
| Inline(즉, line속에 있는다) | Box Model의 속성중에 width, height, padding-top, padding-bottom, border-top, border-bottom, margin-top, margin-bottom을 ❌ 사용하며 안되며, 사용해도 먹히지않는 사용불가 |
흐름 Block이랑은 정반대의 행동패턴을 가진다. 예 ) 우리가 문서에 글 쓸때랑 완전히 같다 글을 작성하다보면 가로로 쭉 ~ 작성을 하는데, 공간이 없으면 아래로 자동으로 떨어지듯이 그래서 text또한box는 아니지만, inline의 성격을 가지고 있다 라고 참고하자. |
| Inline Bllock | 짬짜면 Block의 좋은점과 Inline의 좋은점을 모두 다 가지고있다. |
👍추가메모 :
Box Type을 결정짓는 CSS속성 Display
∴ Dixplay값이 무엇이냐에 따라 Box Type이 달라진다.
모든 HTML요소는 다 Display값을 가지고있다.
당연하다.
왜냐면 모든 HTML요소는 Box로 표현이 되기때문에 어떤 Type의 Box인지도 당연히 지정이 되어있을 것이다.
HTML요소들은 각자 기본적으로 Display값을 가지고있는것을 확인할 수 있었다.
따라서 Display속성에 내가 원하는 Box Type을 넣어주면 그 Box Type이 무엇이냐에 따라서
그 요소가 작동하는 방식이 완전히 달라진다.
Block 의 길막 성질에서 여러가지 Block의 다른 속성들도 파생이된다.
Block 성질(특징) 1.
Block Type요소에 별도의 width를 선언하지 않은 경우,
width = 부모의 content-box의 100% 즉, 자기가 자기의 부모가 가지고있는 모든 영역만큼 width를 쫙~차지한다
그래서 아래 따라오는 다른 요소가 있다고 한들 위에 공간이 없으므로 절때로 자리를 침범할 수 없다.
개발자 도구를 살짝 줄였을경우, child는 부모인, parent의 크기를 따르고 parent는 부모가 body의 가로를 갖는다.
따라서 결론적으로는 child는 body의 크기를 고대로 갖는것이다 왜냐? parent또한 사이즈 지정이안됐으므로
body의 가로사이즈를 받기때문이다.
Block 성질(특징) 2.
그럼 반대로 Block Type요소한테 별도의 width값을 줬다면? 남은 공간은 margin으로 자동으로 채우게된다.
근데, 이게 뭐가 그렇게 중요할까? 바로 오른쪽에 - (짝대기...) 하나 그어져 있다.
하지만 margin이 있다! 빈공간이 아니다!
분명 margin이 차지하고 있는 공간인데, 현재의 css툴로는 정확하게 나타내주지를 못한다.
그래서 이런거를 제대로 안짚고 넘어가서 이런거를 쌓이고 쌓이다보면, CSS디버깅할때 골치가 아파진다.
따라서 한 번쯤 사용해본 margin: 0 auto ; 같은 속기형 또한..외울필요없다 )block이 어떤식으로 동작하는지에 대해서 제대로 이해만 했다면 말이다! )
예를들어 내가 margin-left: auto;를 주면 오른쪽으로 배치가 된것을 확인할 수 있는데 이는 엄밀히 말하면 오른쪽으로 배치가 된것이 아니라 그저 자동으로 생기는 margin(분명block은 특성상 자동으로 margin이 생긴다고했다)에 대해서 전부 왼쪽으로 몰빵해주겠다! 라고 선언하는 것이며
위의 사진과같이 개발자도구를 확인하면 진짜 그렇다. 그런데 이때! margin-right:auto; 를 주면
사이좋게 왼쪽 오른쪽 띄워지면 가운데정렬이 되는것을 확인할 수 있는데, 그래서 margin : 0 auto; 라는 것이 나오게되었다.
Block 성질(특징) 3.
height에 대하여 공부해보자.
우리가 별도의 height값을 block에게 주지 않으면, block은 자신의 자식이 가지고 있는 세로 높이 공간 만큼을 자신의 높이로 자동으로 설정하게된다.
즉, 따로 부모의 height를 선언하지 않을 경우, 자식 요소의 height의 합 = 부모의 height
child와 other의 높이를 50px씩 차지 하고 있으므로 합쳐서 100px이 된 것을 확인 할 수 있다.
Block vs Inline
면(영역을 잡기위해 사용되는 Box Type) vs 선(콘텐츠를 옆으로 흐르게하는 흐름)
이러한 기본전제를 생각하면 Inline Box가 가장 극혐하는 행동이 무엇인지 살짝 유추가 가능하겠다.
근데 갑자기 흐름을 깨뜨리거나 선의 리듬을 방해하는 녀석이 나타나면 정말~싫어할것이다.
여기서 이제 Inlinebox의 중요한 특징이 나타나는데, Box Model의 속성중에
width, height, padding-top, padding-bottom, border-top, border-bottom, margin-top, margin-bottom을 사용불가합니다.
왜냐하면 얘네들은 그 흐름을 박살 내려고 하는 녀석들 때문이라서 그렇다.
※ span은 가장 대표적인 inline요소중 하나이다. 모든 HTML요소는 display값이 있다고 하였는데,
그런데 span , anchor , strong 태그 같은 경우는 기본 dispaly값이 inline인 값인 친구들이다.
padding-left : 100px을 주었다.
padding-left, padding-right 혹은 margin-left, margin-right 의 경우에는 이러한 inline의 흐름을 깨뜨리거나 방해하지않는다. 왜냐하면 text가 유유자적으로 잘 흐르는데, 공간이 모자라면 (아래로)떨어지면 되기때문이다.
그런데 이제 padding-top:30px을 줘보았다.
어핏보면 생겼으니까.. CSS가 잘 먹었다고 생각했을 수도 있겠지만,엄밀히 따지면 안생긴거라고 할 수 있다
왜냐하면 저게 영역/공간으로써 의미가 있었다면 줄이 밀려다가야 하지만, 텍스트를 덮어버린...룰 브레이크고, 나머지 애들 또한 무시하면서 유유자적 흐르고있다.. 이는 버그라고 할 수 있으며, 하지 말아야 할 행동을 했다고 할 수 있다.
따라서 정리를 하자면, width, height, padding-top, padding-bottom, border-top, border-bottom, margin-top, margin-bottom같은 속성의 경우 Inline에서 사용하며 안되며, 사용해도 먹히지않는 속성들이지만 CSS같은 경우는 다른 JavaScript처럼 error를 띄워주지 않고, 그냥 안되고 있는데.. 이게 뭣때문에 잘못되었는지 알려주지도 않는다.
그럼 멘붕이온다..
그래서 Block과 InlineBox의 기본성질을 제대로 이해하는것이 행복한 CSS를 하는데 중요한역할을 한다!
Inline Block
짬짜면
Inline은 흐름을 지닌아이다. 이 흐름덕분에 가로배치가 기본적으로 작용이된다는 것은 유용했지만, width& height 등 같은 사용못하는 속성들이있어서 요소들을 다루기에 굉장히 불편한점이있었다.
Block은 영역잡기에는 굉장히 못지만, 길막 하는 성질때문에 가로배치가 어려웠던 단점이 있었다.
그치만 여기서 Inline Block은 Inline에 Block의 능력을 탑재한 녀석이다!
즉, 가로로 흐르는 동시에 Block처럼 영역을 잡을 수 있다
span에 display:inline-block; 을 주고, 개발자 도구에서 width:500px과 height:200px을 주면 다 먹는것을 확인 할 수가 있다.그럼 당연히 padding-top, margin-bottom 등 모두 다 사용하면서 영역을 다 잡을 수도 있다.
결론 :
즉, 각각의 Box Type에 따라서 사용용도,사용해야하는 타이밍이 다 다르다
따라서 공부한 Block / Inline / InlineBlock 에 대해 다 이해를 했다면,
Layout을 공부함에 있어서 튼튼한 기반을 쌓을 수 있다고 생각하면 좋을 것 같다 !
참고자료:
최근댓글