TIL LIST (39) 썸네일형 리스트형 WebFlow는 디자인 툴에 가깝구나, 그렇구나... 빌드한 것 : https://hollosal-e.webflow.io/ hollosal-e 냉장고 파먹기 본인의 냉장고에 있는 당장 써야하는 재료를 체크해주시면 만들 수 있는 음식을 추천합니다 Ctrl + F 로 검색하면 더 빠르게 검색할 수 있어요! hollosal-e.webflow.io 만들고 싶었던 것 : Figma 파일에서 보다시피 두부, 배추김치, 고춧가루 를 서버로 전달하면 그 재료에 라벨링된 데이터가 불러들여지는 형식을 고안하고 있었다. (모바일 최적화는 안됐지만) 어느정도 퍼블리싱이 끝난것 같아 백 연결을 하기 위해 이것저것 눌러보는데 인터그레이팅할 수 있는 걸 찾을 수가 없다....!!!!!1 서칭하니 웹플로우는 디자인툴에 가깝다는 것 그러고보니 이런 서비스 만드는 건 Bubble을 추천한.. 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.. 공부하면서 헷갈렸던 구문 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.. [Udemy] 가격표 페이지 만들기 https://smthousand.github.io/2022_practice/03_pricing-table/ 미디어 쿼리를 이용해 모바일, PC 디바이스에서 다르게 출력되도록 작업했다. 원래 PC 먼저 작업하고 모바일을 작업하는 편인데, 현업에선 모바일 디바이스 먼저 작업하는 일이 잦아 순서를 바꿔보았다. 모바일 디바이스 먼저 작업하게 되면 미디어 쿼리는 어떻게 작업해야 할까? 1분 코딩님의 게시글에 따르면 min-width를 사용해야 한다고 한다. min-width 는 최소 px 이상인 경우에 적용되는 코드다, 즉 min-width: 1600px 이라면 1600px 이상일 경우 적용된다는 소리다. @media (min-width: 1600px) { .panel { width: 60vw; } } 모바일 .. 이전 1 2 3 4 5 다음
