오늘은 위쪽으로 슬라이드가 넘어가는데, 3번째 효과와 다르게 연속적으로 움직일 수 있도록 작업해보겠습니다! 자바스크립트 슬라이드 효과 슬라이드 효과 5 슬라이드 이펙트 중 이미지가 세로로, 위쪽으로 넘어가는 효과입니다.(연속적) 구조 스크립트_선택자 및 변수 설정하기 슬라이드 효과 4에서는 clientWidth값을 통해 이미지 가로값을 구했으니 이번엔 clientHeight를 통해 이미지의 세로값을 구해줍니다. 그리고 CSS 속성중에서도 display: flex; 속성을 없애줍니다. 스크립트_javascript -sliderInner 변수에 있는 DOM 요소에 sliderClone 변수에 저장된 첫 번째 이미지를 복사하여 마지막 자식으로 추가합니다. 이를 통해 슬라이딩이 끝난 후 첫 번째 이미지가 다시 ..

오늘은 왼쪽으로 슬라이드가 넘어가는데, 2번째 효과와 다르게 연속적으로 움직일 수 있도록 작업해보겠습니다! 자바스크립트 슬라이드 효과 슬라이드 효과 4 슬라이드 이펙트 중 이미지가 가로로, 왼쪽으로 넘어가는 효과입니다.(연속적) 구조 구조는 슬라이드 이펙트 2번째와 동일합니다. 스크립트_선택자와 변수 설정 // 선택자 const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = sliderWrap.querySelector(".slider__img"); // 보여지는 영역 const sliderInner = sliderWrap.querySelector(".slider__inner"); // 움직이는 영역 const slider ..

오늘은 사진이 자연스럽게 넘어가는 슬라이드 효과에 대해 알아보겠습니다! 자바스크립트 슬라이드 효과 슬라이드 효과 3 슬라이드 이펙트 중 이미지가 세로로, 위쪽으로 넘어가는 효과입니다. 슬라이드 2번과 거의 동일한 구조와 스크립트지만, CSS 속성 중 바뀌는 부분이 있습니다. 구조 CSS에서 바뀌는 요소 .slider__inner { /* 이미지 움직이는 영역 */ flex-wrap: wrap; width: 4000px; height: 450px; } 2번에선 사진을 가로로 정렬하기 위해 display: flex를 사용했지만, 이번엔 세로로 움직이므로 flex를 제거해줍니다. 스크립트_javascript 2번 방법과 동일하지만, translateX를 translateY로, width값 800을 height..

오늘은 사진이 자연스럽게 넘어가는 슬라이드 효과에 대해 알아보겠습니다! 자바스크립트 슬라이드 효과 슬라이드 효과 2 슬라이드 이펙트 중 이미지가 가로로, 왼쪽으로 넘어가는 효과입니다. 구조 이번에 slider를 slider__inner안에 감싸서 작업했습니다. 스크립트_ javascript const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = sliderWrap.querySelector(".slider__img"); // 보여지는 영역 const sliderInner = sliderWrap.querySelector(".slider__inner"); // 움직이는 영역 const slider = sliderWrap.que..

오늘은 사진이 자연스럽게 넘어가는 슬라이드 효과에 대해 알아보겠습니다! 자바스크립트 슬라이드 효과 슬라이드 효과 1 슬라이드 이펙트 중 가장 기본적인 트랜지션 효과를 줘보겠습니다. 구조 스크립트_javascript // 선택자 const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = sliderWrap.querySelector(".slider__img"); const slider = sliderWrap.querySelectorAll(".slider"); let currentIndex = 0; // 현재 보이는 이미지 let sliderCount = slider.length; // 이미지 갯수 let sliderInterva..

웹디자인 기능사 오답노트 3. 다음과 가장 관계있는 디자인 원리는? 바다 위의 빨간 등대, 무성한 나뭇잎들 사이에서 핀 꽃, 별이 총총한 밤하늘에 뜬 달, 평평한 벽에 생긴 갈라진 틈 등 1. 조화 2. 통일 3. 점증 4. 강조 답: 4번 오답노트 조화: 통일과 변화, 균형감이 안정적으로 결합된 상태 통일: 하나의 규칙으로 단일화시키는 것 점증: 그라데이션이라고도 하며 조화적인 단계에 한하여 일정한 질서를 가진 자연적인 순서의 계열로서 기본적으로 유사한 일련의 흐름을 나타내는 것. 강조: 단조로움을 피하기 위해 일부 요소를 다르게 표현하는 것 6. 색체에 대한 설명으로 옳은 것은? 1. 색채는 심리적 성질을 갖지 못한다. 2. 어떤 물체가 빨간색 파장을 가장 많이 흡수하면 빨간색 물체로 보이게 된다. ..