아, 안녕하세요. 지금 웹 퍼블리셔 자격증 시험 준비중입니다.
홈페이지를 구현하는 게 시험인데 여기서 중요한 핵심은 제이콜리라고 판단했어요.2쿼리가 가장 중요하다. 이것이 제 결론입니다.
물론 구현하기도 어렵습니다.외워야 하는데 못 외워.
일단 제이콜리는 총 4가지로 사용되는 것 같습니다.
- 비주얼 인트로 이미지 슬라이드 배너 만들기 2. 탭 메뉴 만들기 3. 공지 팝업창 만들기 4. GNB 2단 메뉴 만들기
- 여기서 비주얼 인트로 이미지 슬라이드는 구현하지 못하면 그대로 실격 처리되므로 아무렇게나 구현해야 하는 것이 포인트입니다.
- 아, 어렵다–
- 일단…
2쿼리의 시작과 끝입니다.저렇게 제이콜리 구문을 넣어야 제이콜리를 실행할 수 있어요. 그래서 항상 저렇게 시작 문구를 써주시면 좋을 것 같아요
$로 시작해서 문서. 레이디 펑션 괄호가 중요하기 때문에 꼼꼼히 체크해야 합니다.
저렇게 4개의 제이콜리를 구현해서 넣어야 하는데 제 생각에는 팝업 공지 > GNB > 탭 메뉴 > 슬라이드 난이도는 이런 느낌이에요.그럼 팝업 공지부터 하나씩 볼게요.(사실 다른건 아직 잘몰라서=_=크후)
이렇게 모달팝업을 실현하는 것이 하나씩 분석해보자. 모달 팝업만은 설명할 수 있다.
그래서 저것의 궁극적인 목표는 에드클래스와 리무브클래스다. 그래서 active를 추가하고 빼앗는 것이 핵심. 공지를 누르면 액티브 클래스를 추가하고 닫기 버튼을 누르면 리무브 클래스에 액티브를 제거하는 것.그런데 말로는 이렇게 잘하는데 실제로 보지 말고 쓰라고 하면 못 쓰는 게 함정.
다음으로 탭 메뉴를 실현. 기능하세요. 탭 버튼 1을 크랙했을 때 기능하세요.탭 버튼 2번은 디스플레이 논에 꺼지도록 해.탭 버튼 1번은 디스플레이 블록으로 표시시킨다.
기능하세요. 탭 버튼 2를 클릭했을 때 기능하세요.탭 버튼 1번은 디스플레이 논에 사라지도록 하고 탭 버튼 2번은 디스플레이 블록에 나타나도록 하라.
깔끔한 구현이네요.
그럼 탭 메뉴를 구현해 보겠습니다… 우선 저 핑크 부분에 공지사항과 갤러리를 만들어야 합니다. 만들어 보도록 하겠습니다.
공지사항과 갤러리를 구현했습니다.
이렇게 노출이 됩니다.
하…드디어 맞춰놨네요=_+제이콜리를 더 연습해야 할 것 같아요.
다시 한번 연습해보도록 하겠습니다.
자, 여기에 다시 탭 메뉴를 구현해 보겠습니다.마크업부터 시작해 보자.
공지사항과 갤러리를 먼저 ul과 li로 구현합니다.
노티스와 갤러리에서 딥을 맺고 노티스는 스판으로 날짜를 연결합니다.
이렇게 줄줄 나열이 됩니다. 그럼 탭 메뉴부터 구현해 볼까요?
오…OK! 한번에 성사 성공!
모달 팝업도 연습해보자.
마크업은 이렇게 진행하겠습니다.
항상 $표시와; 마지막 마무리를 잘 해주어야 한다.저거 잊어버려–왜 안 되지?하면서 고생했어 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
이제 gnb를 구현해볼게.
나는 메인 GNB와 서브 GNB로 제작했다.
— …이상하다.다시 만들어 봐야 할 것 같아.왜 이렇게 끊기지?
슬라이더가 제일 어려워.기억이 안나 일단 해석부터 해보자.슬라이더 a 인덱스 번호 gt(0)로 지정. 하이드, 세렌터벌 반복해. 슬라이더의 첫 번째는 페이드아웃. 꺼져라 그다음 오는 a는 페이드인으로 들어와라. 그리고 end 멈춘다 appen To 슬라이더 3000은 3초다.
-_-무슨 소리야..나도 모르겠어.그래도 외워보자.
일단 오늘은 여기까지.테스트 하기로 하고… 바이