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 안주고 자식들에게..

.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인듯.

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

.instagram .box2{width: 200px; height: 50px; border: 2px solid brown; background-color: peru; line-height: 50px; padding: 0 10px; /* transition-duration: .5s; transition-property: all; transition-timing-function: ease; transition-delay: .2s; */ transition: width .5s ease, background .5s .9s; } .instagram .box2:hover{width: 250px; background-color: yellowgreen;} transition: width .5s ease, backgr..

보호되어 있는 글입니다.

.slide{width: calc(100% - 300px);} 연산식 중간에 떨어트리셈 100 - 300

vw 뷰포트 넓이기준 vh 뷰포트 높이 기준

console(`This is name? : ${변수이름}`); 1옆에 `

-1~ 999999(대단히 큰 수 까지) 그렇게 큰 수까지 쓸 일은 없겠지만..