학원에서 배운 것/JavaScript19 스케쥴러 HTML, CSS, JS 구현 수업 시간에 JS 구현을 위해 만들었던 스케쥴러를 좀더 보완하여 만들어보았다. 기존 과 을 사용하던 HTML을 ul과 li, display flex로 만들었다. CSS 상 약간의 디자인을 주었다. 특히 버튼의 경우, 코드펜에 올라온 것을 보고 사용..해보려고 했다. 내용이 길거나 스케쥴이 여러개면 디자인 요소를 해치므로 overflow hidden 처리 했다. JS 기능은 수업 때 배운 것과 동일하게 날짜칸을 누르면 날짜 인풋에 날짜가 들어가게 (달력 부분에 입력을 받지만 요일 한자는 해당 사항 없게끔) 날짜가 들어간 상태에서 스케쥴을 입력하고 추가버튼을 누르면 해당 날짜 아래에 스케쥴이 추가되게 추가된 스케쥴은 e.target으로 접근하여 누르면 삭제되게 수업 때와 동일한 기능이지만 HTML 구조가 완.. 2023. 2. 18. KDT 5th 웹개발자 입문 수업 17일차 사칙 연산 -> 문자열 -> 배열 -> 알고리즘 코테 대비 1. 문자열 관련 JS 기능 문자열이란, 단어가 나열된 배열과 같다! 하지만 문자열에 배열과 관련된 내장 메서드를 기본적으로는 사용할 순 없다. 1-1. .length : 문자열 길이 1-2. 문자를 찾을 문자열.indexOf('찾을 문자열') : 문자열의 위치 찾기 문자를 발견하면 그 인덱스(0~)를 반환하지만 만약 문자열을 찾지 못하면 -1을 반환한다 1-3. 문자열.slice(시작인덱스, 끝인덱스) : 문자열 자르기 시작인덱스부터 끝인덱스의 -1의 문자열까지 새로운 문자열이 반환된다. 원본 문자열은 변경되지 않음!! 1-4. 문자열.replace('찾을문자', '바꿀문자') : 문자열 바꾸기 원본 문자열은 바뀌지 않은채(그대로) / 문자열을.. 2023. 2. 17. KDT 5th 웹개발자 입문 수업 16일차 1. Swiper 사용법 1. 가장 상단 부모는 swiper 클래스 2. 그 다음 은 swiper-wrapper 클래스로 묶어줘야 한다. 3. 슬라이드가 될 컨텐츠는 swiper-slide 클래스 안에 담아주고, 이는 자동으로 position absolute가 됨 즉, div.swiper > div.swiper-wrapper > div.swiper-slide 가 기본이다 HTML 구조로 일단 담아주고 CSS로 디자인 요소를 잡아준 다음 JS 기능을 넣어주는 순서로 작업해준다. HTML 에 추가로 넣어줄 수 있는 요소들 슬라이드 버튼은 swiper-button-prev / swiper-button-next 슬라이드 페이지 위치 swiper-pagnation swiper-scrollbar JS에서 new S.. 2023. 2. 16. 지금까지 배운 것을 바탕으로 To do List 구현 지금까진 강사님이 주신 레퍼런스를 바탕으로 JS 기능을 구현했었는데, 이번 기회에 시간을 내서 HTML과 CSS, JS까지 모두 혼자 구현해보기로 하였다. 부트스트랩을 쓰는게 훨씬 예쁘기는 하겠다만 ... 디자인을 최대한 노력해보며(?) 사실 색 지정이 제일 어려웠다. 이렇게 무식하게 하다보면 언젠가 실력이 늘겠지! 1. HTML To Do List 추가 header를 굳이 나눌 필요는 없어보여서 한 section으로 만들고자 했다. 간단하게 제목 부분 입력 받는 부분 리스트가 추가되는 부분 이렇게 3부분으로 나눠줬다. 여기에 CSS를 입혀준다. 2. CSS section { width: 100vw; } section .inner { box-sizing: border-box; margin: auto; p.. 2023. 2. 16. 이전 1 2 3 4 5 다음
