qwef

안타깝지만 잘 작동하지는 않았다. 그러니까, 이렇게 요소들이 있으면, 이 때 하나를 hover하면 이런 식으로 만드는 것이 목적이다. 그러고 보니 생각해봐도 많은 사람들이 한번 쯤 생각해 봤음 직한 기능이지만, 실제로 구현한 것은 본적이 많이 없는 것 같다. 그래서 난 일단. 그리드 기능으로 만드는 것을 생각했다. 어떤 배열 형식으로 해서, grid-templates-areas 라는 기능이 있으니, 대충 배열로 잘 맞춰보면 되지 않을까 하고, 그러니까, a를 큰 4각형으로 만드려면 3개가 더 필요하다. 그거를 a다음으로 3개 추가시켜 나머지들을 뒤로 밀리게 하면 된다. 그리고 요소들 크기를 잘 맞춰 overflow hidden 하도록. https://youtu.be/5zFPep2sbns 저기 보면 막 떨..

일단 원 코드 봤을 때 좀 당황스러웠다. 나는 외부 라이브러리 안 쓰고 보통 바닐라 js로 하기 때문이다. 선생님도 Swiper 플립 이벤트를 드래그 대신 클릭으로 하는 것이 없다고 하셨다. 즉, 플립 되는 것은 Swiper의 클릭으론 못한다.. 그래서 카드 뒤집기 구현해서.. 되도록 말로만 설명 드리려 하지만, 경험치가 부족하신 분은 그냥 코드를 보여주는게 더 성장에 도움이 될 것 같아 보여드렸다. aaaa bbbb 뒤집는 것도 맞지만.. 그러니까 이게 뒤집은 걸 안보이게 하는거라 우리가 물리적으로 딱 붙어있어서 그거에 의해 가려졌다기 보다, 그냥 뒷면이면 숨겨지면서, 일종의 눈속임이다. 그냥 뒤집어져 있으면 hidden이지 앞쪽의 요소에 의해 가려진 게 아니다. .card{width: 300px; h..

https://youtu.be/aolExGkJHRY 선생님이 코드 자체를 직접 보여주지는 말라고 하셔서 은주팀 팀원 분들에게 코드 공개는 할 수 없고, 말로 설명을 드려야 한다. 그래도 일단 여기에 코드는 남길 수 있다. 대충 이미지 로렘픽숨으로, 클릭할 메뉴도 random의 인덱스를 같이 해서 같은 사진으로 맞춘다. 사실 여기서 중요한 건 js보단 css다. /* common */ body * {outline: 1px dotted red;} .inner{width: 1200px; margin: 40px auto;} .inner.slide{ background-color: rgba(rgba(5, 155, 255, 0.089), green, blue, alpha); position: relative; he..