아아..안녕하세요.. 지금 웹퍼블리셔 자격증 시험준비중입니다..
홈페이지를 구현하는 게 시험인데 여기서 중요한 핵심은 제이퀄리라고 판단했어요.제이퀄리가 가장 중요해 이것이 저의 결론입니다.
물론 구현하기도 어렵지ㅠㅠ외워야 하는데 못외워.
일단 J-쿼리는 총 4종류로 사용이 되고 있는 것 같습니다.
- 비주얼 인트로 이미지 슬라이드 배너 만들기 2. 탭 메뉴 만들기 3. 알림 팝업창 만들기 4. GNB 2단 메뉴 만들기
- 여기서비주얼인트로이미지슬라이드는실현되지않으면그대로실격처리되기때문에일단어떤것을실현시키는것이포인트입니다.
- 아아..어렵다–
- 일단…
제이코리의 시작과 끝입니다저렇게 제이퀄리 구문을 넣어주면 제이퀄리를 실행할 수 있어요. 그래서 항상 이렇게 첫 소절을 써주세요.
$로 시작해서 문서 레이디 펑션, 괄호가 중요하기 때문에 잘 체크해 보세요.
저렇게 4개의 제이커리를 구현해서 넣어야 하는데 제가 느끼기에는 팝업 소식 > GNB > 탭 메뉴 > 슬라이드의 난이도는 이런 느낌입니다.그럼 팝업 공지부터 하나씩 볼게요(사실 다른건 아직 잘 몰라서=_=ㅋㅋ)
이렇게 모달 팝업을 구현할 수 있습니다하나씩 분석해보자. 모달팝업만큼은 설명해줄 수 있다.
그래서 저거의 궁극 목표는 에드 클래스랑 리무브 클래스야. 그래서 active를 추가해서 뺏어가는 게 핵심.알림을 누르면 활성화 클래스를 추가하고, 닫기 버튼을 누르면 리무브 클래스에서 액티브를 제거한다.그런데 말로는 이렇게 잘 쓰는데 막상 안 보고 쓰라고 하면 못 쓰는 게 함정.
그다음 탭 메뉴 실현기능하라, 탭 버튼 1 을 클릭했을 때 기능하라.탭 버튼 2번은 디스플레이논으로 사라져.탭 버튼 1번은 디스플레이 블록으로 표시하도록.
기능한다. 탭 버튼 2 를 클릭했을 때 기능한다.탭버튼 1번은 찍히도록 하고 탭버튼 2번은 찍히도록 하겠습니다.
깨끗한 구현이네요
그러면 탭 메뉴를 만들어보도록 하겠습니다. 일단 저 핑크색 부분에 공지와 갤러리를 만들어주세요 만들도록 하겠습니다
공지사항과 갤러리를 구현했습니다
이렇게 노출이 됩니다
드디어 맞춰놨네요. =_+제이퀄리티 더 연습해야 할 것 같습니다.
다시한번연습을해보도록하겠습니다.
여기서 다시 탭 메뉴를 설정해 봅시다.마크업부터 시작해보자
공지와 갤러리를 일단 ul과 li로 구현하도록 하겠습니다
노티스와 갤러리로 뒤풀이를 하고 연호티스는 스판으로 날짜를 묶어요.
이렇게 쭉 나열되어 있어요 그러면 탭 메뉴부터 시작할까요?
오… OK 한번에 실현 성공!
이제 모달팝업도 연습해보자.
마크업은 이렇게 하는 거예요.
항상 $표시하고;마지막마무리를 잘해주어야해..저걸 빼먹고–왜안되지?하면서 고생하고 있어 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
이제 gnb를 구현해 보는…
나는 메인 GNB와 서브 GNB에서 제작했다.
슬라이더가 제일 어려워기억할 수 없다. 먼저 해석부터 해보자. 「슬라이더 a 인덱스 번호 gt(0)」로 지정. 하이드. 세렌타발 반복. 해. 슬라이더 첫 번째 페이드아웃. 꺼져. 그 다음에 올 a는 페이드인에 들어가라. 그리고 엔드 스톱 appen To 슬라이더 3000은 3초다
-_- 뭔 소리야… 나도 모르겠어 하지만 기억해보자…
일단 오늘은 여기까지…테스트 하기로 하고… 빠잇