Css

각각의 question을 클릭했을 때 아래에 접혀져있던 answer칸이 펴지는 구조이다.(answer컨테이너는 li를 클릭했을때 보이도록 자바스크립트 처리를 해줬다.)처음에는 보자마자 단순히 li들마다 위아래 보더를 주면 되겠거니 쉽게 생각했다.그러나 이렇게 보더가 겹

마우스를 hover 할 경우, 밑줄이 왼쪽에서 오른쪽으로 그어지는 애니메이션이다. ul 태그 안에 li > a 태그 구조이다. a태그에 position: relative를 줘야 위치가 제대로 그어진다. a::after태그를 이용해서 위치를 지정해주고, conte

컨테이너\-카드 박스\---카드카드 박스에 width값을 calc함수를 사용하여 100% / 3으로 나눠주고, 여백을 위해 -2rem을 해줬다.그리고 각각의 카드에는 width 100%, height 0, padding-bottom 100%를 주면 화면의 크기에 따라