목록분류 전체보기 (135)
100세까지 코딩
디지털 시계(Interval,CSS animation) 만들기
메인 화면 현재 시간 가져오기 - new Date() : 현재 날짜 및 시간 - getHours(), getMinutes(), getSeconds() : 시 분 초 가져오기 - setInterval(func, delay) : 타이머가 지정된 코드 실행 사이에 지연해야 하는 밀리초(1/1000초) 단위의 시간 const currentTime = () => { cur = setInterval(() => { let currentTime = new Date(); minute.innerHTML = (currentTime.getHours() < 10 ? "0" : "") + currentTime.getHours() + `  :`; second.innerHTML = ` ` + (currentTime.g..
기본 구조 제목 (Type: Subject) 본문 (Body) 꼬리말 (Footer) (생략 가능) Type Tag:(띄어쓰기) Subject ex) Feat: "추가 로그인 API " Feat: "Add login API" - Tag 종류 Tag Description Feat 새로운 기능을 추가하는 경우 Fix 버그를 고친 경우 Docs 문서를 수정한 경우 Style 코드 포맷 변경, 세미콜론 누락, 코드 수정이 없는 경우 Refactor 코드 리펙토링 Test 테스트 코드. 리펙토링 테스트 코드를 추가했을 때 Design CSS 등 사용자가 UI 디자인을 변경했을 때 Rename 파일명(or 폴더명) 을 수정한 경우 Remove 코드(파일) 의 삭제가 있을 때. "Clean", "Eliminate"도..
ToDoApp (JS 조작) 만들기
Todo 새로운 요소 추가하기 - addEventListener : 요소에 이벤트 추가 - 배열.unshift : 배열의 앞에 아이템 추가 - 요소.prepend : 요소안에 생성한 새로운 요소 앞에 추가 const list = document.getElementById("list"); const createBtn = document.getElementById("create-btn"); let todos = []; createBtn.addEventListener("click", createNewTodo); function createNewTodo() { const item = { id: new Date().getTime(), text: "", compelete: false }; todos.unshift(..
NETFLIX (애니메이션 효과) 사이트, 명함 카드 만들기
NETFLIX 사이트 애니메이션 효과 - transition : 애니메이션 속도를 조절 - transform : 요소를 회전하거나 확대 / 축소하거나 비트는 등 형태를 변형 scale : 확대 / 축소 rotate : 회전 translate : 이동 skew : 비틀기 .row_poster { width: 100%; object-fit: contain; max-height: 100px; margin-right: 10px; transition: transform 450ms; } .row_poster:hover { transform: scale(1.2); } row html NETFLIX ORIGINALS 실행 결과 GitHub GitHub - jeongdong99/NETFLIX Contribute to ..
유튜브 사이트 (사이드바) 만들기
화면에 고정하기 - position : fixed 브라우저의 전체 화면을 기준으로 고정 배치 top, left, bottom, right와 같은 offset 속성 사용 - z-index : 숫자가 높을 수록 가려지지 않고 앞으로 배치 .sidebar { position: fixed; left: 0; bottom: 0; top: 55px; background-color: #212121FF; width: 72px; z-index: 200; padding-top: 5px; } flex박스를 이용한 세로 가운데 정렬 - display : flex 복잡한 레이아웃을 간단하게 구현 가능 (요소 크기, 순서, 배치, 정렬, 분산 등) - flex-direction : column 주축을 세로로 row(default)..
인스타그램 사이트 (라이트, 다크모드) 만들기
사용자 지정 속성 - CSS를 작성하는 자가 정의하는 개체로, 문서 전반적으로 재사용할 임의의 값을 담는다. 사용자 지정 속성 정의 :root { --primary : #FFFFFF; --secondary : #FAFAFA; --border: #DBDBDB; --story-border: #c7c7c7; --text-dark: #262626; --text-light: #999999; } :root.darkTheme { --primary: #000000; --secondary: #050505; --border: #262626; --story-border: #707070; --text-dark: #FAFAFA; --text-light: #999999; } var()로 적용 .header_search input..