기초부터 완성까지1 [CSS] 레이아웃 구현에 영향을 미치는 여백 상쇄 오늘 '기초부터 완성까지, 프런트엔드' 책을 읽다가 내가 모르던 CSS 개념을 발견했다! 그것은 바로 '여백 상쇄'다. 때때로 레이아웃이 내가 생각한대로 구현이 안되는 경우가 있다. 그럴 땐 여백 상쇄 때문은 아닌지 고려해봐야겠다. 여백 상쇄란? 인접한 같은 레벨의 블록 요소에 상하 여백이 겹치면 여백이 하나로 합쳐지는 현상이다. 같은 레벨이라는 것은 두 요소가 형제 관계에 있다는 것을 의미한다. 예시로 이해를 해보자. 위아래 margin을 30px을 준 p 태그가 있다. 이 태그 두 개를 위 아래로 붙이면 p 태그와 p 태그 사이에 60px의 여백이 생길 것 같지만 그렇지 않다. 신기하게도 여백은 60px이 아닌 30px이다. 하나의 여백이 훨씬 더 크다면? 그렇다면 한 태그의 margin은 50px이.. 2023. 4. 19. 이전 1 다음
