Gwni Lab GwniLab

setInterval()을 이용한 이미지 슬라이드 - 버튼 추가 //설명. 참고사항. const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = document.querySelector(".slider__img"); const sliderInner = document.querySelector(".slider__inner"); const slider = document.querySelectorAll(".slider"); const sliderBtn = document.querySelector(".slider__btn"); const sliderBtnPrev = sliderBtn.querySelector(".prev"); con..

setInterval()을 이용한 이미지 슬라이드 - 위로 움직이기 //설명. 참고사항. const sliderWrap = document.querySelector(".slider__wrap") const sliderImg = document.querySelector(".slider__img") //이미지 보이는 영역 const sliderInner = document.querySelector(".slider__inner") //이미지 움직이는 영역 (틀) const slider = document.querySelectorAll(".slider") // 5개의 이미지가 저장 let currentIndex = 0; let sliderCount = slider.length; let sliderHeight =..

input 태그 웹 기반 양식에서 사용자의 데이터를 받을 수 있는 대화형 컨트롤을 생성합니다. 사용자 에이전트에 따라서 다양한 종류의 입력 데이터 유형과 컨트롤 위젯이 존재합니다. 입력 유형과 특성의 다양한 조합 가능성으로 인해, 요소는 HTML에서 제일 강력하고 복잡한 요소 중 하나입니다.22가지 type을 지원합니다. submit, reset, button 이외에 문자열, 숫자, 시간, 파일 등 데이터 형식에 따른 다양한 선택지가 있습니다. 속성 type="submit" 📌 을 form handler에 데이터를 제출하기 위한 버튼으로 지정한다. form handler는 보통 데이터를 처리하는 서버단 페이지로 지정된다. 버튼에 value 속성을 지정하면 에 기본값(default value)로 표시된다...

태그는 웹 페이지에서의 입력 양식을 의미합니다. 로그인 창이나, 회원가입 폼 등이 이에 해당되죠. 사용자로부터 데이터를 입력받을 때 사용하며, 의도에 따라 다음의 11가지 태그들을 적절하게 조합해서 사용합니다. 텍스트 필드에 글자를 입력하거나, 체크박스나 라디오 버튼을 클릭하고 제출 버튼을 누르면 백엔드 서버에 양식이 전달되어 정보를 처리하게 됩니다. 사용자로부터 입력을 받을 수 있는 HTLM 입력 폼(form)을 정의할 때 사용합니다. 요소는 다음과 같은 요소들을 하나 이상 포함할 수 있습니다. 제일 많이 사용되는건 input태그 입니다. 태그는 전체 양식을 의미하며, 화면에 보이지 않는 추상적인 태그입니다. 실제로 사용자가 양식을 입력하기 위한 태그는 태그 등이 사용됩니다. type 속성을 통해 종류..

setInterval()을 이용한 이미지 슬라이드 - 연속적으로 넘기기 //설명. 참고사항. const sliderWrap = document.querySelector(".slider__wrap") const sliderImg = document.querySelector(".slider__img") //이미지 보이는 영역 const sliderInner = document.querySelector(".slider__inner") //이미지 움직이는 영역 (틀) const slider = document.querySelectorAll(".slider") // 5개의 이미지가 저장 // .slider__inner > div:first-child let currentIndex = 0; let sliderCou..

setInterval()을 이용한 이미지 슬라이드 - 좌로 움직이기 //설명. 참고사항. let currentIndex = -1; //첫 번째 이미지 (현재 보이는 이미지), -1로 주면 트랜지션이 잘 된다. let sliderCount = slider.length; //이미지 갯수 setInterval(()=>{ console.log(currentIndex); currentIndex = (currentIndex+1)%5; //currentIndex의 데이터 변경해서 01234가 나오게 if((currentIndex

https://artvee.com/ Artvee Browse and download high-resolution, public domain Paintings, Drawings, Illustrations and Posters. artvee.com 저작권이 만료된 세계의 명화들을 무료로 이용할 수 있는 웹사이트. 저작권이 보호되는 기간은 나라마다 조금씩 다른데요. 보통 원작자가 죽고난 뒤 70년이 지나면 만료가 된다~ 라고 생각하시면 됩니다. 이번에 알게된 Artvee 웹 사이트는 저에게는 아주 유용한 사이트입니다. 좋은 영감을 많이 얻을 수도 있을것 같아요. 보통 언스플래쉬를 많이 이용하는데 마음에 들지않는 이미지가 너무 많더라구요. Artvee는 사진이 아니라 그림밖에 없지만 멋진 그림은 사진보다 좋은 ..

CSS란? CSS는 HTML 등의 마크업 언어로 작성된 문서가 실제로 웹사이트에 표현되는 방법을 정해주는 스타일시트 언어입니다. CSS 주석 표시 {/*CSS주석*/} /*이렇게 표시합니다.*/ CSS 선언방법 3가지 내부 스타일 HTML 파일 안에 태그로 스타일을 작성하는 방식입니다. 이 방식은 번들링 하지 않는 프로젝트에서는 대부분 HTML, CSS, JS 파일을 나누어 관리하는 것이 일반적 이므로 번들링하지 않는다면 자주 사용되지 않는 방식입니다. 외부 스타일 link 태그를 이용하여 외부 CSS문서를 가져와서 연결하는 방식입니다. 실무에서 주로 사용하는 방식으로 대부분의 프로젝트에서 이방식을 사용하고 있습니다. 인라인 스타일 요소의 style 속성에 직접 스타일을 작성하는 방식 입니다. 우선순위상..