qwef

보호되어 있는 글입니다.

보호되어 있는 글입니다.

가로정렬 하는 법: float, inline-block, flex flex는 부모에다가 줌. 그냥 flex flex-inline 이거는 inline 속성, 그러니까 flex-inline끼리 가로로 쌓임. 그냥 flex는 블록속성, flex-inline은 인라인블록이라고 보면 됨. 이거는 즉 flex를 가진 것끼리의 관계임. flex미만이 아니라 부모가. flex-direction: colum flex-direction: colum-reverse flex-direction 기본값은 row임. row-reverse도 있음. flex-wrap: wrap 이거 해야 저거 세개 총 width보다 화면너비가 작아지면 저렇게 아래로 내려옴. 저거 width 주고 해본거. flex-wrap: wrap 안주고 자식들에게..

document.addEventListener('DOMContentLoaded',function(){ const ulList = this.createElement('ul'); let textArray = ['Home', 'About', 'Product', 'Contact Us']; textArray.map((list, index)=>{ ulList.innerHTML += `${list}` }); console.log(ulList); document.body.appendChild(ulList); }); createElement 해서 생성만 한다. .innerHTML, 즉 저 Element의 html태그 안쪽에 저것들을 넣는다. 저 .map(list, index)는 반복문이라고 보면 편함. index가 번호..

node.js nvm npm react, vue, svlet 등

.ani-wrap{position: relative;} .box{width: 100px; height: 100px; background-color: #ffae19; position: absolute; animation-name: animation1; animation-duration: 3s; animation-delay: 1s; animation-iteration-count: 3; animation-direction: alternate; animation-fill-mode: forwards; } @keyframes animation1 { from {left: 0;} to {left: 300px; background-color: pink;} } 0% 50% 100% 이런 식으로도 가능하다. name: 애니..

background: url(../img/1.jpg) no-repeat center / cover; 이렇게 하면 하나만 나오고, 저게 width: 100vh; height:100vh 상태로 들어가면 전체화면 이미지가 된다. 아이콘 같은 경우 before나 after에 저런 식으로 (아마 contain) 쓸 때가 있음. 아이콘 같은건 저런거나 span인듯.

const move = (e) => { divBox.style.left = `${e.clientX - offsetX}px`; divBox.style.top = `${e.clientY - offsetY}px`; } 보통 1회용으로 쓸 때 씀 let offsetX, offsetY; const move = (e) => { divBox.style.left = `${e.clientX - offsetX}px`; divBox.style.top = `${e.clientY - offsetY}px`; } divBox.addEventListener('mousedown', (e) => { offsetX = e.clientX - divBox.offsetLeft; offsetY = e.clientY - divBox.offsetT..

li:has(.demo) li 중 .demo를 가지고 있는 li를 선택 .login-cookie label:has(input[type=checkbox]){ }

img : 콘텐츠 관련 검색 노출, alt를 이용한 이미지 사용불가시 설명 가능. background-image: 콘텐츠 관련x