본문 바로가기

분류 전체보기321

KDT 5th 웹개발자 입문 수업 21일차 - 2 뮤직 플레이어 마무리 https://funny-sawine-0efe56.netlify.app/ 뮤직 플레이어 Lorem ipsum dolor sit amet consectetur. funny-sawine-0efe56.netlify.app 패널을 전체적으로 이용할 줄 알아야 한다. for(let i = 0; i < len; i++) { articleList[i].style.transform = `rotate(${deg * i}deg) translateY(-100vh)`; //사진 일괄 적용 const pic = articleList[i].querySelector('.pic'); pic.style.backgroundImage = `url("./source/img/${names[i]}.jpg")`; //음악 .. 2023. 2. 23.
KDT 5th 웹개발자 입문 수업 21일차 - 1 gitignore scss 작업을 할 때 .map 파일은 윈도우(CR, LF)냐 맥(LF)이냐에 따라 줄 띄어쓰기 기호가 다르기 때문에 협업할 때 오류가 많이 발생하게 된다. 이 경우 오류를 피하기 위해 사용하는 것이 .git 파일이 들어있는 장소에 .gitignore 파일을 만들어 미리 지정해줄 수 있다. gitignore 가 적용된 파일은 VSCode 상 파일 탐색기 부분에 회색으로 처리되어 확인이 가능하다. ## .gitignore 파일에서 작성 # 특정 확장자를 가진 모든 파일을 무시하고 싶을 때 *.map # 특정 파일하나만 무시하고 싶을 때 fileName.html # 특정 디렉터리의 특정 파일을 무시하고 싶을 때 directoryName/fileName.html # 특정 디렉터리의 모든 파일.. 2023. 2. 23.
바닐라 JS 크롬 앱 만들기 (5) clock 만들기 1. setInterval(콜백함수, ms시간) 콜백함수를 시간 간격으로 반복해서 호출해준다 2. setTimeout(콜백함수, ms시간) 콜백함수를 일정 시간 이후 호출해준다 (반복x) 3. Date 클래스 3-1. new Date() : 현재 날짜~시간 정보를 가지고 있다. 3-2. new Date().getDate() : 현재 날짜 3-3. new Date().getDay() : 현재 요일 3-4. new Date().getHours() : 현재 시각 3-5. new Date().getMinutes() : 현재 분 3-6. new Date().getSeconds() : 현재 초 3-7. new Date().getFullYear() : 현재 년도 -> getYear() 아님!! ne.. 2023. 2. 23.
바닐라 JS 크롬 앱 만들기 (4) - 2 1. localStorage 브라우저에게 무언가를 저장할 수 있게 해주는 공간 개발자 도구 > Application > localStorage 에 존재 아이템 저장 window.localStorage.setItem('key', 'value') 아이템 키로 값 불러오기 window.localStorage.getItem('key') 키가 없는 경우 null 리턴 즉 유효성 검사를 하려면 getItem('key')가 null 인지 아닌지로! 아이템 키로 삭제 window.localStorage.removeItem('key') input 으로 유저 정보를 submit 으로 입력 받아 -> 브라우저에 임시로 저장해두고 -> 그 저장된 값을 키로 확인하여 -> h1 태그로 띄우기 const loginForm = d.. 2023. 2. 22.

티스토리툴바