웹디자인기능사 실기 시험에서 제이쿼리 필수로 들어가야하는 효과들을 정리해보겠다. 생각보다 디테일한 효과를 적용 가능하다. 아는 만큼 표현가능하니까 미리 체크해두고 응용하는게 좋겠다. 실기시험 진행과정에서 가장 중요한 제이쿼리 효과 메서드이다. 토글효과와 슬라이드 효과는 메뉴 네비게이션에 꼭 들어가는 표현이다.
제이쿼리 필수 핵심 이론 - 메서드 (보이기/감추기)
$('선택자').함수(function(){
$('선택요소').메서드();
});
보이기 감추기 (show, hide) 효과
| 메서드 | 설명 |
| .show() | 선택요소 보이기 |
| .hide() | 선택요소 감추기 |
| .toggle() | 선택요소 보이기/감추기 |
| .slideDown() | 선택요소 서서히 보이기 |
| .slidUp() | 선택요소 서서히 감추기 |
| .slideToggle() | 선택요소 서서히 보이기/감추기 |
슬라이드가 서서히 나타나고 사라지는 효과임
토글은 보이기와 감추기 두가지 기능을 포함한 것
#실습예제01
제이쿼리 메서드 활용해서 보이기와 감추기 적용해보기
제이쿼리 작성하기
<body> 태그 하단에 넣고 순서는 공유스크립트 먼저 작성 필수
<script src="script/jquery-1.12.4.js"></script>
<script src="script/custom.js"></script>
HTML 작성하기
<div class="container">
<a class="show-btn" href="#none">보이기</a>
<a class="hide-btn" href="#none">감추기</a>
<a class="toggle-btn" href="#none">토글</a>
<div>BOX</div>
</div>
style 작성
.container {
width: 300px;
}
a {
background-color: #ddd;
color: #000;
text-decoration: none;
padding: 5px;
width: 70px;
display: inline-block;
text-align: center;
border-radius: 5px;
}
.container div {
background-color:blue;
color:#fff; margin-top:30px;
width: 100px;
height:300px;
text-align:center;
line-height:300px;
dispaly:none;
}
스크립트에 메서드 작성
$('.show-btn').click(function(){
$('.container div').show()
});
$('.hide-btn').click(function(){
$('.container div').show()
});
$('.toggle-btn').click(function(){
$('.container div').toggle()
});
메서드에 slideDown 작성하면 천천히 내려옴
아래 페이드 효과 천천히 나타남
페이드(fade) 효과
| 메서드 | 설명 |
| .fadeIn() | 선택요소를 페이드로 나타나게 하는 효과 |
| .fadeOut() | 선택요소를 페이드로 사라지게 하는 효과 |
| .fadeToggle() | 선택요소를 페이드로 사라지고 나타나게 토글(toggle) |
.fadeIn('속도') - fast, slow, 500(0.5초), 3000(3초) 숫자 적을때는 따옴표 사용X
시험볼때는 아무것도 안넣긔
웹디자인기능사 시험에서 제이쿼리를 효율적으로 사용하는 방법을 정리해보았다. 위 메서드를 이용하면 메뉴, 네비게이션등 자유롭게 적용이 가능하다. 제이쿼리 특수기능은 웹디자인 기능사에서 네비게이션, 팝업, 슬라이딩배너, 버튼타입 감추기와 보이기로 4가지 정도 적용하면 되겠다. 오늘까지 인강을 통해서 공부한 기록을 남겨보았는데.... 일정이 살짝 촉박함....;;
1. 제이쿼리 기능 확인 > 적용 예시
2. 전체 레이아웃 만들기
3. 메뉴구성 CSS 확인
4. 시험시간 테스트 연습해보기
웹디자인 기능사 실기시험 합격률이 60프로정도임. 시험일까지 20일정도 남았고 매일 학습이어나가야됨.. 이번주는 노트북이 갑자기 꺼지는 바람에;; 제대로 이어가지 못하였음........ 예상문제 + 코딩웍스 인강으로 독학 시험 궈궈
'학 습 일 지 2 0 2 2' 카테고리의 다른 글
| 웹디자인 실기시험 : 메뉴 네비게이션 5가지 타입 분석 (0) | 2022.08.09 |
|---|---|
| 웹디자인 기능사 메뉴 네비게이션 만들기 : 제이쿼리 메서드 (0) | 2022.08.09 |
| 제이쿼리 - 메서드 3가지 종류 (0) | 2022.08.06 |
| 웹디자인 기능사 제이쿼리 필수핵심이론 - 함수 (0) | 2022.08.04 |
| 코딩웍스 jquery 인강 : 기본 구문 만들기, 선택자 (0) | 2022.08.02 |
