web/vanilla javascript (4) 썸네일형 리스트형 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.. 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로 반환해줍니다. 빨간색 네모 그리기 웹에서 가로 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 다음
