HTML (3) 썸네일형 리스트형 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.. 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 다음
