본문 바로가기

CODING166

CSS 애니메이션 만들기 : 3D 박스 애니메이션 CSS 애니메이션 : 3D 박스 애니메이션 오늘은 움직이면서 크기가 변형되는 3D 박스를 만들어 보겠습니다. 작업해볼 애니메이션은 다음과 같습니다. See the Pen Untitled by mj0614k (@mj0614k) on CodePen. 1. HTML 소스 소름 cube class를 가진 div 박스를 하나 만들어 주고, 그 안에 div 박스 6개를 작업해 줍니다. div 박스 6개는 정육면체의 각각의 면입니다. 원하는 문구를 작성하면 됩니다. 2. CSS 소스 body { background-color: lavender; height: 100vh; perspective: 1000px; display: flex; align-items: center; justify-content: center; .. 2022. 9. 22.

자바스크립트 마우스 효과 : 이미지 효과 자바스크립트 : 마우스 효과 : 이미지 효과 자바스크립트의 다양한 효과들 중, 마우스 효과입니다. 이번에는 이미지 위에 마우스를 오버하면 커서가 나타나고, 커서의 위치에 따라 이미지가 확대됨과 동시에 이동하는 효과를 작업해 보도록 하겠습니다. 1. 선택자 만들기 const cursor = document.querySelector(".mouse__cursor"); const cursorRect = document.querySelector(".mouse__cursor").getBoundingClientRect(); 커서에 대한 선택자를 먼저 만들어 줍니다. 두 번째 선택자는 마우스 효과 3번에서도 사용했던 속성으로, 너비와 높이 등을 객체로 한번에 출력할 수 있습니다. 2. 마우스 이벤트 만들기 docume.. 2022. 9. 22.

자바스크립트 마우스 효과 : 조명 효과 자바스크립트 : 마우스 효과 : 조명 효과 자바스크립트의 다양한 효과들 중, 마우스 효과입니다. 이번에는 조명 효과를 작업해 보도록 하겠습니다. 조명 효과는 배경 이미지 위에 마우스를 올리면, 이미지가 선명하게 보이도록 하는 효과입니다. 1. CSS 소스 1-1) cursor 만들기 .mouse__cursor { position: absolute; left: 0; top: 0; width: 200px; height: 200px; z-index: -1; border-radius: 50%; background-image: url(../assets/img/effect_bg15@2x-min.jpg); background-size: cover; background-position: center center; ba.. 2022. 9. 22.

CSS 애니메이션 만들기 : 통통 튀는 글자 CSS 애니메이션 : 통통 튀는 글자 오늘은 글자들이 딜레이를 두고 통통 튀는 듯한 애니메이션이 나타나도록 작업해 보겠습니다. 작업해볼 애니메이션은 다음과 같습니다. See the Pen Text animation02 by mj0614k (@mj0614k) on CodePen. 1. HTML 소스 M I N J E O N G h1 태그 안에 원하는 글자 수만큼 span 태그를 작성하고, 글자를 한 자씩 입력해 줍니다. 2. CSS 소스 html, body { width: 100%; height: 100%; background: linear-gradient(140deg, skyblue 0%, plum 100%); display: flex; justify-content: center; align-items:.. 2022. 9. 22.

CSS 애니메이션 만들기 : 카드 뒤집기 CSS 애니메이션 : 카드 뒤집기 애니메이션 오늘은 마우스를 오버했을 때 카드가 뒤집히는 듯한 애니메이션이 나타나도록 작업해 보겠습니다. 작업해볼 애니메이션은 다음과 같습니다. See the Pen hoveranimation by mj0614k (@mj0614k) on CodePen. 1. HTML 소스 Mouse Hover Effect 마우스를 올리면 Up Mouse Hover Effect 마우스를 내리면 Down Mouse Hover Effect 마우스를 올리면 to Right Mouse Hover Effect 마우스를 내리면 to Left HTML 소스는 전체에 해당하는 hover__wrap 안에 hover__updown, hover__leftright 두 개의 div 박스를 만들어 줍니다. 그 안.. 2022. 9. 20.

자바스크립트 패럴랙스 효과 : 이질감 효과 자바스크립트 : 패럴랙스 효과 : 이질감 효과 자바스크립트의 다양한 효과들 중, 패럴랙스 효과입니다. 이번에는 스크롤을 내릴 때마다 글자와 이미지에 애니메이션 효과를 주어, 약간의 이질감이 느껴지도록 작업해 보았습니다. 1. 스크롤 이벤트 만들어 주기 function scroll() { requestAnimationFrame(scroll); }; scroll(); 오늘 작업할 모든 함수들은, 재귀 함수인 scroll() 내에서 작업할 예정입니다. 패럴랙스 효과 3번에서도 설명했듯이, addEventListener를 사용하지 않는 이유는 버벅거림 현상을 피하기 위해서입니다. 2. 현재 스크롤의 높이값 구하기 let scrollTop = window.pageYOffset || document.document.. 2022. 9. 20.

[VSCode] SCSS 설치 및 설정 방법 SCSS 설치 및 설정 방법 SCSS란, 코드의 재활용성을 올리고, 가독성을 올리는 등 CSS에서 보이던 단점을 보완하고, 개발의 효율을 올리기 위해 등장한 CSS Preprocessor입니다. SCSS의 기능에 대하여 더 자세히 알고 싶으시다면, 여기를 클릭해 주세요. 오늘은 VSCode에서 SCSS를 사용하기 위한 설치 및 설정 방법을 알아보도록 하겠습니다. 1. SASS 설치 먼저, 확장 프로그램(Extenstion, 단축키 Ctrl + Shift + X)에서 Sass를 설치해 줍니다. 하나 더 설치해 줍시다. Live Sass Compiler는 실시간으로 CSS를 Scss로 컴파일해 줍니다. 위와 같이 Scss 파일을 만들었을 때, VSCode의 하단에 나타나는 Watch Sass 문구를 통해 정.. 2022. 9. 19.

CSS 애니메이션 만들기 : 일렁이는 애니메이션 CSS 애니메이션 : 일렁이는 애니메이션 오늘은 CSS의 다양한 속성을 이용하여 애니메이션을 만들어 보도록 하겠습니다. 애니메이션 이름을 뭐라고 해야 할지 모르겠네요. 작업해볼 애니메이션은 다음과 같습니다. See the Pen Untitled by mj0614k (@mj0614k) on CodePen. 1. HTML(PUG) 소스 div.circle-wrap -for (var x = 1; x 2022. 9. 19.

자바스크립트 마우스 효과 : 마우스 따라다니기(GSAP) 자바스크립트 : 마우스 효과 : 마우스 따라다니기(GSAP) 자바스크립트의 다양한 효과들 중, 마우스 효과입니다. 이번에는 GSAP를 활용하여 더 부드럽게 움직이는 커서를 작업해 보도록 하겠습니다. 1. HTML 소스 Only I can change my life, No one can do it for me 오직 나만이 내 인생을 바꿀 수 있다. 아무도 날 대신할 수는 없다 이번에는 커서를 두 개 작업해 주었습니다. HTML로 구조를 잡은 후, CSS로 스타일을 적용해 줍니다. 2. CSS 소스 .mouse__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; color: #fff; o.. 2022. 9. 18.

자바스크립트 슬라이드 효과 : 버튼 자바스크립트 슬라이드 효과 : 버튼 자바스크립트의 다양한 효과들 중, CSS의 트랜지션 속성을 활용한 이미지 슬라이드 효과입니다. 이번 유형은 해당하는 버튼을 클릭하면 이전 이미지, 다음 이미지로 슬라이드하는 유형입니다. 1. CSS 소스 .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } .slider__img { /* 이미지 보이는 영역 */ position: relative; width: 800px; height: 520px; overflow: hidden; } .slider__inner { /* 이미지를 감싸고 있는 부모(움직이는 부분) */ display: .. 2022. 9. 18.

자바스크립트 패럴랙스 효과 : 나타나기 자바스크립트 : 패럴랙스 효과 : 나타나기 자바스크립트의 다양한 효과들 중, 패럴랙스 효과입니다. 이번에는 패럴렉스 효과 1번과 같은 메뉴 디자인이지만, 스크롤의 위치에 따라 콘텐츠의 각 내용물들이 순차적으로 나타나는 유형을 작업해 보도록 하겠습니다. 1. JAVASCRIPT로 스크롤 이벤트 만들어 주기 2-1) addEventListener window.addEventListener("scroll", 함수명); 지금까지는 addEventListener로 스크롤 이벤트를 작업해 주었습니다. 그러나, 이 방법은 스크롤을 매번 감지하기 때문에 버벅거림 현상이 나타날 수 있습니다. 따라서 이번에는 재귀함수를 사용하여 작업을 하도록 하겠습니다. 2-2) 재귀함수(Recursion) function scroll(.. 2022. 9. 18.

웹사이트 만들기 : 전체 사이트 유형01 레이아웃 : 전체 사이트 유형01 지금까지 카드 유형, 텍스트 유형, 이미지/텍스트 유형 등 다양한 유형의 레이아웃을 작업해 보았습니다. 이번에는 작업했던 유형들을 모두 한 곳에 모아 전체적인 사이트 한 페이지를 만들고, 미디어 쿼리까지 작업해 보도록 하겠습니다. HTML 소스 HTML 소스는 지금까지 작업한 모든 것들을 한 곳에 모은 것과 같습니다. 헤더 메뉴는 웹에서는 일반적인 메뉴 형태로, 모바일에서는 햄버거 메뉴로 작업해 주었습니다. 각 메뉴를 클릭했을 때, 각각의 위치로 이동할 수 있도록 각 영역은 section 태그로 작업해 주었습니다. 슬라이드 영역을 다시 작업해준 이유는 swiper를 사용하기 위함입니다. 드래그를 통한 이미지 슬라이드 효과를 사용하기 위해 swiper를 이용했고, swip.. 2022. 9. 14.

자바스크립트 패럴랙스 효과 : 메뉴 숨김, TOP버튼 자바스크립트 : 패럴랙스 효과 : 메뉴 숨김 자바스크립트의 다양한 효과들 중, 패럴랙스 효과입니다. 이번에는 패럴렉스 효과 1번과 같은 메뉴 디자인이지만, 스크롤을 아래로 내리면 메뉴가 사라지고, 위로 올리면 메뉴가 나타나도록 작업해 주었습니다. 또, 스크롤이 최하단 부근에 위치하면 Top 버튼이 나타나고, Top 버튼을 클릭하면 최상단으로 올라갈 수 있는 기능을 추가해 주었습니다. 1. 스크롤 이벤트 만들어 주기 window.addEventListener("scroll", () => { /* 1) 스크롤의 높이값 구하기 */ let scrollTop = window.pageYOffset || window.scrollY || document.documentElement.scrollTop; /* 2) in.. 2022. 9. 10.

자바스크립트 패럴랙스 효과 : 사이드 메뉴 자바스크립트 : 패럴랙스 효과 : 사이드 메뉴 자바스크립트의 다양한 효과들 중, 패럴랙스 효과입니다. 이번에는 상단 메뉴가 아닌 사이드 메뉴를 만들어 주고, 현재 위치한 스크롤값에 따라 메뉴에 애니메이션 효과를 추가해 주었습니다. HTML 소스 HTML은 먼저 nav, main, aside 세 파트로 나누어 주었습니다. nav에는 9개의 메뉴, main에는 9개의 콘텐츠, aside에는 스크롤의 위치값을 볼 수 있게끔 만들어 주었습니다. 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 메뉴7 메뉴8 메뉴9 01 section1 결과도 중요하지만, 과정을 더 중요하게 생각한다. 02 section2 비가 온 다음에는 맑은 날씨가 된다. 03 section3 정직한 사람이 없다고 말하는 사람이야말로 가장 정직하지.. 2022. 9. 8.

CSS 애니메이션 만들기 : GIF 이미지 애니메이션 구현하기 CSS 애니메이션 : GIF 이미지 애니메이션 구현하기 오늘은 조금 다른 방식으로, GIF 이미지를 애니메이션으로 구현하는 방법을 알아보겠습니다. 1. 애니메이션을 만들 이미지 찾기 먼저, 어떠한 GIF 이미지를 애니메이션으로 만들 것인지 결정합니다. 2. 애니메이션의 프레임 나열하기 Photoshop에서 GIF 이미지를 가져와 Timeline 창을 띄우면, GIF를 이루고 있는 각각의 레이어들이 나타납니다. 여우 이미지의 크기는 1600px * 1200px이며, 레이어는 총 18개가 있었습니다. GIF의 이미지의 너비(1600px) X 레이어 수(18)의 값(28,800px)을 구해줍니다. 이후, width값이 28,800px, height값이 1200px인 새로운 창을 만들고, 여우의 움직임에 해당하.. 2022. 9. 8.

CSS 애니메이션 만들기 : 애니메이션 기초 CSS 애니메이션 만들기 : 기초 애니메이션 오늘은 CSS의 다양한 애니메이션과 관련된 속성을 알아보고, 기초적인 애니메이션을 만들어 보도록 하겠습니다. ANIMATION 종류 예시 animation-name @keyframe에 지정된 이름을 설정합니다. animation-duration 애니메이션이 실행되는 시간을 설정합니다. animation-timing-function 애니메이션 키프레임 움직임을 설정합니다. animation-delay 애니메이션이 시작되기 전까지 시간을 설정합니다. animation-iteration 애니메이션 반복 횟수를 설정합니다. animation-derection 애니메이션 방향을 설정합니다. animation-fill-mode 애니메이션 끝나고 난 뒤 어떤 값을 적용할지.. 2022. 9. 8.

CSS 애니메이션 만들기 : SVG CSS : SVG 애니메이션 만들기 SVG로 도형 만드는 방법을 알게 되었으니, 더 나아가 SVG에 애니메이션 효과를 주는 방법에 대하여 알아보도록 하겠습니다. 1. HTML로 도형 만들기 2. CSS로 애니메이션 효과 추가하기 stroke-dasharray 속성은 선을 대쉬 형태로 만들며, 값을 부여한 만큼 대쉬 길이가 늘어납니다. 만약 svg의 path 길이가 100이고, dasharray의 길이를 50으로 설정하면, SVG는 절반만 보이게 되는 것입니다. 한편, stroke-dashoffset 속성은 그림이 어떤 부분에서부터 시작할지 정하는 속성입니다. .ani1 { width: 100px; height: 100px; x: 30px; y: 30px; fill: none; stroke: #880E41.. 2022. 9. 8.

CSS : SVG 도형 만들기 CSS : SVG 도형 만들기 오늘은 CSS로 여러 가지 SVG 도형을 만드는 방법에 대하여 알아보도록 하겠습니다. SVG란? 스케일러블 벡터 그래픽스(Scalable Vector Graphics, SVG)는 2차원 벡터 그래픽을 표현하기 위한 XML 기반의 파일 형식으로, 1999년 W3C(World Wide Web Consortium)의 주도하에 개발된 오픈 표준의 벡터 그래픽 파일 형식입니다. SVG 형식의 이미지와 그 작동은 XML 텍스트 파일들로 정의 되어 검색화·목록화·스크립트화가 가능하며 필요하다면 압축도 가능합니다. 인터넷 익스플로러9 버전 이상부터 지원됩니다. XML을 이용하여 라인, 곡선, 기하학적인 그래픽 표현이 가능합니다. 벡터 방식이기 때문에 확대하거나 축소가 가능합니다. DOM .. 2022. 9. 7.

자바스크립트 패럴랙스 효과 : 메뉴 이동 자바스크립트 : 패럴랙스 효과 : 메뉴 이동 자바스크립트의 다양한 효과들 중, 패럴랙스 효과입니다. 스크롤의 위치에 따라 메뉴 탭의 클래스에 변화를 주고, 메뉴를 클릭하면 메뉴가 있는 곳으로 부드럽게 이동하게끔 작업해 보도록 하겠습니다. HTML 소스 HTML은 먼저 nav, main, aside 세 파트로 나누어 주었습니다. nav에는 9개의 메뉴, main에는 9개의 콘텐츠, aside에는 스크롤의 위치값 목록을 만들어 주었습니다. 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 메뉴7 메뉴8 메뉴9 01 section1 결과도 중요하지만, 과정을 더 중요하게 생각한다. 02 section2 비가 온 다음에는 맑은 날씨가 된다. 03 section3 정직한 사람이 없다고 말하는 사람이야말로 가장 정직하지 .. 2022. 9. 6.

자바스크립트 마우스 효과 : 마우스 따라다니기 자바스크립트 : 마우스 효과 : 마우스 따라다니기 자바스크립트의 다양한 효과들 중, 마우스 효과입니다. 다양한 메서드를 활용하여 마우스의 위치값을 찾고, 위치값에 따라 커서가 이동하고 변화하게끔 작업해보도록 하겠습니다. HTML 소스 HTML로는 먼저 마우스의 커서를 만들어 주고, 명언이 들어갈 mouse__wrap 박스, 마우스의 위치값을 작성할 mouse__info 박스를 만들어 주었습니다. The future depends on what we do in the present 미래는 현재 우리가 무엇을 하는가에 달려있다 clientX : 0px clientY : 0px offsetX : 0px offsetY : 0px pageX : 0px pageY : 0px screenX : 0px screenY .. 2022. 9. 6.

자바스크립트 : 마우스 이벤트 메서드 : mouseover VS mouseenter 자바스크립트 : 마우스 이벤트 메서드 : mouseover VS mouseenter 오늘은 자바스크립트의 마우스 이벤트 메서드 중 mouseover와 mouseenter의 차이에 대하여 알아보도록 하겠습니다. mouseover VS mouseenter mouseover와 mouseenter는 요소 위에 마우스 포인터를 위치했을 때 이벤트를 발생시키는 메서드입니다. 이 두 메서드의 차이는 무엇일까요? window.addEventListener("mouseover",() => {}) window.addEventListener("mouseenter",() => {}) 이벤트 버블링 두 메서드의 차이는 이벤트 버블링에 있습니다. 이벤트 버블링은 특정 화면 요소에서 이벤트가 발생했을 때 해당 이벤트가 더 상위의 .. 2022. 9. 5.

웹사이트 만들기 : 푸터 유형 레이아웃01 레이아웃 : 푸터 유형01 다음과 같은 푸터 유형의 레이아웃을 작업해 보도록 하겠습니다. HTML 소스 푸터 영역은 먼저 footer__menu 클래스를 가진 div 박스 안에 메뉴의 개수만큼 6개의 div 박스를 만들어 주고, 그 안에 각각의 메뉴 제목, 목록을 작성해 주었습니다. 사이트 웹표준 사이트 반응형 사이트 패럴랙스 사이트 포트폴리오 사이트 헤더 영역 메뉴 유형01 메뉴 유형02 슬라이드 영역 슬라이드 유형01 슬라이드 유형02 이미지 영역 이미지 유형01 이미지 유형02 이미지/텍스트 유형01 이미지/텍스트 유형02 텍스트 유형01 콘텐츠 영역 카드 유형01 카드 유형02 카드 유형03 푸터 영역 푸터 메뉴 유형01 푸터 컨택트 유형02 푸터 이메일 유형03 2022 mo0647. Portf.. 2022. 9. 5.

웹사이트 만들기 : 배너 유형 레이아웃01 레이아웃 : 배너 유형01 다음과 같은 배너 유형의 레이아웃을 작업해 보도록 하겠습니다. HTML 소스 배너 유형은 아주 간단합니다. banner__inner 클래스를 가진 부모 div 박스에 백그라운드로 이미지를 삽입하고, 제목과 하위 메시지를 작성하면 완성입니다. 배너 영역 귀여운 댕댕 더 다양한 댕댕이는 유튜브로 보세요. yotube.com 배너 유형01 CSS 소스 /* bannerType */ .banner__inner { background-image: url(img/banner01_bg01.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; text-align: center; paddi.. 2022. 9. 5.

웹사이트 만들기 : 슬라이드 유형 레이아웃01 레이아웃 : 슬라이드 유형01 다음과 같은 슬라이드 유형의 레이아웃을 작업해 보도록 하겠습니다. 슬라이드 유형은 버튼을 클릭하면 다음 이미지로 넘어가는 레이아웃 유형입니다. 오늘은 스크립트 구현은 하지 않고, 레이아웃 과정만 작업하도록 하겠습니다. HTML 소스 DEVELOPER NEW PROJECT 너무 무리하지 말아요! 이미 당신은 잘하고 있고! 앞으로도 잘 할 수 있어요! 자세히 보기 사이트 보기 이전 이미지 다음 이미지 1 2 3 플레이 정지 CSS 소스 화살표에 대한 설명인 '이전 이미지', '다음 이미지' 텍스트는 ir 효과를 주어 숨김 처리해 주었습니다. blind 효과와 ir 효과는 웹 표준성 준수를 위해 사용한다는 점에서 공통점이 있지만, blind 효과는 이미지 없이 단순히 글자를 숨기.. 2022. 9. 5.

[VSCode] Prettier 설치 후 설정 방법 Prettier 설치 후 설정 방법 Prettier는 코드 포멧터(code formatter)로, 소스를 자동으로 정렬해 주기 때문에 유용하게 사용됩니다. 그러나 Prettier를 사용하기 전에는 몇 가지 설정을 해 주어야 합니다. 오늘은 Prettier 설치 및 설정 방법을 알아보도록 하겠습니다. 1. Prettier 설치 먼저, 확장 프로그램(Extenstion, 단축키 Ctrl + Shift + X)에서 Prettier를 설치해 줍니다. Ctrl + S를 눌러 확인해 보면, 아직은 Prettier가 적용되지 않을 것입니다. 2. Prettier 설정 그 다음, VSCode의 상단 메뉴 중 File 탭에 있는 설정(Preference)에 들어갑니다. 검색창에 'editor format on save'.. 2022. 9. 5.

제이쿼리 : 스타일 관련 메서드 제이쿼리 : 스타일 관련 메서드 오늘은 JQuery의 주요 메서드들 중, 스타일과 관련된 메서드를 알아보도록 하겠습니다. 1. css() 메서드 실행 분류 형식 취득 $("div").css("width"); 생성, 변경 $("div").css("background-color", "red").css("padding", "10px"); $("div").css({"background-color: "red", padding: "10px"}); 콜백 함수 $("div").attr("width", function(index, w) { // index는 각 div 요소의 index 0, 1, 2 // w는 각 div 요소의 width 값 return css 속성 // 각 div 요소의 css 속성을 생성 및 변경합니.. 2022. 9. 5.

제이쿼리 : 속성 관련 메서드 제이쿼리 : 속성 관련 메서드 오늘은 JQuery의 주요 메서드들 중, 속성과 관련된 메서드를 알아보도록 하겠습니다. 1. attr() 메서드 선택한 요소의 attribute(속성)를 선택, 생성, 변경할 수 있습니다. 실행 분류 형식 취득 $("a").attr("href"); 생성, 변경 $("a").attr("href", "http://icoxpublish.com").attr("target", "_blank"); $("a").attr({href: "http://icoxpublish.com", target: "_blank"}); 콜백 함수 $("a").attr("href", function(index, h) { // index는 각 a 요소의 index 0, 1, 2 // h는 각 a 요소 href 속.. 2022. 9. 4.

제이쿼리 : 클래스 관련 메서드 제이쿼리 : 클래스 관련 메서드 오늘은 JQuery의 주요 메서드들 중, 클래스와 관련된 메서드를 알아보도록 하겠습니다. 1. addClass() 메서드 요소에 class 속성을 추가합니다. 실행 분류 형식 추가 $("div").addClass("클래스명"); 콜백 함수 $("div").addClass(function(index, className) { // index는 각 div 요소의 index 0,1,2 // className은 각 div의 class 속성 return class 속성 // 각 div에 class 속성을 추가합니다. }); .... 내용1 내용2 내용3 다음은 addClass() 메서드의 사용 예제입니다. See the Pen classmethod01 by mj0614k (@mj06.. 2022. 9. 4.

CSS 애니메이션 만들기 : 공 튀기기 CSS 애니메이션 : 공 튀기기 오늘은 CSS의 다양한 속성을 이용하여 애니메이션을 만들어 보도록 하겠습니다. 작업해볼 애니메이션은 다음과 같습니다. 조랭이떡 같네요. See the Pen balls by mj0614k (@mj0614k) on CodePen. 1. HTML 소스 잔상을 포함하여 다섯 개의 공을 만들 것이기 때문에, 다섯 개의 wrapper 클래스를 가진 div 박스를 만들어 줍니다. 2. CSS 소스 * { box-sizing: border-box; } body { background: linear-gradient(to top, pink 0%, skyblue 100%); width: 100vw; height: 100vh; display: flex; justify-content: cent.. 2022. 9. 2.

자바스크립트 슬라이드 효과 : 좌로 움직이는 유형(연속적) 자바스크립트 슬라이드 효과 : 좌로 움직이는 유형(연속적) 자바스크립트의 다양한 효과들 중, CSS의 트랜지션 속성을 활용한 이미지 슬라이드 효과입니다. 이번 유형은 마지막 이미지에 도달해도, 처음 이미지로 돌아가지 않고 연속적으로 이미지가 나타나는 유형입니다. HTML 소스 HTML로 뼈대를 먼저 잡아줍니다. section 태그 안에는 클래스명이 slider__wrap인 div 박스, 그 안에는 클래스명이 slider__img인 div 박스를 만들어 주고, 그 안에는 slider__inner 박스, 그 안 slider 박스 안에는 각각 이미지 5장을 삽입해 주었습니다. 각각의 div 박스의 용도는 CSS 소스에서 추가로 설명하도록 하겠습니다. 궁금하면 보시든가... CSS 소스 /* slider */ .. 2022. 9. 1.

이전 1 2 3 4 5 6 다음

728x90

감사합니다. 🦙

JAVASCRIPT

HTML

CSS

광고 준비중

티스토리툴바