본문 바로가기

학원에서 배운 것85

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.
KDT 5th 웹개발자 입문 수업 15일차 1. todo 리스트 해설 createElement() -> setAttribute() -> onclick or addEventListener -> appendChild 순서로 만들어서 붙여주는 형식으로 수행 1-1. input 필드의 값은 value에 들어간다. 그러므로 입력 받은 값을 value로 읽어올 수 있다. 1-2. 체크박스의 체크됨을 확인하기 위해선 checked 프로퍼티로 boolean 확인 1-3. DOM요소에 style 프로퍼티로 직접 접근이 가능하며, 스타일 속성명의 경우 카멜형식(text-decoration -> textDecoration) 으로 접근할 수 있다 1-4. addEventListener 와 onclick 이벤트가 일어나는 대상을 접근하는 방법 addEventListen.. 2023. 2. 15.

티스토리툴바