본문 바로가기

각선미13

jquery hover function 사용 예 제이쿼리 이벤트 중에서 꽤 흔하게 사용되는 이벤트 메소드가 바로 hover다. 특정 엘러먼트 위에 마우스가 위치하거나 벗어났을 때의 이벤트를 정의한다. 자바스크립트의 mouseenter, mouserover를 한 번에 제어할 수 있다. CSS의 :hover 선택자를 이용한 것과 같은 이벤트를 타기 때문에, 키보드로 앵커에 위치했을 때는 동작하지 않는다. jquery hover function 사용 예 $(document).ready(function(){ //2depth menu showing when menu is collapsed var hoverMenu = $('.lnb .lnb1depth >li'); hoverMenu.hover( function () { var menuInitH = $('#menu.. 2021. 1. 18.
부트스트랩 날짜선택 폼 bootstrap 4.3 datepicker 부트스트랩을 사용하면 여러 편리함이 있는데 그중에서도 드롭다운, 데이터 피커 같은 것을 쓰기가 굉장히 쉽다. 그런데 부트스트랩 4.3으로 업그레이드를 하면, 기존에 부트스트랩으로 작성했던 스타일이 흐트러진다. 그중에서도 특히 datepicker는 최악이다. 또한 부트스트랩 4.3에서는 더 이상 글리피콘을 지원하지 않는다. 글리피콘이 유료화된 탓이다. 기존의 부트스트랩 데이터 피커를 그대로 사용했다면, 클래스 명을 변경해 주고 글리피콘 대신 :before 선택자로 이미지 캘린더를 달아 주면 된다. 꽤 비슷한 화면이 나왔다. html markup은 다음과 같다. - 달라진 점은 input-group-addon 대신에 input-group-append을 사용했다. 또한 캘린더 아이콘이 뿌려지던 태그에서 글리 .. 2021. 1. 16.
nginx woff mime type error 설정 해결 방법 Unexpected character in input: 에러 nginx woff mime type error 설정 해결 방법 Unexpected character in input: 에러 2019/07/25 15:19:07 [error] 25892#24016: *313 FastCGI sent in stderr: "PHP Warning: Unexpected character in input: ' ' (ASCII=11) state=0 in C:\work\cj_003\dcms-ui\assets\fonts\glyphicons-halflings-regular.woff2 on line 100 PHP Warning: Unexpected character in input: '' (ASCII=16) state=0 in C:\work\cj_003\dcms-ui\assets\font.. 2021. 1. 14.
CSS 선택자 (selector)의 정의와 사용법 CSS를 다루는 데 있어서 가장 기초적이고 기본적이고 핵심 적인 것이 바로 CSS 선택자의 활용이죠. CSS의 선택자 문법은 다음과 같죠. 선택자 { 속성:값} /*example*/ select {position:absolute} #selector { position:absolute; } .selector { postition:absolute; } 이런 선택자는 우리가 CSS의 스타일을 적용하고 싶은 특정 대상을 제한하고 지정하는 것을 지칭하는 것이죠. 쉽게 생각하면 타깃이라고 여겨도 무방합니다. 위에서 예를 든 선택자 3종에 대해서 일단 알아보죠. 요소 선택자 (type Selector) 아무런 기호가 없이 오는 단어는 html 태그의 Element요소입니다. a, p, div, table, li, u.. 2021. 1. 13.
bootstrap4 datepicker tempusdominus style css 수정을 위한 달력 element dom class bootstrap4 datepicker tempusdominus style css 수정을 위한 달력 element dom class 부트스트랩 4에서는 기존의 datepicker가 작동하지 않는다. 그렇다고 bootstrap을 마이너그레이션을 하기도 애매하다. 부트스트랩 4에 적용이 가능한 데이트 피커는 tempusdominus가 거의 유일하다. 좀 더 커스터마이징을 하려면 필스 라이브러리인 moments.js도 건드려야 하지만, 일단은 tempusdominus가 그리는 calendar의 class와 html element 구조만 알아도 대략적인 스타일링은 가능하다. 하지만 유감스럽게도 데이터피커를 멈추고 돔을 탐색하기가 쉽지 않다. 시간이 없어서 일단 그냥 tempusdominus datepicker .. 2021. 1. 11.
php $_SERVER (서버함수) 예제 php뿐만 아니라 웹프로그래밍을 하다보면 서버환경이나 사용자의 사용환경 정보를 서버사이드에서 수집할 필요가 있을 때가 있다. php에서도 당연히 서버환경이나 사용자환경 예컨데 접속자의 아이피주소라든지, 자바스크립트의 USER_Agent와 같은 정보들을 수집할 수 있는 함수들이 마련되어 있다. 이를 통칭해서 서버함수라 칭하고 php에서는 $_SERVER의 배열 형태로 쓸 수 있다. 사용 예제들은 다음과 같다. 실제 동작 데모페이지는 이 곳을 클릭. 2020년 공무원 봉급표 2020년 공무원 봉급표, 소방 경찰 공무원 봉급표 2021 교사 호봉표 간부 2020 직업 군인 월급, 2021년 공무원 봉급 인상률 cafe75.kr $_SERVER['DOCUMENT_ROOT'] = 사이트가 현재 위치한 서버상의 폴.. 2020. 12. 31.
1-2 블로그 어디에 만들 것인가? 1-2 블로그 어디에 만들 것인가? it강국인 대한민국에서 블로그를 만드는 것은 인터넷 홈페이지 가입하는 것만큼이나 쉽다. 하지만 전략적으로 어떤 블로그 서비스를 이용할 것인지는 상당히 깊게 고려해 봐야 할 문제다. 현재 우리나라에서 사람들이 가장 많이 이용하는 블로그 서비스는 네이버 블로그 서비스다. 그다음은 카카오의 티스토리 블로그 서비스다. 이 2개 회사의 서비스를 가장 많이 이용하지만 단지 이 2개의 회사에서만 블로그 서비스를 제공하는 것은 아니다. 카카오 다음 블로그, zum 이글루 블로그, 구글 블로거(blogger 혹은 blogspot), 그리고 뜻밖의 중앙일보 조인스 블로그 서비스, 워드프레스 닷컴에서 회원 가입 후 블로그 서비스를 이용할 수 있다. 이들 서비스는 회원 가입만으로 블로그를 .. 2020. 12. 30.
애드센스 가치 있는 인벤토리: 콘텐츠 없음 경고 원인과 해결 방법 애드센스 가치 있는 인벤토리: 콘텐츠 없음 경고 원인과 해결 방법 애드센스 단톡 방에서 나온 주제입니다. 콘텐츠 없음 경고에 대한 해결방법입니다. A. 성적인 내용으로 경고를 받으면 해당 페이지 광고를 빼거나 성적인 내용을 수정해야 합니다. 콘텐츠 자체를 삭제했을 때 해당 페이지에서 콘텐츠가 없는데도 스킨 자체에 광고가 박혀 있는 상태로 노출되는 경우 콘텐츠 없음 경고를 받게 됩니다. 대체로 사이드바나 헤더나 푸터에 고정 광고가 들어 있게 스킨을 튜닝한 분들이 이 경고를 받습니다. 구글 정책은 노컨텐츠 노애드입니다. 오류 페이지에도 광고 게재를 금지하고 있습니다만, 티스토리의 경우 포스팅을 삭제해도 페이지 주소는 뜨면서 404 Error를 출력하지 않기 때문에 구글은 가치 있는 인벤토리 정책 위반으로 처.. 2020. 12. 21.
티스토리 반응형 스킨 Square 모바일 CSS수정 구글 Adsense광고 영역 확보. 구글의 광고 정책은 가끔 자의적으로 해석되는 것처럼 보일 때가 있다. 명확하게 규정을 정해 놓지 않고 case by case로 상황을 보고 판단해서 결정되는 정책이 제법 많다. 유연함으로 볼 수도 있지만, 제멋대로라고 보일 때도 많다. 특히 모바일에서의 광고 크기 문제가 그렇다. 사실 모바일 디바이스의 해상도는 계속 증가하고 있는 추세다. 물리적인 크기마저도 커져가는 추세인데, 구글은 모바일 홈페이지의 상단 광고를 320X50 사이즈 광고와 320x100 광고는 일단 OK고, 200x200, 250x250, 300x250 광고에 대해서는 사이트의 상황에 따라서 달리 해석을 내리고 있다. 이때 구글이 중요하게 보는 관점은 "콘텐츠가 없이 광고만 노출되는가?" "콘텐츠를 더 보기 위해서 스크롤을 할 때 광고.. 2020. 12. 20.
티스토리 EGG스킨 발행날짜 변경 jquery 자바스크립트 .text(); 티스토리 EGG스킨 발행 날짜 변경 jquery 자바스크립트 왜 때문에 무엇 때문에 바꿔야 할지는 바꾸고 싶은 사람만이 알 것이지만... 나는 개인적으로 검색 결과에서 누락된 블로그의 과거에 발행했던 글이 아까워서 새로 블로그를 만들어 옮길 때가 많다. 그런데, 도저히 시점상 몇 년 된 글을 최신 글인 것처럼 올리기는 양심에 거리끼기도 한다. 검색엔진에서 최신 글로 검색이 되는 것 까지야 어쩔 수 없지만, 최소한 내 글을 볼 때는 이 글이 어 좀 오래된 글이네? 하는 정도는 알려줘야 한다고 생각되어서 이 스크립트를 종종 쓰곤 한다. 원리는 간단하다. jquery의 $('selector'). text(); 를 이용하는 방법이다. 글 중에 특정 날짜를 주고 특정 클래스를 부여한다. 클래스를 주기 싫다면, 유.. 2020. 11. 23.
[반응형 웹 기초] @media screen and (max-width:620px) and (min-width:300px) 반응형 웹의 기초 @media screen and (max-width:620px) and (min-width:300px) 반응형 웹에 대해 두려움을 갖고 있는 퍼블리셔들이 제법 많다. 사실 알고 보면 별거 아니다. 가로폭에 대한 시나리오대로 CSS를 적용해주면 90%(?)는 끝난 게임이다. 물론 그 과정은 코딩답게 노가다이긴 하다. 같은 스타일에 대해 2번 이상을 기술해줘야 하는 작업이니까 말이다. 나머지 10%는? 반응형웹을 원하는 클라이언트의 기발하고도 창의적이면서 가학적인 눈높이에 맞춰주기 위해서는 단지 CSS의 @media screen 만으로는 해결되지 않는 난제들이 튀어나올 때가 있다. 그럴 땐 하는 수 없이 jQuery의 도움을 받아야 한다. 하지만 왠만하면 @media screen으로 대부분.. 2020. 11. 22.
티스토리 새에디터 코드 하이라이트 스타일 적용 cdn 티스토리 새 에디터 코드 하이라이트 스타일 적용 cdn 옛날에는 일일이 js파일과 css파일을 다운로드하여서 업로드하고 링크 걸어주고 했어야 했다. 요즘은 cdn이라는 좋은 서비스가 있어서 다행이다. cloudflare가 망하지 않는다면 말이지... 티스토리 새 에디터에 코드 삽입 기능이 생겨서 더 편해지긴 했는데, 글 작성 때는 예쁘게 보이지만, 막상 발행을 하고 나면 스타일이 안 먹힌다. 에디터 작성 중 코드 스타일. 티스토리 직원들은 가끔 이렇게 일을 하다가 만다. 발행 후 코드 스타일. 미리 이런 걸 스킨에 박아 두면 얼마나 좋은가? 에디터에서는 코드 하이라이트 스타일을 적용해 놓고선 스킨에서는 빼버리다니... 위의 코드를 따서 스킨 편집에서 html 사이에 붙이면 된다. 좀 더 예쁘게 만들고 싶.. 2020. 11. 21.

티스토리툴바