• 메뉴 : 가로형 서브메뉴 / 서브메뉴의 배경 
  • 슬라이드 : 위에서 아래 or 아래에서 위
  • 공지사항 / 갤러리 : 일체형 (탭메뉴)
  • 배너 / 바로가기
  • 팝업창 : 레이어 팝업
  • 푸터 : 로고와 sns

 

 

header{position:relative;}
 
#logo{float:left;
nav{ position:relative; }
nav > ul{ position: absolute; }
nav > ul > li{float:left; }
nav > ul ul{display: none; z-index: 999;}

#menu_bg{position:absolute; right:0; top:100px; display: none;}
 
 
//메뉴
    $("nav > ul > li").mouseenter(function(){
        $("nav >ul ul").stop().slideDown(500)
        $("#menu_bg").stop().slideDown(500)
    });
    $("nav > ul > li").mouseleave(function(){
        $("nav >ul ul").stop().slideUp(500)
        $("#menu_bg").stop().slideUp(500)
    });
 
article{position:relative;  overflow: hidden;}
article ul{width:300%;}
article ul li{float:left;}

 

//가로 이미지슬라이드
    setInterval(function(){
        $('article ul').animate({'margin-left':'-1200px'},function(){
            $('article ul li:first').appendTo('article ul');
            $('article ul').css({'margin-left':'0px'});
        });
    },3000);

탭제목1

<div class="on">탭내용1</div>

 

 

탭제목2

<div class="off" > 탭내용2</div>

 

으로 구성

 

 

//탭메뉴
    $('#content1 h3').click(function(){
        $('#content1 > div').addClass('off');
        $(this).next().removeClass('off');

        $('#content1 h3').removeClass('color')
        $(this).addClass('color')
    });
 

 

#popup{position:fixed; position:absolute; top:50%; left:50%; transform: translate(-50%,-50%);}
 
 
    //팝업
    $("#popup_btn").click(function(){
        $("#popup").show();
    });
    $("#x_btn").click(function(){
        $("#popup").hide();
    });

 

'자격증공부' 카테고리의 다른 글

웹디자인기능사) C-3 유형 남도맛기행 사이트 만들기  (0) 2022.11.13
웹디자인 기능사) C-1 유형 해운대 빛 축제 공부중  (0) 2022.11.11
웹디자인기능사) 유형 B-2 대한투어  (0) 2022.11.09
웹디자인 기능사 실기 시작!  (0) 2022.11.06
  • 메뉴 : 세로형 서브메뉴 
  • 슬라이드 : 옆으로
  • 공지사항 / 갤러리 : 분리형
  • 갤러리 사진 -호버시 투명도 조절
  • 배너
  • 팝업창 : 모달레이어 팝업
  • 푸터 : 로고와 하단메뉴

이미지 슬라이더 css

 

/* article */
article{ height:350px; overflow: hidden; }
article ul{width:300%;}
article ul li{ float: left;}

 

이미지 슬라이더 script
 //slider
    setInterval(function(){
    $("article ul").animate({"margin-left":"-100%"},function(){
        $("article ul li").first().appendTo("article ul");
        $("article ul").css({"margin-left":"0%"})
        })
    },3000);

 

모달 레이어 팝업창 script

그리고 팝업창 가운데 오게 할때

넓이를 계산해서 마진값으로 해도 되지만

top:50%; left:50%; transform: translate(-50% , -50%);
 
이렇게 하면 계산하지 않아도 가운데로 이동시킬수있다
 
 //popup
    $("#popup_btn").click(function(){
        $("#popup").show()
        $("#modal_bg").show()
    });
    $("#x_btn").click(function(){
        $("#popup").hide()
        $("#modal_bg").hide()
    });

세로 형식 / 옆으로 생기는 메뉴 script

=서브메뉴를 포지션으로 위치를 옆으로 옮기면 될 뿐!

 

그리고 팝업창뿐만아니라 배경도 fixed를 넣어야 한다

 //menu
    $("nav > ul > li").mouseenter(function(){
        $(this).find(".sub_menu").stop().slideDown(500);
    });

    $("nav > ul > li").mouseleave(function(){
        $("nav > ul ul").stop().slideUp(500);
    });

 

'자격증공부' 카테고리의 다른 글

웹디자인기능사) A-1 유형 just 쇼핑몰만들기  (0) 2022.11.14
웹디자인 기능사) C-1 유형 해운대 빛 축제 공부중  (0) 2022.11.11
웹디자인기능사) 유형 B-2 대한투어  (0) 2022.11.09
웹디자인 기능사 실기 시작!  (0) 2022.11.06
  • 메뉴 : 세로형 / 아래로 열리는 서브메뉴 
  • 슬라이드 : 페이드
  • 공지사항 / 갤러리 : 일체형(탭 메뉴)
  • 바로가기
  • 팝업창 : 모달 팝업창
  • 푸터 : 로고

