Programing/CSS

Programing/CSS

[간단비교] inline & inline-block

처음 html,css 를 배울 때 웹 페이지 상 요소가 차지하는 공간에 대해 배우게 됩니다. 그렇게 가장 대표적으로 display 적으로 차이가 발생하는 inline 과 block 에 대해서 배우게 되는데, 종종 보이게 되는 inline-block 에 대해서 궁금증이 생겨 비교해보려 합니다. display: inline 처음 크롬창에서 요소 특성에 대해 공부할 때, 태그를 검사해보면 차지하는 공간이 딱 content/text 를 차지한다는 점을 알 수 있습니다. (가장 기본적으로 배웠던..) text 만큼의 공간을 차지하기에, 여러 을 붙이기도, 혹은 한 단락 글 내부에 을 넣어서 넣은 부분의 text 에 효과를 주려고 사용하곤 합니다. 모두다 inline 의 특성을 가지고 있기 때문에 가능합니다. 대표..

Programing/CSS

Position

크롬에서 웹 페이지 검사를 실행해보면, 각 요소(element)들은 각자의 고유 공간을 차지한다는 것을 알 수 있습니다. 이러한 속성을 인지하여 스타일을 작성할 때 margin, padding 등 차지하는 공간에 변화를 주어 위치를 수정하곤 합니다. 근데, 요소는 각자의 공간을 차지한다 하였지만, 마치 화면에 겹쳐서 표현되어 보이는 사이트들을 너무 쉽게 접할 수 있습니다. 어떻게 표현한 것일까요? 기본적으로 요소들은 자신의 공간이 있기에, 그 공간을 침범하지 않습니다. 속성이 inline 이던 block 이던지 마찬가지입니다. block 역시 차지하는 높이만큼 그 공간 자체를 모두 가지고 있기에, 다음 요소는 그 밑에 위치합니다. 이러한 요소들의 위치를 수정하기 위해서는(보통 간격) 검사 style 창에..

Yelihi
'Programing/CSS' 카테고리의 글 목록