끄적대기

기획팀과 협의 해볼까나... - 출처  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' ,   

https://www.jqueryscript.net/tags.php?/Range%20Slider/ 재미있는거 많네...

최신 버전 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

- 한줄 overflow:hidden;width:100px;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal; - 두줄  overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-wrap:break-word;line-height:14px;max-height:28px; 외우기는 귀찮...

iOS는 링크, form영역에 터치(텝)을 하면 하이라이트 영역이라고 회색 영역이 생긴다. 드레그나 누르고 있을때도 생긴다.  왠만한 영역들에는 모두 생기는데 안 생기는 영역도 있는 것 같다. 정확한 가이드는 나도 모르겠다. 하지만 이걸 제거해야 할 일이 생겼다. stackoverflow에서 검색을 해보니 외국은 접근성이다 더 이쁜색으로 꾸밀거다....이러고 있는데 우리는 삭제를 해야한다... 방법은 간단하다. 아마 검색을 통해서도 많이 아래 코드를 봤을 것이다. -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: transparent;/*Android*/  그런데 이 코드를 부모 태그에 적용을 하면 하위에 있는 선택요소(링크, button, etc...) 또한 하이라이트가 사라지게 되니 개별적으로 초기화를 해줘야 하는데 선택자{-webkit-tap-highlight-color:rgba(0, 0, 0, 0.3);} 그냥 색상값에 투명도를 주면 된다...그런데 이건 iOS만 적용 된다.  아래 안드로이드를 추가하자... 선택자:active{background-color:rgba(0, 0, 0, 0.3);}/* Android */  가급적이면 이런 작업은 하지말자... 접근성에도 안좋고....의미도 없고....