[개발] Practice/JavaScript jQuery18 [JavaScript / jQuery] 한 글자씩 출현하는 Typewriting 애니메이션 만들기 💡 실습 포인트! 오늘은 한 글자씩 보여주는 Typewriting 애니메이션을 만들어보았다. Click Me! 버튼을 클릭하면 "Hi! I'm Seoyun. Good to see U." 문구가 한 글자씩 나온다. 이번 기능은 setTimeout 함수를 이용해서 만들 수 있었다. 💜 HTML Click Me! Hi! I'm Seoyun. Good to see U. 먼저 HTML 파일에 버튼과 나와야하는 문구의 내용을 작성해준다. 💜 CSS .container { width: 100%; margin: 50px; } h1 { width: 100%; text-align: center; display: none; } button { display: block; margin: 30px auto; width: 130.. 2022. 3. 9. [JavaScript / jQuery] 스크롤 위치에 따라 변하는 애니메이션 : Apple Music UI 만들기 💡 실습 포인트! 애니메이션 효과를 보여주기 위해 천천히 스크롤하면서 GIF 캡처를 해보았다. 개인적으로 아래에 위치하던 다음 사진이 올라오면서 기존의 사진이 흐려지면서 작아지다 다음 사진에 가려지는데, 이 효과가 너무 예쁜데 만드는데 꽤나 힘들었던 거 같다. 💜 HTML 일단 카드이미지를 3개 준비해서, card-box 클래스에 각각 담아준다. 💜 CSS .card-background { height: 3000px; margin-top: 370px; } .card-box img { display: block; margin: auto; max-width: 80%; } .card-box { position: sticky; top: 370px; margin-top: 370px; transition: all .. 2022. 3. 9. [JavaScript / jQuery] position : sticky 활용하기 💡 실습 포인트! position : sticky 를 이용해서 화면의 좌측에 위치한 텍스트는 스크롤을 내리면 움직이고, 우측의 이미지는 고정되어있는 독특한 구조의 레이아웃을 만들어보았다. 💜 HTML Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente expedita obcaecati ducimus, at quia nam deserunt ad atque ex cupiditate illo itaque laboriosam molestiae dignissimos molestias minima vitae, doloremque non. Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapien.. 2022. 3. 9. [JavaScript / jQuery] 쇼핑몰 상품 진열 및 상품 정렬 기능 만들기 💡 실습 포인트! 오늘은 상품 진열 및 상품 정렬 기능을 만들어 보았다. 원래 강의에서 강사님이 진행한 방식대로도 해본 후, "이런 방식으로 하면 코드를 좀 더 줄일 수 있을까" 라는 생각으로 새로운 방식으로 진행해보았다. (아직 배우는 과정이라.. 뭐가 더 나은 방식인지는 모르겠고 고민해봤다는 데에 의의를 둔다 ㅎㅎ) 우선 상품 진열의 경우, html 파일에 레이아웃을 하드코딩을 해놓고 forEach 함수를 사용하여 데이터바인딩 후, 진열 기능을 만들어나가면서 하드코딩한 부분을 지워나갔다. 그 다음 자주 사용되는 JavaScript 문법인 sort, filter 를 사용하여 가나다순 정렬, 가격순 정렬, 6만원 이하 보기(필터) 기능을 넣어보았다. 마지막으로 첫화면으로 되돌리는 원래대로 기능을 추가했다.. 2022. 3. 9. [JavaScript / jQuery] 인터렉티브 form 만들기 💡 실습 포인트! 이번에는 상품선택 폼을 만들어보았다. 상품 리스트로는 셔츠와 바지가 있고, 각각 클릭하면 사이즈 선택창에 해당하는 사이즈들의 리스트가 나와야한다. 💜 HTML 상품 선택 셔츠 바지 사이즈 선택 JavaScript 코드를 짜는 게 목적이므로 디자인은 간단하게 Bootstrap 에서 복사-붙여넣기했다. 기본적으로 하드코딩을 해서 html 파일에 넣었었지만, 추후 JavaScript 로 코드를 짜면서 사이즈 선택 부분은 수정해보았다. 💜 JavaScript // * input 이벤트 // 값을 수정할 때마다 이벤트 발생 // * change 이벤트 // 요소 변경이 끝나면 이벤트 발생 // 텍스트 입력 요소의 경우 focus 를 잃으면 이벤트 발생 // select, input type=ch.. 2022. 3. 7. [JavaScript / jQuery] 이벤트 버블링 응용과 dataset 활용하기 💡 실습 포인트! 오늘은 이전에 만들었던 탭 기능 부분의 코드를 조금 개선해보았다. 💜 JavaScript : 기존 for (let i = 0; i < $('.tab-button').length; i++){ $('.tab-button').eq(i).on('click', function(){ $('.tab-button').removeClass('active'); $('.tab-content').removeClass('show'); $('.tab-button').eq(idx).addClass('active'); $('.tab-content').eq(idx).addClass('show'); }) } 기존의 JavaScript 코드는 for 문 안에 넣을 기능들을 단순히 나열한 것이었다. 💜 JavaScript.. 2022. 3. 7. [JavaScript / jQuery] 탭 기능 만들기 💡 실습 포인트! 탭 만드는 부분은 강의에서 기본 HTML, CSS 를 제공해주어서 기능만 만들면 되었기에 크게 어렵지는 않았다. 다만 Dark Mode 를 제대로 적용하고 싶었는데 border-bottom 부분이 원하는 대로 나오지 않아 일단 보류해두었다. 💜 HTML Products Information Shipping 상품설명입니다. Product 상품정보입니다. Info 배송정보입니다. Shipping 💜 CSS ul.list { list-style-type: none; margin: 0; padding: 0; border-bottom: 1px solid #ccc; } ul.list::after { content: ""; display: block; clear: both; } .tab-button.. 2022. 3. 6. [JavaScript / jQuery] Scroll 이벤트로 재미있는 기능 만들기 💡 실습 포인트! 오늘은 스크롤 기능을 어떤 식으로 활용하는지에 대해 공부했다. 확실히 그냥 문법만 배우는 것보다 직접 구글링하며 이것저것 기능을 넣어 페이지를 만드는 게 도움이 되는 것 같다. 수업에서는 간단히 "이런 것도 해보세요~" 라며 숙제를 내주시지만.. 나란 사람은 또 디테일에 집착했다. 예를 들면, 메인 화면이 아래쪽으로 어느정도 스크롤되면 로고가 커지고, 다시 스크롤을 올리면 로고가 원래대로 돌아오는 기능을 만들었다. 근데 그렇게 되면 기존의 css 중 서브메뉴리스트, 이벤트 배너, 메인화면 상단 사진 이런 것들의 위치가 다 조금씩 틀어지더라.. 그래서 이것들의 위치와 겹쳐지는 부분들 중 어떤 것을 위쪽에 두고 어떤 것을 아래쪽에 둘지를 조정하고 그것들을 JavaScript 로 구현하느라 .. 2022. 3. 6. [JavaScript / jQuery] 캐러셀(이미지 슬라이드) 만들기 💡 실습 포인트! 오늘은 이미지 슬라이드를 만들어보았다. 화면 하단 가운데에 있는 동그라미 버튼 3개는 각 버튼을 눌렀을 때 해당하는 순서의 슬라이드로 이동시켜준다. 동그라미 버튼들 옆에 화살표는 이전, 다음 버튼으로 현재 슬라이드를 기준으로 이전 슬라이드나 다음 슬라이드로 이동시켜준다. 사실 동그라미 버튼 3개는 아래쪽에, 화살표 버튼은 슬라이드 양 끝에 넣고 싶었는데 position: absolute 도 z-index 를 이용해도 원하는 배치가 잘 나오지 않았고, 어찌어찌 나오면 반응형에서 예쁘게 배치되지 않았다. 그래도 굳이 만들려면 media query 를 사용해야 할 것 같은데... 다음번에 좀 더 공부해서 다시 도전해봐야 할 것 같다. 💜 HTML 💜 CSS .slide-container { .. 2022. 3. 5. [JavaScript / jQuery] 정규식으로 이메일, 비밀번호 검증하는 기능 만들기 💡 실습 포인트! 이번 실습에서는 정규식으로 이메일과 비밀번호를 검증하는 기능을 만들었는데 고려해야하는 것들이 생각보다 많았다. 입력한 아이디가 이메일 형식이 아닌데 전송을 누르면 "이메일 형식의 아이디가 아닙니다." 라는 문구의 경고창 띄우기 입력한 비밀번호가 8자리 미만이거나 16자리 초과라면 비밀번호 입력창 아래에 해당 경고 문구 띄우고 수정해서 변경되면 해당 상태에 맞는 경고 문구를 띄우거나 없애기 입력한 비밀번호 자리 수가 조건 범위(8~16자리)를 벗어난 상태에서 전송을 누르면 각 상태에 해당하는 문구의 경고창 띄우기 입력한 비밀번호 자리 수가 조건 범위(8~16자리)에 해당할지라도 특수문자와 숫자, 영문 조합이 아니라면 해당 내용을 담은 경고창 띄우기 모든 조건을 만족했을 때 전송완료페이지로.. 2022. 3. 5. [JavaScript / jQuery] setTimeout 타이머로 이벤트 배너 기능 만들기 💡 실습 포인트! 오늘은 setTimeout 과 setInterval 에 대해 공부하고, 간단하게나마 이벤트 배너를 만들어보았다. 이벤트 배너의 포인트는 카운트다운이 되는 것과 0초가 되는 동시에 배너가 사라지는 것!! 💜 HTML 🎁 5 초 이내 구매 시 사은품 증정! 🎁 일단 적절한 위치에 위와 같이 태그를 넣어주었다. 빠른 디자인을 위해 Bootstrap 을 활용했다. 초는 계속 바뀌게 만들 예정이었므로 내용을 가져오기 쉽게 span 태그로 묶어주었다. 💜 JavaScript var count = 5; setInterval(function(){ count -= 1; if (count > 0) { $('#time').html(count); } else { $('#time-alert').hide(); .. 2022. 3. 5. [JavaScript / jQuery] Dark Mode 와 Light Mode 전환 버튼 누르면 Mode 전환하는 기능 만들기 💡 실습 포인트! Light Mode 와 Dark Mode 를 전환하는 버튼을 만드는 수업을 들으면서, 버튼 안의 문구만 바뀌는 게 아니라 실제 홈페이지에서 배경과 글씨색이 바뀌게끔 만들어보고 싶어졌다. 일반적으로 Dark Mode 는 흰색 글씨와 검은 배경이 주를 이루는데 완전 검은 배경은 뭔가 이질감이 느껴져서 배경색은 검정보다는 살짝 밝은 색을, 글씨는 골드색상으로 만들었다. 💜 HTML 🌝 Dark Mode 🔄 일단 Bootstrap 을 이용해서 기본 레이아웃을 잡아주고 로고 아래에 들어갈 수 있도록 넣어주었다. 그리고 Dark Mode 문구와 함께 달 이모티콘을 넣어주었다. Light Mode 에서는 해 이모티콘이 나올 예정! 💜 CSS .dark { background: rgb(33, 37, .. 2022. 3. 4. 이전 1 2 다음
