분류 전체보기 (59) 썸네일형 리스트형 OTT풍 배경화면 애니메이션 원래는 예고편 감상 버튼을 누르면 팝업 비디오가 뜨는 OTT풍 웹 사이트를 디자인 및 개발 중이었는데 욕심이 생겨 배경 이미지가 시간에 따라 변경되며 움직이는 자바스크립트 소스를 짰다. (디자인) 피그마 파일 https://www.figma.com/file/w3InywIpC2MNjVbF1b2Pdb/Untitled?node-id=0%3A1 자바스크립트 소스 function randomBackground() { let random = Math.floor(Math.random() * 6); let backgroundImg = ['url("images/bg01.jpeg")', 'url("images/bg02.jpeg")', 'url("images/bg03.jpeg")', 'url("images/bg04.jpeg.. 공부할 언어 현재 바닐라 JS로 코드 짜는 중 Three.js Tailwindcss 인터랙티브 웹 제작 공부하면서 헷갈렸던 구문 1. JavaScript를 이용해 숫자 증감하기 연산자를 이용해 변수를 증감할 수 있다. i++ // 는 i = i + 1 // 과 같다 i-- // 는 i = i - 1 // 과 같다 2. 증감 덧셈을 이용한 복합 할당 myVar = myVar + 5; let myVar = 1; myVar += 5; // 6 let a = 3; let b = 17; let c = 12; // Only change code below this line a += 12; // a = a + 12; b += 9; // b = 9 + b; c += 7; // c = c + 7; // 증강 뺄셈은 -= // 증강 곱셈은 *= // 증강 나눗셈 /= 3. if/else 문과 switch 문 function chainToSwitch.. Color Changer rgb(255, 255, 255) Click @import url("https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"); @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;500&display=swap'); body { width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; flex-flow: column; letter-spacing: -1px; } h1 { font-family: 'Poppins', sans-serif; font-weight: 500;.. pokemon demo loop를 이용해 많은 샘플을 만들고 동적으로 이미지를 제어할 수 있다. Look at my pokemon .pokemon {display: inline-block; text-align: center;} .pokemon img {display: block;} // http://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/1.png const container = document.querySelector('#container'); const baseURL = 'http://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/' for(let i = 1; i < 899; i.. 7시간 짜리 코드 const n = 'new'; const l = 'list'; const c = 'clear'; const q = 'quit'; const toDoLists = []; let command = prompt("오늘 무슨 일을 시작할 건가요?") while (command !== q) { if (command === q) { break; } else if (command === n) { let toDo = prompt("새로운 리스트를 추가하세요."); toDoLists.push(toDo); } else if (command === l) { for(let i = 0; i < toDoLists.length; i++) { console.log(`${i}: ${toDoLists[i]}`); } } else if .. [HTML, CSS] border 속성을 사용하지 않은 border 만들기 border 속성을 이용해 테두리를 만들면 컨테이너마다 동일한 값이 적용된다. 그런데 컨테이너가 서로 인접한 경우 border 굵기가 달라지는 불상사가 생긴다. DIV1 DIV2 그럼 border-left, right, top, bottom 속성을 이용해 일일히 값을 줄 수 있지 않을까? DIV1 DIV2 물론 간단한 구조라면 이 방법이 편하겠지만 복잡한 구조를 지닌 레이아웃이라면? 인접한 선의 위치를 하나하나 계산해서 border를 삭제하는 작업이 상당히 비효율적이라는 생각이 들것이다. 결과물 위 결과물에서 border 속성은 일절 사용하지 않았다. 그렇다면 저 주황색 테두리는 뭘까? header의 구조는 아래와 같다. Best Curry in Seoul and Great Value! If you a.. 미친... 배움에는 끝이 없다... 이렇게 사도 20만원이 채 안된다는 게 함정 웹 디벨로퍼 부트캠프 대신 같은 강사의 자바스크립트 부트캠프를 듣고 싶었는데 한글자막이 없어 수강하지 못한다. 영어공부도 해야할 것을 절실히 느꼈다. 아쉽지만 백엔드 부분을 가볍게 공부한다는 생각을 해야겠다. 또한 블로그 업데이트가 좀 늦어질 지도 모르겠다. 유데미로 공부하다 보면 이러한 서비스를 제공하고 있기 때문에 이전 1 2 3 4 5 ··· 8 다음
