Team Project 2 | Dropdown | 바닐라코드 | 인스타그램 클론코딩 | 🌱

드롭다운 작동

 

 

드롭다운을 바닐라 코드로 만들어봄 ! 

if문과 show, hide를 사용할 줄 안다면 누구나 만들 수 있다.

하지만 나는 어제가 되어서야 정확하게 만들 수 있게 됐다.

 

구현하지 않음

• 히스토리 내역
• 링크 연결(저장,설정,계정 변환)
• 클릭시 아이콘 색 변화

 

코딩하면서 어려웠던 점 

• 아이콘 클릭 시, 상단 아이콘'들'이 위로 올라가는 현상

              : 상단 아이콘과 히스토리 부분의 태그가 둘 다 <list> 태그길래 히스토리 태그를 <list> 에서 <div>로 바꿈

• 히스토리 드롭다운이 숨겨져있지 않고 처음부터 보여져있는 현상

              : 아무리 display / visibility / opacity 를 바꿔봐도 상태가 변화가 없었다.

                개발자 도구를 이용해 히스토리 드롭다운을 클릭했을때, 

                작은 삼각형과 네모가 한번에 묶여져 있는 태그가 없었기 때문에 일어났던 현상.

                간단히 위의 문제점을 해결하면서 <div>태그에 클래스를 부여해주고

                if문과 show,hide 사용하여 해결함

 

 

좌 히스토리 / 우 유저