👩‍🎤 프론트엔드/css

[CSS] Negative margin (음수 마진)

Negative Margin (음수 마진) 1. static인 경우 1. top, left에 음수 마진을 적용한 경우 See the Pen Untitled by Minkyung Shin (@minkyung00) on CodePen. top 또는 left 방향으로 해당 요소가 이동한다 첫번째 요소에 margin-top: -50px를 하면 두번째, 세번째 요소도 함께 top 방향으로 50px만큼 이동한다 2. right, bottom에 음수 마진을 적용한 경우 See the Pen Untitled by Minkyung Shin (@minkyung00) on CodePen. 다음 요소를 right 또는 bottom만큼 이동시킨다. 즉, 해당 요소와 다음 요소가 겹치게 된다 첫번째(top에 음수마진)과는 달리 ..

display, position, float 속성 간의 관계

Normal flow (일반적인 흐름으로 배치되는 경우) Normal flow란 순차적으로 박스가 배치가 되는 경우다 Normal flow에서 박스들은 formatting context를 따릅니다. CSS 2.2 에서는 table, block, inline이 해당된다 블록 레벨의 박스는 block formatting에 속하고 인라인 레벨의 박스는 inline formatting에 속하고 table formatting은 https://www.w3.org/TR/CSS22/tables.html 여기에 작성되어 있다 Block formatting context float, position이 absolute인 요소, 블록 박스는 아니지만 inline-block, table-cell, table-caption과 같..