qwef

이거는 가상이라... 그러니까 HTML 문서를 참조한다기 보다는 가상의 주인태그를 참조함. 그래서 만약 width:100% 하면 이 가상선택자의 주인태그의 width를 참조함.

이거는 css의 attr() 함수인데, 자신의 속성의 값을 문자열로 가져오는 거다. a::after{content: attr(href);} 이렇게 하면 href에 있는 값을 content로써 넣는다. 속성명에 작은따옴표 X $$divs.forEach(($div, i)=>{ $div.setAttribute('data-list', '하이'); }); 이렇게 커스텀속성으로 응용도 가능. 근데 굳이 쓸 필요가 있을지는 모르겠다..

보호되어 있는 글입니다.

p{ overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 6; display: -webkit-box; -webkit-box-orient: vertical; } 세로 6줄까지 width 있어야 했던 걸로 앎.

https://gscode.in/css-cards/

https://gs.statcounter.com/screen-resolution-stats/desktop/worldwide Desktop Screen Resolution Stats Worldwide | Statcounter Global Stats This graph shows the stats of desktop screen resolutions worldwide based on over 5 billion monthly page views. gs.statcounter.com pc 크기 2023.09.05 현재 1920~ 1280 는 pc는 다 품음. 그러니까 inner를 1280 이하로 잡는 게 좋음. https://gs.statcounter.com/screen-resolution-stats/mobile..

@media screen and (orientation:landscape){ } @media screen and (orientation:portrait){ }

min 최소, 최소 이만큼 이상이면 바뀜 @media screen and (min-width:768px){ body{background-color: green;} } max 최대, 최대 이만큼 이하면 바뀜 @media screen and (max-width:768px){ body{background-color: aqua;} } min : 이상, 모바일 우선, 모바일 먼저 작업하고 커진걸 @media min-width에 씀 max : 제한, 데스크탑 우선, 데스크탑 먼저 작업하고 작아진 걸 @media max-width에 씀 @media (min-width:600px) and (max-width:767px) { } 600px 이상 767px 이하

뭐 -webkit- -moz- -ms- -o- 여러가지 브라우저에 대한 지원을 하게 자동으로 붙여주는 거다. 예를 들어 익스플로어에서 기본 display:flex; 가 안먹힐 때 display:-ms-flex; 이걸 같이 넣어두면 이 위걸 적용한다. 근데 우리가 모든 브라우저에 대해 저걸 일일히 써주기는 너무.. 힘빠진다. 이럴 때 자동으로 붙여주는 node.js 플러그인이 있다. 근데 굳이 벤터 프리픽스 붙이지 말고, https://poiemaweb.com/css3-vendor-prefix CSS3 Vendor Prefix | PoiemaWeb CSS3 표준으로 확정되기 이전 또는 브라우저 개발사가 실험적으로 제공하는 기능을 사용하기 위해서는 벤더 프리픽스를 사용하여야 한다. poiemaweb.com ..

https://cubic-bezier.com/#1,.22,.79,1.5 cubic-bezier.com cubic-bezier.com x축이 시간이고, y축이 애니메이션 목적지와의 거리. 범위에서 벗어나는 것도 가능. 근데 어차피 의도한 장소로 돌아오는거라 약간 진자운동 하듯이 옴.