[Frontend Mentor] FAQ Accordion main 아코디언 페이지

오늘 도전한 과제는 FAQ 아코디언 페이지다.

질문 옆에 있는 + 버튼을 누르면 자세한 내용이 나온다.

 

시맨틱한 Html를 작성하기 위해 아이콘 부분은 img가 아닌 div로 태그를 정했다.

백그라운드 이미지로만 해당 아이콘들을 넣었다.

 

자바스크립트 코드를 추가하여 플러스 버튼을 누르면 hidden을 사라지게 하여

아코디언을 구현할 수 있었다.

 

이번에 새롭게 다루어본 css는 배경이미지와 배경색을 한 번에 넣는 것.

먼저 배경이미지를 넣고 그 뒤에 no-repeat, 색상 이름을 쓰면 끝!

그럼 배경이미지의 크기를 넘어가는 부분은 해당 색상이 보인다.

 

이번에도 모바일과 데스크톱이냐에 따라 다른 ui를 적용하여

반응형디자인으로 개발을 완료했다.

다 만들고보니 글씨가 조금 작은 것 같기도...?

 

지금 연달아 3개는 오직 Html과 css로만 만들었다.

사실 이번에는 scss를 쓰긴 했다.

좀 더 발전된 개발을 위해 react나 tailwind를 써야 하는게 아닌가 고민중...