마진겹침 현상

마진겹침 현상이란? 동일한 BFC에 존재하는 블록 엘리먼트에 한해서 발생하는 현상이다. 오직 수직 방향에서만 적용된다. 2개의 마진이 겹칠 때 더 큰 마진으로 덮어 씌우는 방식이며 하나의 마진이 음수일 경우 더하는 방식을 취한다. 발생 예시 1. 인접한 엘리먼트 div { width: 100px; height: 100px; background-color: red; } .element1 { margin-bottom: 20px; } .element2 { margin-top: 40px; } 위 적용예시를 보면 더 큰 마진인 40px 로 덮어씌워진 것을 확인할 수 있다. ( 첫번째 div의 margin-bottom이 적용되지 않은 모습이다.) 마진이 음수인 경우는 어떨까? div { width: 100px; h..

transform-origin 이란?

transform-origin transform 과 함께 쓰이는 CSS 이다. transform 이 발생하는 기준점 위치를 정한다. transform-origin: 50% 25% transform-origin: 100% 100% transform-origin: 0 0; 백문이 불여일견 이제 한번 돌려보자. 파란색 사각형에 hover 하면 rotate 된다. See the Pen Untitled by ehddud1006 (@ehddud1006-the-looper) on CodePen. 그래서 이걸 어디 써먹나? transform-origin , transform: rotate , overflow:hidden 을 잘 사용하면 저렇게 뽀족한 UI 를 만들 수 있다.

[Flex] 일분코딩

https://studiomeal.com/archives/197 이번에야말로 CSS Flex를 익혀보자 이 튜토리얼은 “차세대 CSS 레이아웃” 시리즈의 첫번째 포스트입니다. 이번에야말로 CSS Flex를 익혀보자 이번에야말로 CSS Grid를 익혀보자 벌써부터 스크롤의 압박이 느껴지고,‘좀 편안하게 누 studiomeal.com 위 강의자료를 보면서 다시 한번 상기시키면 좋을만한 내용을 메모합니다. inline-flex inline-flex 라는게 있었네요. 몰라서 사용을 못했던 것 같습니다. flex 를 사용하면 화면에 가로축을 모두 차지하게 되는데, inline-fliex 를 사용하면 element의 크기만큼 으로 container 가 줄어들기 때문에 빈 공간에 다른 element 가 올 수 있게 ..