코딩 과정 : 코드펜 열기
아코디언 vscode 폴더
코드를 구현할 때는 항상 파일 연결이 잘 됐는지 body에 배경색을 칠해서 확인해주는 습관 들이기.
기본 구조를 잡고 각각 꼼꼼하게 선 속성과 노멀라이징을 해준다.
여기서 문제점.
section을 전체적으로 너비 고정을 시키고 너비높이를 준다? -> 레이아웃과 안맞고 화면 크기가 달라지면 각 화면에 맞게 자유자재로 유연해질 수가 없다.
해결방안.
container가 section의 자식으로 들어가야된다.
container의 높이는 고정하지 않고 유연하게 쓸 수 있도록 만들어주고,
너비는 1000px, 중앙정렬 해준다.
질문 박스를 누르면 밑에 답변박스가 나오도록 구현.
저 질문과 +는 li안에 들어가 있는 것이다.
저걸 눌렀을 때 밑에 답변박스가 나오도록 하려면 높이가 유연하게 내려갔다 올라갔다 해야되기 때문에
li에는 높이를 auto로 풀어줘야하고,
li안에 질문박스와 답변박스 총 두개의 div를 만들어서 그 안에 span 2개를 넣어줘야 맞는 것이다.
이러한 결과물을 만들기 위해서 a-box에는 lorem*2로 텍스트를 넣어주고,
선속성, 배경색, 여백값, 모서리 커스텀, 글씨 색, 질문과 + 간격 조절까지 각각 커스텀 해준다.
밑에 답변 박스를 제이쿼리로 애니메이션을 걸어줄거라서 일단 none처리를 해준다.
none처리를 하고 나서 결과를 확인해보면,
보기 싫게 여백이 남아있는 걸 볼 수 있다.
=> 질문박스에 여백이 들어갔기 때문이다.
그래서 none처리 되는 곳에 여백을 넣어주는 것이 좋다.
처음엔 bottom으로 여백을 처리하되, 나중에 일어나는 현상을 보면서 해결해주는 것이 좋다.
(bottom으로 처리해야 좋은 점 : margin-bottom과 top이 만나면 상쇄가 일어남. 그러면 해결하기 어려움)
이런 예외적인 상황에서는 margin-top을 써주면 된다.
새로고침하면 여백이 사라진다.
li를 하나 더 만들어줘서 여백을 확인하고 hover를 걸어서 문제가 없는지를 확인해줄것이다.
결과물을 확인해보니까 여백값이 없기 때문에 gap을 이용해서 여백을 넣어준다.
li를 감싸고 있는 ul에 flex를 적용해서 해결해주면 된다.
이제 두가지 조건을 걸어줘야한다.
1. 마우스를 올렸을 때 답변박스가 나와야함.
2. [+]가 [-]로 바껴야함.
<1번 조건 맞추기>
q-box가 아니라 li에 효과를 주는 이유는
제이쿼리를 사용하게 되면, 나를 제외하고 나머지 형제들은 다른 이벤트가 들어가라 라고 명령을 해줄건데
q-box에 active hover를 걸어주면 형제가 a-box밖에 없기 때문에 li에 써주는 것이다.
<2번 조건 맞추기>
-로 바뀌는 걸 제이쿼리, 자바스크립트 뿐만아니라 css로 해결할 수 있는데
해결방법은 가상요소를 써주는 것이다.
가상요소는 코드를 바꿀 수 있다는 큰 장점이 있다.
span태그에 [+]는 주석처리해서 없애준다.
가상요소는 자식요소로 작동한다.
그러므로 span이 아닌 q-box에 걸어서 q-box의 자식으로 작동하게 해야한다.
before인지 after인지도 확인해야함.
무조건 가상요소는 content " " 써줘야한다.
faq-box의 자식인 ul의 자식인 li에 마우스를 올리면 그의 자식인 q-box 가상요소가 [-]로 바뀐다는 뜻.
'웹3' 카테고리의 다른 글
| slideUp / slideDown 애니메이션 (03.27) (1) | 2024.03.27 |
|---|---|
| 아코디언 js 구현 (03.26) (0) | 2024.03.26 |
| 새로운 개념 - this (03.25) (0) | 2024.03.25 |
| hasClass (03.22) (0) | 2024.03.24 |
| 팝업구현(6)-팝업창 맨 위로 띄우기, 문제점 해결 (0) | 2024.03.24 |