xoouxa

안녕하세요 ヾ(≧▽≦*)o 오늘은 포트폴리오에 넣기 좋은 효과들로 만든 패럴렉스 효과 06번을 만들어 보도록 하겠습니다! 다양한 css 기능들이 있으니 한 번 적용해 보시면 멋진 포폴이 완성될 것이라 생각합니다 ! 🍕 🧇 완성화면입니다. HTML 01 section01 결과도 중요하지만, 과정을 더 중요하게 생각한다. 02 section02 우리 모두는 인생에서 만회할 기회라 할 수 있는 큰 변화를 경험한다 03 section03 다음에 벌어질지 모를 장벽을 걱정하여 미래를 향한 걸음을 멈춰선 안된다. 04 section04 나 스스로가 풍요로운 사람이 되려 노력해야 한다 05 section05 자신에 대한 평판은 신경쓰지마라 06 section06 이상과 꿈을 버리지 마라 07 section07 명사형..

안녕하세요 ヾ(≧▽≦*)o 오늘은 저번에 만든 사이트를 기반으로 뮤직플레이어를 추가해 주도록 하겠습니다 ! 하나만 추가했는데도 엄청나게 많은 코드를 작성해주어서 당황 !! 했지만 내가 해냄 😏 저번에 했던 코드에서 html은 건들지 않고 json파일을 작업해 주었습니다 ! 소스들은 마지막 git 페이지에서 확인하실 수 있습니다. 💛 완성화면입니다. 플레이 버튼을 누르시면 노래가 나옵니다 🎧🤍 json파일 const allMusic = [ { name : "1. 바닷가", artist : "darin", img : "music__view001", audio: "music_audio01" }, { name : "2. 바닷가", artist : "darin", img : "music__view002", aud..

안녕하세요 ヾ(≧▽≦*)o 오늘은 mysql을 이용해 php 작업으로 게시판 사이트를 만들어 보도록 하겠습니다. 제가 중요하다고 생각하는 부분만 설명드리도록 하겠습니다. board 파일을 따로 만들어서 여러 경우의 수를 전부 작업해 주도록 하겠습니다 😏 mamp를 켜신 상태에서 작업해 주셔야 사이트가 열립니다 ! 게시판 게시판 글 수정 - 수정본 저장 게시판 글 삭제 (검색은 아직 작업하지 않았습니다.) 게시글 보기 게시글 작성 작성글 저장 순입니다. 1️⃣ 메인 게시판

안녕하세요 ヾ(≧▽≦*)o 오늘은 자바스크립트 문자열 객체 정리를 해보도록 하겠습니다. at(), charAt(), charCodeAt(), charPointAt(), concat(), localeCompare(), normalize(), padEnd(), padStart(), repeat() 메서드에 대해 정리해 보도록 하겠습니다 ~ at() 메서드 at() 메서드는 지정한 숫자(index)를 받아, 문자열에서 해당 되는 인덱스의 요소를 반환합니다. at() 메서드는 charAt() 메서드와 유사하지만, charAt() 메서드와 달리 유니코드 문자열에서 작동합니다. 또한 at() 메서드는 인덱스가 문자열 길이를 벗어나는 경우 undefined를 반환합니다. 기본 예제 const str = 'Hello ..

안녕하세요 ヾ(≧▽≦*)o 오늘은 마우스 드래그를 하면 사진과 멘트가 나오는 패럴렉스 효과를 한 번 만들어 보도록 하겠습니다. 포트폴리오에도 많이 사용되고 사이트를 만들 때에도 자주 사용되는 효과이니 여기서 잘 익히고 나중에 작업하실 때 한 번 이용해 보세요 ~ 😏🙌 💛 완성 화면 입니다 . 스크롤하시면 효과를 확인하실 수 있습니다 귀여운 저희 학원 사람들입니도 ..? 🐣 폰트와 CSS 패럴렉스 *{ margin: 0; padding: 0; box-sizing: border-box; font-family: 'ReciaSerifDisplay'; } body { height: 20000px; background-color: #fff4b4; } .scrollTop { position: fixed; left: ..

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

안녕하세요 ヾ(≧▽≦*)o 오늘은 배경 이미지 위에 이미지를 여러장 덧대어 그 이미지가 위 아래로 움직일 수 있도록 효과를 한 번 주도록 하겠습니다. 이미지가 부드럽게 위아래로 움직이게 해주도록 하겠습니다. 자바스크립트, GSAP, jQurey 세 가지를 이용해 같은 효과를 주도록 하겠습니다. CSS 스타일 04. 슬라이드 이펙트 HTML 순서대로 변화할 이미지 5개를 지정해 줍니다. 그 다음 s1이었다가 s5이 다시 되고 그 다음 또 다시 s1이 되기 위함을 확인하기 위해 class slider s1이라는 이름을 지정해 줍니다. 변수 설정 // 선택자 const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = sliderW..

안녕하세요 ヾ(≧▽≦*)o 오늘은 배경 이미지 위에 이미지를 여러장 덧대어 그 이미지가 좌우로 움직일 수 있도록 효과를 한 번 주도록 하겠습니다. 💛 완성작입니다. 이미지가 부드럽게 좌우로 움직이게 해주도록 하겠습니다. 자바스크립트, GSAP, jQurey 세 가지를 이용해 같은 효과를 주도록 하겠습니다. CSS 스타일 총 이미지의 크기가 4800이기 때문에 이미지가 움직이는 영역에 width값을 4800로 지정해 줍니다. 또한 움직이는 개별적인 이미지의 크기는 800이기 때문에 800으로 설정해 줍니다. HTML 순서대로 변화할 이미지 5개를 지정해 줍니다. 그 다음 s1이었다가 s5이 다시 되고 그 다음 또 다시 s1이 되기 위함을 확인하기 위해 class slider s1이라는 이름을 지정해 줍니다..

안녕하세요 ヾ(≧▽≦*)o 오늘은 배경 이미지 위에 이미지를 여러장 덧대어 그 이미지가 좌우로 움직일 수 있도록 효과를 한 번 주도록 하겠습니다. 💛 완성작입니다. 자바스크립트, GSAP, jQurey 세 가지를 이용해 같은 효과를 주도록 하겠습니다. CSS 스타일 01. 슬라이드 이펙트 🍔 .slider:nth-child(1) :: before {content: '이미지1'} , .slider:nth-child(1) {z-index: 5;} ? 이 코드는 CSS 선택자를 사용하여 슬라이더 이미지 위에 이미지의 번호를 표시하고, 슬라이더 이미지의 z-index 값을 조정하는 것입니다. .slider:nth-child(n)::before 선택자는 nth-child() 함수를 사용하여 클래스 이름이 "sli..

안녕하세요 ヾ(≧▽≦*)o 오늘은 배경 이미지 위에 이미지를 여러장 덧대어 그 이미지가 좌우로 움직일 수 있도록 효과를 한 번 주도록 하겠습니다. 💛 완성작입니다. 자바스크립트, GSAP, jQurey 세 가지를 이용해 같은 효과를 주도록 하겠습니다. CSS 스타일 02. 슬라이드 이펙트 우선 전체 이미지를 100%로 설정해 줍니다. 그 다음 이미지를 덧대어 주는 부분을 설정해 주기 위해 위드값 800, 하이트값을 450으로 지정해 줍니다. 다음은 이미지가 위아래로 움직이게 해주기 위해서 위드값 4000, 하이트값 450을 지정해 줍니다. 마지막으로 개별적인 이미지 값을 설정해 주기 위해서 포지션 릴레이티브를 줍니다. html yuna243441@naver.com 각 슬라이드에 맞는 이미지를 설정해 주기..