본문 바로가기

[개발] Practice152

[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.
[JavaScript / jQuery] 모달창 내 비밀번호 조건 미달 경고 메시지 만들기 💡 실습 포인트! 비밀번호를 8자리 이상으로 설정하도록 유도하기 위해, 비밀번호 입력창이 공백이 아니고 8자리 미만으로 입력했을 경우 비밀번호 입력창 하단에 "비밀번호가 8자리 미만입니다." 라는 문구가 나타나도록 했다. 이 때 활용한 이벤트는 input 이벤트인데, 이번 수업에서 input 이벤트와 change 이벤트의 차이에 대해서 공부했다. 먼저, input 이벤트는 input 에 입력한 값이 바뀔 때마다 발생하는 이벤트이다. change 이벤트는 input 이벤트와 유사해보이지만 input 에 입력한 값이 바뀌고나서 포커스를 잃을 때에서야 비로소 발생하는 이벤트이다. 💜 HTML 비밀번호가 8자리 미만입니다. 일단 id 가 password 인 태그 아래에 위와 같이 경고 문구를 넣은 div 박스 .. 2022. 3. 4.
[JavaScript / jQuery] if 문을 활용하여 모달창 내 아이디, 비밀번호 공백검사 기능 만들기 💡 실습 포인트! 위 입력칸(아이디 입력칸)이 공백이면 "아이디를 입력하세요." 라는 내용이 뜨고, 다음 화면으로 넘어가지 못하게 했다. 아래 입력칸(비밀번호 입력칸)이 공백이면 "비밀번호를 입력하세요." 라는 내용이 뜨고 다음 화면으로 넘어가지 못하고, 비밀번호를 입력했을지라도 8자리 미만이면 "8자리 이상의 비밀번호를 입력하세요."라는 내용이 뜨고 다음 화면으로 넘어가지 못하게 했다. 만약 모든 아이디, 비밀번호 조건을 만족했다면 전송 버튼을 눌렀을 때, 전송 완료 페이지로 넘어갈 수 있게 했다. 💜 JavaScript $('#submit').eq(0).on('click', function(e){ if($('#email').val() == '') { e.preventDefault(); alert('아.. 2022. 3. 4.
[JavaScript / jQuery] jQuery 사용하여 모달창 만들기 💡 실습 포인트! 로그인 버튼을 누르면 아이디와 비밀번호를 넣을 수 있는 모달창이 서서히 뜨고 닫기 버튼을 누르면 모달창이 서서히 사라지게 했다. 💜 HTML 로그인하세요 전송 닫기 로그인 먼저 로그인 버튼과 로그인 버튼을 눌렀을 때 뜰 모달창 기본 레이아웃을 만들어준다. 모달창은 화면 전체를 덮어야 하므로 body 태그 중 제일 상단에 모달창 관련 html 이 위치해야 한다. 💜 CSS .black-bg { width: 100%; height: 100%; position: fixed; background: rgba(0, 0, 0, 0.6); z-index: 5; padding: 30px; visibility: hidden; /* 애니메이션 줄 때 display: none 대용, 없애는 게 아니라 모습만.. 2022. 3. 4.
[JavaScript / jQuery] classList 활용하여 서브메뉴 만들기 💡 실습 포인트! Navbar 의 버튼을 클릭하면 메뉴 리스트가 slideUp, slideDown 의 형태로 열고 닫히게 했다. 💜 HTML Navbar An item A second item A third item A fourth item And a fifth one 빠른 Navbar 레이아웃 디자인을 위해 Bootstrap 을 활용했다. Navbar 아래에 Navbar 의 메뉴 리스트가 될 레이아웃도 Bootstrap 에서 복사-붙여넣기 해주었다. 💜 CSS .list-group { display: none; } .show { display: block; } 기본 레이아웃이 준비되었다면, 우선 첫화면에서는 메뉴 리스트가 보여져서는 안되므로 display: none 처리를 해준다. 그리고 list-gr.. 2022. 3. 4.
[JavaScript / jQuery] Alert 박스 창 여닫기 및 창 내용 바꾸기 기능 만들기 💡 실습 포인트! 첫 화면에서는 버튼 1과 버튼 2만 보이고, 그 상태에서 버튼 1을 누르면 내용이 "아이디를 입력하세요." 인 알림창을 보이게 하고, 버튼 2를 누르면 "비밀번호를 입력하세요." 라는 알림창이 보이게 했다. 그리고 어느 창이 떠도 닫기 버튼을 클릭하면 알림창이 안 보이게끔 처리해주었다. 💜 HTML 과 CSS 일단 최종화면인 알림창과 버튼 1, 버튼 2가 나오도록 HTML, CSS 파일을 만든다. 우선 내용은 "아이디를 입력하세요." 와 "비밀번호를 입력하세요." 이 두 가지로만 전환되는 거라 공통되는 부분을 제외하고 "아이디", "비밀번호" 라는 문구만 바뀔 수 있게 이 부분만 id 를 title 로 부여했다. 첫 화면에서는 alert-box 가 보이지 않도록 display: none.. 2022. 3. 3.
[JavaScript / jQuery] 파라미터 활용하여 Alert 박스 창 여닫기 기능 만들기 💡 실습 포인트! 알림창 띄우기 버튼을 누르면 알림창 세 개를 띄우고 각 알림창의 X 버튼을 누르면 해당 알림창이 사라지도록 만들었다. 💜 HTML 과 CSS 알림창 띄우기 버튼을 클릭했을 때 상단에 알림창들이 뜨게 하려면 일단 html 과 CSS 를 먼저 작성해야 한다. X 모양 아이콘은 Font Awesome 을 활용하여 추가하였다. Holy guacamole! You should check in on some of those fields below. Holy guacamole! You should check in on some of those fields below. Holy guacamole! You should check in on some of those fields below. 알림창 띄우기.. 2022. 3. 3.
[HTML/CSS] 종이처럼 뒤집히는 프로필사진 만들기 💡 실습 포인트! 예전에 이력서를 포트폴리오로 만들어볼까라고 생각했을 때, 마우스오버를 하면 이미지가 뒤집히면서 글이 나오는...이런 기능을 원한 적이 있었는데 마침! 딱 배우게 되었다. 이미지가 뒤집혀도 앞면의 이미지가 뒷면에 비쳐보이고, 회전시켰을 때 글씨도 같이 회전되는 등 생각지도 못한 부분에서 난항을 겪었다. 제대로 사용하려면 생각보다 연습을 좀 많이 해야할 것 같다. 💜 HTML // 전체적인 틀 // 틀 내부(앞, 뒷면을 가짐) Front-end Developer Bak Seoyun 💜 CSS .flip-outer { width: 300px; height: 300px; } .flip-inner { width: 100%; height: 100%; position: relative; /* fro.. 2022. 3. 2.

티스토리툴바