내가 정작 정확한 뜻을 모른체 공부해왔다는걸 알게되었다
그래서 처음부터 정확히 짚고 가려고 쓰는 글
https://webstudybasic.pe.kr/landing/index.html
webStudyBasic
웹디자인 기능사 실기 시험 공부
webstudybasic.pe.kr
여기서 완성본과 비교해보며 연습할 수 있다!
그리고 내가 시험칠 시험장 시설 현황에 대해 한번 보고가기!
수험표 발급에 들어가면 알 수 있다
일러스트랑 포토샵 2022버전은 안써봤는데 특별히 다른점이 있나..?
한번 체크 해보기!!
html 기본구조
1. 문서 선언 (<!DOCTYPE html> 가장 먼저 해야되는 것)
2.언어 선언
3.head
4.title
5.meta
6.body
이런구조!
패밀리 사이트 만들기
select
option
사용 (마치 ul과 li같이)
head 부분에 script를 넣을 경우,
$(function(){
});
이구조를 사용해서 html 요소가 로드된 뒤 스크립트를 작동
새로알게된 mouseenter
mouseover/mouseout 는 직접 이벤트를 걸지않은 자식요소에 마우스 포인터가 와도 발생
mouseenter/mouseleave는 오로지 자기 자신에게 마우스 포인터가 와야만 발생
모달창을 구현하는데 z-index가 안먹힌다
z-index 속성이 들어간 요소에 position 속성이 들어 있는지 확인
z-index는 position이 없으면 동작하지 않음
(가로/세로형) 슬라이드가 동작하지 않는데, JS 코드에는 문제가 없다
슬라이드의 이미지를 감싸는 ul 또는 div에 position 속성이 들어 있는지 확인
가로/세로형 슬라이드로 많이 사용하는 jQuery 메소드인 .animate는 해당 요소에 position속성이 없으면 동작하지 않ㅇ는다
script 정리
//메뉴 슬라이드다운(전체)
$('.main_menu > li').mouseover(function(){
$('.sub_menu').stop().slideDown(500);
}).mouseout(function(){
$('.sub_menu').stop().slideUp(500);
});
//메뉴 슬라이드다운(전체+bg)
$('.main_menu>li').mouseover(function(){
$('.sub_menu, .bg').stop().slideDown(500);
}).mouseout(function(){
$('.sub_menu, .bg').stop().slideUp(500);
});
//메뉴 슬라이드다운(일부)
$('.main_menu>li').mouseover(function(){
$(this).find('.sub_menu').stop().slideDown(500);
}).mouseout(function(){
$(this).find('.sub_menu').stop().slideUp(500);
});
// 이미지 페이드인아웃
$('.slide a:gt(0)').hide();setInterval(function(){
$('.slide a:first-child').fadeOut().next('a').fadeIn().end().appendTo('.slide');
}, 3000);
// 팝업 (css:display로 하기)
$('.notice li:first-child').click(function(){
$('.modal').addClass('popup');
});
// 팝업 닫기 (css:display로 하기)
$('.btn').click(function(){
$('.modal').removeClass('popup');
});
// 팝업 (show /hide 로 하기)
'자격증공부' 카테고리의 다른 글
| 웹디자인기능사) A-1 유형 just 쇼핑몰만들기 (0) | 2022.11.14 |
|---|---|
| 웹디자인기능사) C-3 유형 남도맛기행 사이트 만들기 (0) | 2022.11.13 |
| 웹디자인 기능사) C-1 유형 해운대 빛 축제 공부중 (0) | 2022.11.11 |
| 웹디자인기능사) 유형 B-2 대한투어 (0) | 2022.11.09 |