오늘은 위쪽으로 슬라이드가 넘어가는데, 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. 어떤 물체가 빨간색 파장을 가장 많이 흡수하면 빨간색 물체로 보이게 된다. ..

웹디자인 기능사 오답노트 33.다음 중 최초의 GUI 환경의 웹 브라우저는? 1. 익스플로러 2. 네스케이프 3. 모자이크 4. 랜드스케이프 답 : 3번 오답노트 모자이크는 당시 일반인들이 보유한 PC 주요 운영체제인 윈도, 매킨토시, 유닉스를 모두 지원한 최초의 오픈소스 브라우저이며, 모자이크가 발명됨에 따라 우리가 오늘날 많이 사용하는 웹브라우저가 개발됐고 일반인들이 쉽게 사용이 가능해졌다 37. 전자우편(e-mail)을 전송할 때 사용되는 프로토콜은? 1. FTP 2. SMTP 3. Telnet 4. Usenet 답: 2번 오답노트 인터넷에서 전자 메일 전송은 SMTP(Simple Mail Transfer Protocol)를 지원하는 호스트 사이에 이루어지며, SMTP 호스트는 SMTP 명령과 그에..

1. 색의 3속성 중 사람의 눈이 가장 예민하고 강하게 반응하는 대비는? ① 명도대비 ② 색상대비 ③ 보색대비 ④ 채도대비 답: 1번 오답노트 명도 대비는 명도가 다른 두 색의 영향에 의해 명도차가 다르게 지각되는 현상이다. 주위 색에 따라 더욱 밝게 느껴지거나 더욱 어둡게 느껴집니다. 동시대비중에 가장 예민하게 작용합니다. 3. 디자인의 원리 중 비례에 대한 설명이 잘못된 것은? 1. 균형을 가장 많이 고려하여 구성해야 한다. 2. 부분과 부분, 부분과 전체에 균형이 잡혀있음을 말한다. 3. 조형을 구성하는 모든 단위의 크기를 결정한다. 4. 객관적 질서와 과학적 근거를 명확하게 드러내는 구성 형 식이다. 답: 1번 오답노트 비례란 부분과 부분, 부분과 전체의 연관시켜서 상대적으로 설명하는 것으로 부분..