내가 보려고 만든 블로그

input box를 쓰다보면 clear 버튼을 사용해야할 경우가 있다. 따로 만들어도 되지만, 길이 체크 및 focus 체크까지 할게 많은데, 기본기능에 있으면 기본을 사용하는게 더 효율적이기 때문에 찾아보았다! 우선 input type은 search 로 사용하면 자동으로 만들어지는데, 기본 디자인은 이쁘지 않아서 수정해야할 경우가 대다수이다! 그래서 사용할 css는 input[type=search]::-webkit-search-cancel-button{ background: #000; } 으로 원하는 대로 변경해서 사용하면 된다. * 지금은 잘 사용하지는 않지만, ie의 경우 input[type=search] input[type=search]::-ms-clear 로 적용하면 된다!*

수평 스크롤 만들려고 했는데, 수평스크롤이 아닌 아래로 내려갈때 해결방안!! ul{ display: flex; } li{ margin-left: 8px; width: 77px; height: 77px; -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; -ms-flex-negative: 0; flex-shrink: 0; max-width: 77px; }

html 에서 button css를 변경할때 기본 스타일 지우는 방법!! 항상 검색해서 찾아서 글작성! -webkit-appearance: none; -moz-appearance: none; appearance: none;

특이하게도 mobile에서 스크롤을 출력해달라는 요청을 받았다 그래서 찾아본 모바일에서도 스크롤 출력하기! ::-webkit-scrollbar { -webkit-appearance: none; } ::-webkit-scrollbar:vertical { width: 10px; } ::-webkit-scrollbar:horizontal { height: 10px; } ::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, .5); border-radius: 10px; border: 2px solid #ffffff; } ::-webkit-scrollbar-track { border-radius: 10px; background-color: #ffffff; }

@font-face { font-family: 'Noto Sans KR'; font-style: normal; font-weight: 100; src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff2) format('woff2'), url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff) format('woff'), url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.otf) format('opentype'); } @font-face { font-family: 'Noto Sans KR DemiLight'; font-style: norma..

const _vDate = new Date(new Date().getTime() + 5*60000) const _second = 1000 const _minute = _second * 60 const _hour = _minute * 60 const _day = _hour * 60 let timer const _this = this setInterval(() => { const now = new Date(); const distDt = _vDate - now if(distDt < 0){ clearInterval(timer) return ; } const days = Math.floor(distDt / _day) const hours = Math.floor((distDt % _day) / _hour) con..

input에서 날짜 입력하면 입력한 길이 계산해서 하이폰 추가하기! inputDate(event){ let date = event.target.value date = date.replace(/-/g,"") let tempDate = '' if(date.length < 5){ return tempDate = date }else if(date.length

전에 구글 애널리틱스 연동하는 방법을 포스팅했었다! 오늘은 페이스북!! 구글 애널리틱스 연동이 궁금하신분은 참고하시면될거같아요! 2020/11/18 - [WEB] - 구글 애널리틱스 시작하기(전자 상거래 이용 포함) 구글 애널리틱스 시작하기(전자 상거래 이용 포함) 오늘은 google analytics를 이용해볼거다! google ananlytics? 웹 사이트 트래픽을 추적하고 보고하는 google에서 제공하는 웹 분석 서비스로 마케팅을 하거나 상품을 판매하는 사람들에게 매우 유용한 플 become-a-developer.tistory.com Facebook Pixel? Facebook에서 게재한 광고에 대한 효과를 측정하고, 타겟을 분석하기 위해 웹사이트에 설치하는 추적 코드입니다. 구글 애널리틱스와 ..

오늘은 google analytics를 이용해볼거다! google ananlytics? 웹 사이트 트래픽을 추적하고 보고하는 google에서 제공하는 웹 분석 서비스로 마케팅을 하거나 상품을 판매하는 사람들에게 매우 유용한 플랫폼 말만 들었을때는 엄청 어려운거같지만 구글에서 잘 만들어놨기때문에 엄청 어렵지만은 않다. 먼저 내 사이트를 등록하자 기본 설정 설정>관리자>속성>데이터 스트림에 들어가서 스트림 추가를 눌러 추가할 수 있다. 나는 웹을 사용하기 때문에 웹을 선택했다. 웹사이트 url과 스트림 이름만 입력하고 스트림 만들기를 하면 생성이된다! 생성된 스트림을 누르면 스트림 상세페이지가 나오는데 하단에 있는 태그하기에 대한 안내, 새로운 온 페이지 태그 추가에서 전체 사이트 태그를 눌러 나오는 소스코..

ckeditor로 작성한 문서를 tag만 제거하고 출력하고싶을때 ?? 정규식으로 태그만 제거하자! text = text.replace(/ /ig, "\n"); text = text.replace(/]*)?(\s)*(\/)?>/ig, ""); text = text.replace(/(]+)>)/gi, ""); text = text.replace(/ /gi,""); console.dir(text) return text; 출처 구글선생님들 🙇🏻‍♀️