우당탕탕 코딩생활

슬라이드 이펙트 여섯번 째! 버튼으로 이동하는 슬라이드와 닷 버튼을 눌렀을 때 해당 이미지로 이동하는 슬라이드 이펙트입니다. CSS /* slider__wrap */ .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } .slider__img { /* 이미지가 보이는 영역이기 때문에 와이드 값을 이미지만큼 설정 */ position: relative; width: 800px; height: 450px; overflow: hidden; } .slider__inner { /* 전체 이미지를 감싸고 있는 부모 : 움직이는 영역 / 이미지의 사이즈가 450이고 다섯장이기 때문..

CSS HTML slider__inne부분에서 이미지를 각각 나눠주고 마지막 사진에서 다시 1번으로 돌아오기 위해 class 명에 s1,s2...를 붙여 주었습니다. script 선택자 const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = sliderWrap.querySelector(".slider__img"); //보여지는 영역 const sliderInner = sliderWrap.querySelector(".slider__inner"); //움직이는 영역 const slider = sliderWrap.querySelectorAll(".slider"); //개별이미지 let currentIndex = 0; //현재 ..

css HTML script let sliderInterval = 3000; function sliderEffect(){ currentIndex++; sliderInner.style.transition = "all 0.6s"; sliderInner.style.transform = "translateX(-"+ sliderWidth * currentIndex + "px)";

이번 포스팅은 지난 시간에 했던 소스 코드에서 일부분만 바꾸면 간단히 적용시킬 수 있습니다. Javascript //javascript sliderInner.style.transform = translateX("0px"); // -800 * 0 sliderInner.style.transform = translateX("-800px"); // 이미지의 위드값 // -800 * 1 sliderInner.style.transform = translateX("-1600px"); // -800 * 2 sliderInner.style.transform = translateX("-2400px"); // -800 * 3 sliderInner.style.transform = translateX("-3200px"); //..

좌로 슬라이드 효과 CSS와 HTML은 지난시간과 동일합니다. 바로 스크립트 두개재~ 👉 //javascript sliderInner.style.transform = translateX("0px"); // -800 * 0 sliderInner.style.transform = translateX("-800px"); // 이미지의 위드값 // -800 * 1 sliderInner.style.transform = translateX("-1600px"); // -800 * 2 sliderInner.style.transform = translateX("-2400px"); // -800 * 3 sliderInner.style.transform = translateX("-3200px"); // -800 * 4 sli..

트랜지션 효과 웹 페이지에서 자주 쓰이는 효과입니다 ☺️ reset 부분은 기존에 했던 마우스 효과와 동일합니다. 자, 그럼 두개재~ CSS .slider:nth-child()는 해당 슬라이드를 선택하게 합니다. before는 해당 요소 앞에 가상 요소를 생성하고, 내용을 추가해줍니다. content 속성을 사용하여 각 슬라이드에 대한 캡션을 지정합니다. content CSS 속성 중 하나로 요소의 콘텐츠를 정의하는데 사용 됩니다. 일반적으로 before와 after의 가상 요소에서 사용합니다! z-index가 의미하는 것은 각 슬라이드에 대한 쌓임 순서입니다. 이 이펙트에서는 이미지를 겹쳐놓는 것이 포인트입니다! 이 값이 높을 수록 슬라이드는 상위에 표시되게 되며 슬라이드가 순서대로 보이도록 조정하는데..

3. 디자인의 원리 중 비례에 대한 설명이 잘못된 것은? 1. 균형을 가장 많이 고려하여 구성해야한다. 2. 부분과 부분, 부분과 전체에 균형이 잡혀있음을 말한다. 3. 조형을 구성하는 모든 단위의 크기를 결정한다. 4. 객관적 질서와 과학적 근거를명확하게 드러내는 구성 형식이다. - 정답은 1번 균형을 가장 많이 고려하지 않아도 됩니다. 6. 디자인의 요소에 관한 정의가 틀린 것은? 1. 점 - 위치만 있고 크기는 없다. 2. 선 - 면의 한계 또는 교차 3. 면 - 선의 이동 4. 입체 - 면의 이동 - 면이 아니라 점입니다. 18. 2차원적 제품 디자인 분야에 속하지 않는 것은? 1. 텍스타일 디자인 2. 편집디자인 3. 벽지디자인 4. 인테리어 직물 디자인 - 편집디자인은 1차원입니다. 21..

기능 추가 마무리를 위한 기능 추가 입니다! 수험자 이름 입력과 정답 체크 기능입니다. 코드 분석을 해보겠습니다! const nameInput = document.querySelector(".cbt__view input"); const cbtResult = document.querySelector(".cbt__result"); let great = 0; const startQuiz = () => { cbtStart.classList.add("hide"); questionTime = setInterval(reduceTime, 1000); let youName = nameInput.value; cbtName.innerHTML = youName; } const answerQuiz = () => { let sc..

퀴즈만들기 0mr형식 체크 부분 연동하기 오늘은 지난 포스팅을 보충 하는 글을 써보도록 하겠습니다. 먼저 추가된 HTML입니다. 정보처리기능사 2005년 2회 정보처리기능사 2005년 4회 정보처리기능사 2005년 5회 정보처리기능사 2006년 1회 정보처리기능사 2006년 2회 정보처리기능사 2006년 3회 정보처리기능사 2006년 5회 정보처리기능사 2007년 1회 정보처리기능사 2007년 2회 정보처리기능사 2007년 5회 정보처리기능사 2008년 1회 정보처리기능사 2008년 2회 정보처리기능사 2008년 4회 정보처리기능사 2008년 5회 정보처리기능사 2009년 1회 정보처리기능사 2009년 5회 정보처리기능사 2010년 2회 정보처리기능사 2010년 5회 정보처리기능사 2011년 1회 정보처..