본문 바로가기

HMWK122

[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.
[HTML/CSS] Admin Page 만들기 💡 실습 포인트! 이전에 공부한 애니메이션 효과, Font Awesome, Bootstrap 까지 활용하여 Admin Page 레이아웃을 만들어보았다. 아직 애니메이션 효과에 대한 이해가 부족한지 사이드바에 애니메이션 효과를 넣을 때 상당히 헤맸다.. Tasks 리스트 목록에서도 원하는 레이아웃이 나오지 않아 30분 정도 이것저것 해보면서 고민을 했다. 더불어 오늘은 Chart.js 라이브러리를 사용하는 방법을 조금이나마 공부해보았다. 다음번에 차트를 넣어야 하는 프로젝트가 있으면 한 번 적용해봐도 재미있을 것 같다. 💜 PC 화면 💜 모바일 화면 💜 공부가 좀 더 필요한 Sidebar Home History .sidebar { width: 150px; height: 100vh; background: #.. 2022. 3. 2.
[HTML/CSS] position: sticky 활용하기 💡 실습 포인트! position: sticky 속성을 활용하여 우측의 이미지는 위치가 고정되고 좌측의 텍스트만 스크롤하면 움직이도록 만들어보았다. 반응형으로 만들면 세로로 1열이 되어 크게 의미가 없을 것 같아서 순수하게 PC 화면용으로 만들고 반응형은 따로 고려하지 않았다. 💜 HTML image div 태그는 우측에, text div 태그는 좌측에 배치할 예정이며 편하게 보기 위해 image div 태그를 상단에 적었다. (순서를 바꾸어적어도 float 를 이용해서 위치 지정이 가능했다.) float 속성을 이용했으니 중간중간에 div 태그를 만들어 clear : both 속성을 넣어주는 것도 까먹지 말기! Lorem ipsum dolor sit amet consectetur, adipisicing.. 2022. 3. 2.

티스토리툴바