글
[CSS] dimmed 왼쪽에 1px 라인이 보일때
- 증상 & ::before { @include absolute-full ; z-index : 5 ; height : 100% ; background-color : rgba ( 0 , 0 , 0 , .5 ); content : '' ; } - 해결 ::before는 삭제 하고 해당 엘리먼트에 filter로 추가 filter : brightness ( 50% ); 원인은 아직도 모르겠음...=ㅁ=);
[CSS] 모바일 모드 :hover 대응
마우스의 hover가 모바일 모드에서는 터치로 인해 적용되서 남는 현상 https://url.kr/dxjguw See the Pen css hover with media query by ykwan0714 ( @ykwan0714 ) on CodePen .
console.log 에 style 적용하기
기획팀과 협의 해볼까나... - 출처 https://heeya7.tistory.com/7 개발자 도구를 열어 작업을 할 때, 우리는 종종 style 이 입혀진 console.log 를 발견할 수 있다. 예를 들자면 쿠팡이나 티스토리가 있을 수 있겠다. (괜히 이쁘고 부러움) 퍼블리셔로서 스타일이 입혀진 콘솔로그를 지나칠 수가 없지. 오늘은 console.log 에 style 입히는 방법을 알아보려 한다. 아주 간단하다. 메시지에 %c 플래그(flag)만 추가해주고, 원하는 스타일을 입력하면 끝. 참 쉽죠? 간단하게 예를들어, console . log ( '%c Welcome!' , 'background-color:green; color:#ffffff;' ) ; 결과물은 이렇다. 이렇게 하면? console . log (' %c You are so %c attractive ' , 'background-color:#000000; color:#ffffff; font-size:23px;' , 'background-color:red; color:#ffffff; font-size:23px;' ) ; 요렇게 나오고! 조금 더 꾸며볼까? var style = [ 'padding : 30px 20px' , 'margin : 20px 0' , 'background : linear-gradient(#98004C, #FFE8F3)' , 'font-size : 25px' , 'font-weight : bold' , 'text-align : center' ,
Swiper lazyLoading
최신 버전 Swiper lazy Loading는 지금 사이트에서 보면 된다. https://idangero.us/swiper/api/ 하지만 구버전 일단 지금 사이트에서 사용하고 있는 버전이 3.4.0버전인데 옵션들이 좀 많이 달라서 검색에 애를 먹고 있다. 결과적으로 찾고 찾아서 lazyLoading: true, lazyLoadingInPrevNext: true, watchSlidesProgress: true, watchSlidesVisibility: true 이렇게 사용하면 됨. 구 버전 API만 모아놓은데 어디 없으려나... 더 찾아 볼걸 여기에 있구나 https://github.com/nolimits4web/Swiper/blob/Swiper3/API.md