web (6) 썸네일형 리스트형 javascript로 css의 @keyframes 애니메이션 만들기 HTML CODE // animate를 적용할 root element를 만듭니다. CSS CODE /* root element에 기본적인 style을 적용합니다. */ #root { width: 100px; height: 100px; background-color: #FF0000; } JAVASCRIPT CODE document.getElementById("root").animate( [ // key frames { transform: "translateY(0px)" }, { transform: "translateY(300px)" }, { transform: "translateY(0)" }, ], { // sync options duration: 1000, iterations: Infinity, } );.. javascript로 css의 가상요소 ::after ::before 바꾸기 HTML CODE JAVASCRIPT CODE// ::after를 입력할 style element를 만듭니다. let rootAfterStyle = document.createElement("style"); // 원하는 ::after style을 작용합니다. rootAfterStyle.innerHTML = `#root::after { content: ''; z-index: 3; height: 6px; }`; // tag에 넣습니다. document.head.appendChild(rootAfterStyle); // 이 후에 ::after style 수정이 가능합니다. rootAfterStyle.innerHTML = rootAfterStyle.innerHTML.replace( /height: [0-9]+px.. display flex의 flex-basis, flex-grow, flex-shrink flex-basis display: flex flex-basis: 200px css code .container { display: flex; } .item:nth-child(1) { flex-basis: 200px; } 특정한 item의 size를 지정할 때, 사용합니다. contaier의 가로 사이즈가 늘어나면, 오른쪽 여백이 남고, 줄어들면 첫 번째 item의 가로 사이즈가 유연하게 줄어듭니다. flex-grow display: flex flex-glow: 1 css code .item:nth-child(2) { flex-grow: 1; } 특정한 item의 size를 채울 때 사용합니다. contaier의 가로 사이즈가 늘어나면, 두번째 item의 가로 사이즈가 유연하게 늘어나고, 줄어듭니다. f.. js로 notch 찾기 css code :root { --sat: env(safe-area-inset-top); --sar: env(safe-area-inset-right); --sab: env(safe-area-inset-bottom); --sal: env(safe-area-inset-left); } javascript code getComputedStyle(document.documentElement).getPropertyValue("--sat") 위 code는 "px" string를 함께 반환합니다. parseInt(getComputedStyle(document.documentElement).getPropertyValue("--sat")) parseInt() 내부에 넣어주어야 number로 반환해줍니다. 1. webpack이란? 1. html, css, javascript로 작성한 front-end 환경을 보다 압축된 환경으로 bundling 해줍니다. 2. front-end에 최적화되어 있습니다. 3. 각기 다른 환경(ex. vanilla js, vue, react)에서 작업한 front-end 환경을 하나의 동일한 output으로 변환해 줍니다. 4. gulp라는 단일화된 환경이 있다면, webpack은 workflow를 변경할 수 있는 다양한 option들을 제공합니다. 5. 그만큼 러닝커브 및 초기 진입이 어렵습니다. 매우 다양한 option들을 제공하며, 그에 따른 side effect가 발생합니다. gulp와 차이 1. gulp가 작업 중 편리한 환경을 위한다면, webpack은 작업 완료 후, 번들링에 중점을 두고 .. 빨간색 네모 그리기 웹에서 가로 100px, 세로 100px 빨간색 네모를 그리는 방법입니다. html 영역 style 영역 html, body { position: relative; width: 100%; height: 100%; overflow: hidden; } .wrap { position: relative; width: 100%; height: 100%; } .wrap .nemo { position: absolute; width: 100px; height: 100px; left: 50%; top: 50%; margin: -50px 0 0 -50px; background-color: #FF0000; } 전체 코드 index.html 1. 위의 index.html 코드를 복사합니다. 2. 메모장에 붙여넣기 합니다. 3.. 이전 1 다음