html

 

css

 

말줄임 사용하기

text-overflow: ellipsis; overflow: hidden; white-space: nowrap;
 

js -세로 메뉴

 

//메뉴
    $("nav > ul > li").mouseenter(function(){
      $(this).find(".sub_menu").stop().slideDown(500);
    });
    $("nav > ul > li").mouseleave(function(){
        $(".sub_menu").stop().slideUp(500);
    });

 

js -탭 메뉴

 
 //탭메뉴
    $('#content1 h3').click(function(){
        $('#content1 > div').addClass('off');
        $(this).next().removeClass('off');

        $('#content1 h3').removeClass('color')
        $(this).addClass('color')
    });
 

타이틀 색상까지 바꿔주기위해 아래 두줄을 더 추가함!

html에 각각첫화면에서 보여줄 클래스를 미리 지정하는 방식

 

js -이미지슬라이드 배너

 $('article ul li:gt(0)').hide()

        setInterval(function(){
        $('article ul li:first').fadeOut(2000).next().fadeIn(2000)
        $('article ul li:first').appendTo('article ul')
        },2000);

 

//(A).appendTo(B): A가 B 처음에 추가된다
//(A).append(B): A 처음에 B를 추가

js -팝업창

$('#popup_btn').click(function(){
        $('#popup').show();
    });
    $('#x_btn').click(function(){
        $('#popup').hide();
    });

 

//#popup에 포지션으로 위치주고 fixed 꼭 주기!

'자격증공부' 카테고리의 다른 글

웹디자인기능사) A-1 유형 just 쇼핑몰만들기  (0) 2022.11.14
웹디자인기능사) C-3 유형 남도맛기행 사이트 만들기  (0) 2022.11.13
웹디자인기능사) 유형 B-2 대한투어  (0) 2022.11.09
웹디자인 기능사 실기 시작!  (0) 2022.11.06
  • 메뉴 : 가로형 서브메뉴 하단 전체배경
  • 슬라이드 : 아래에서 위
  • 공지사항 / 갤러리 : 분리형
  • 바로가기
  • 팝업창 : 모달레이어 팝업창
  • 푸터 : 패밀리사이트

 

css 이미지 슬라이더 

article{width:1200px; height:300px; overflow:hidden; position:relative; margin:0 auto; }
 
article ul{position:absolute;}

 

js - 메뉴

//메뉴 슬라이드다운(전체+bg)
 
    $('nav > ul > li ul , #menu_bg').hide() //자식카테고리+배경 숨기기

    $('nav > ul > li ').mouseover(function(){ 
    $('nav > ul > li ul, #menu_bg ').stop().slideDown(500);

    }).mouseout(function(){
    $('nav > ul > li ul, #menu_bg').stop().slideUp(500);
    });

 

js - 슬라이더 배너

 

setInterval() 

어떤 코드를 일정한 시간 간격을 두고 반복해서 실행하고 싶을 때 사용

 

 

//이미지 슬라이더 세로형

 
setInterval(function(){
        $('article ul').animate({'marginTop':'-300px'},function(){
            $('article ul li:first').appendTo('article ul');
            $('article ul').css({'marginTop':'0px'});
        });
    },3000);
 
 

 

js - 팝업창

 

 

//모달 레이어 = 배경이 불투명하게 가려지는경우
    $("#modal").click(function(){
        $("#popup").show();
        $("#html_bg").show();
    });
    $("#close").click(function(){
        $("#popup").hide();
        $("#html_bg").hide();
    });

 

 

//레이어 = 배경이 없고 팝업만 뜨는 경우
    $("#modal").click(function(){
        $("#popup").show();
    });
    $("#close").click(function(){
        $("#popup").hide();
    });

 

'자격증공부' 카테고리의 다른 글

웹디자인기능사) A-1 유형 just 쇼핑몰만들기  (0) 2022.11.14
웹디자인기능사) C-3 유형 남도맛기행 사이트 만들기  (0) 2022.11.13
웹디자인 기능사) C-1 유형 해운대 빛 축제 공부중  (0) 2022.11.11
웹디자인 기능사 실기 시작!  (0) 2022.11.06

내가 정작 정확한 뜻을 모른체 공부해왔다는걸 알게되었다
그래서 처음부터 정확히 짚고 가려고 쓰는 글


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

이런구조!

<!DOCTYPE html>
<html lang="ko">
 
<head>
<title></title>
<meta charset="utf-8">
</head>

<body>
</body>
 
</html>
head에 외부파일인 css나 js폴더의 링크를 넣는 것
 
css   
<link rel="stylesheet"  href="">
 
script 
<script src=""></script>
 

패밀리 사이트 만들기

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 로 하기)

$(".content1 li:first-child a").click(function(){
        $(".pop").show();
    });
 
    $(".pop .close").click(function(){
        $(".pop").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

+ Recent posts

티스토리툴바