xoouxa

안녕하세요 ヾ(≧▽≦*)o 오늘은 배경 이미지 위에 이미지를 여러장 덧대어 그 이미지가 좌우로 움직일 수 있도록 효과를 한 번 주도록 하겠습니다. 그리고 닷 버튼 기능을 추가해 하단에 뜨는 버튼을 눌러도 사진이 넘어갈 수 있도록 작업해 주도록 하겠습니다. 💛완성작 입니다 CSS 스타일 css에 딱히 큰 변화는 없고, 양쪽 사이드에 뒤로가기 버튼과 앞으로 가기 버튼, 그리고 하단에 닷버튼을 만들어 주어야 하기 때문에 디자인 작업을 해줍니다. HTML prev next 사진 이미지와 이전 이미지 버튼과 다음 이미지 버튼을 설정해 줍니다. 스크립트 let images = [ "img/slideEffect01-1.jpg", "img/slideEffect02-1.jpg", "img/slideEffect03-1.j..

안녕하세요 ヾ(≧▽≦*)o 오늘은 배경 이미지 위에 이미지를 여러장 덧대어 그 이미지가 위 아래로 움직일 수 있도록 효과를 한 번 주도록 하겠습니다. 💛완성작 입니다 이미지가 prev 버튼을 누르면 사진이 뒤로 가고, next 버튼을 누르면 사진이 앞으로 넘어가도록 설정해 주었습니다. 자바스크립트, GSAP, jQurey 세 가지를 이용해 같은 효과를 주도록 하겠습니다. CSS 스타일 06. 슬라이드 이펙트 이번엔 양 옆 사이드에 버튼을 설정해 주었기 때문에 버튼에 css 효과를 주도록 하겠습니다. 또한 밑에 닷 버튼을 만들어 이미지가 넘어갈 때 닷 버튼도 그 이미지에 맞게 넘어갈 수 있도록 작업해 주었습니다. HTML prev next 다음은 메인입니다. 이미지를 지정해준 다음 두 개의 버튼을 만들어 ..

안녕하세요 ヾ(≧▽≦*)o 오늘은 자바스크립트 효율적으로 문자열과 배열에 대해 공부하도록 하겠습니다. 모던자바스크립트 프로그래밍의 정석이라는 책을 참고하여 블로그를 작성해 보도록 하겠습니다. 📜 문자열에 접근하기 자바스크립트에서는 간단한 텍스트를 처리하기 위해 문자열 유형을 자주 사용합니다. 📜 원시 유형과 객체 단순히 값만 가지고 있을 경우 원시유형이고 프로퍼티와 메서드를 가지고 있을 땐 객체라고 합니다. 자바스크립트에선 원시 유형이어도 프로퍼티와 메서드를 사용할 수 있습니다. str 변수에 length라는 프로퍼티를 정의하지 않았는데도 length 프로퍼티를 사용할 수 있습니다. let str = "hello" str.length //5 오토박싱 ? number나 boolean, string과 같은 ..

블록 레벨 요소 (BLOCK-level Elements) 블록 요소는 주로 컨텐츠를 묶어 하나의 블록으로 구조화하고 그룹화하는 데 사용됩니다. 블록 요소는 기본적으로 새로운 줄에서 시작하고, 내용의 너비를 부모 요소의 전체 너비로 확장합니다. 예를 들어 등이 블록 요소에 해당합니다. 블록 요소는 텍스트나 이미지, 동영상, 다른 html 요소 등을 포함할 수 있으며 css를 사용하여 스타일링할 수 있습니다. 블록 요소를 사용하면 컨텐츠를 시각적으로 구분할 수 있고, 웹 페이지의 레이아웃을 조정할 수 있습니다. 블록 요소는 텍스트(문자)와 인라인 요소를 자식 요소로 포함할 수 있습니다. 또한 블록 요소는 웹 페이지의 검색 엔진 최적화를 위해 중요한 역할을 합니다. 블록 레벨 요소 블록 레벨 요소 줄 바꿈이 ..