DYO 공부하는 블로그

마진 상쇄 때문이다.마진(margin) 속성은 요소의 바깥에서 '밀어내는' 속성을 가진다. 그런데 margin top,bottom을 동시에 30px 적용하면 어떻게 될까? 30px + 30px = 60px로 서로 밀려나는 게 아니라, 30px만이 적용된다.마진 상쇄는 인접한 블록 요소 사이의 margin-top과 margin-bottom이 겹칠 경우 두 마진 중 더 큰 값 하나만 적용된다. 아래는 MDN 공식 문서의 예제 코드이다. The bottom margin of this paragraph is collapsed … … with the top margin of this paragraph, yielding a margin of 1.2rem in between. This parent element..

웹 페이지를 설계하면서 가장 어려웠던 부분은 '이 요소를 어떻게 형태감 있게 수평정렬하지?' 라는 고민이었다. XML로 화면을 설계하는 안드로이드 같은 경우에는 화면에 대한 정렬을 Layout이라는 요소를 사용해서 정렬할 수 있었기 때문에, 웹 페이지 설계에서 '정렬'에 대한 고민을 하지 않을 수 없었다.flex 컨테이너는 웹페이지에서 수평 정렬을 도와주는 요소이다. 한 줄에 들어가는 아이템의 개수를 정하고 요소의 크기를 줄이거나, 아이템을 줄넘김하기 편하기 때문에, 반응형 웹 등을 설계할 때는 필수불가결한 요소가 된다. flex를 알아보기에 앞서 알고 있어야 할 display의 속성들block : 웹 페이지에서 수직으로 정렬되는 컨테이너inline : 블럭 요소 안에 줄넘김되지 않고 쭉 늘어지는 요소f..