본문 바로가기

분류 전체보기285

✈ [반응형 웹 기초] @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으로 대부분.. 2019. 7. 27.

✈ 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.. 2019. 7. 26.

부트스트랩 날짜선택 폼 bootstrap 4.3 datepicker ✈ 부트스트랩 4.3 날짜 선택 폼: 간편한 데이터 피커 사용하기 서론 부트스트랩은 웹 개발을 편리하게 만들어주는 훌륭한 프레임워크입니다. 특히 드롭다운이나 데이터 피커와 같은 구성 요소를 쉽게 활용할 수 있다는 점이 큰 장점입니다. 그러나 버전 업그레이드 과정에서 예상치 못한 문제가 발생할 수 있습니다. 이번 포스팅에서는 부트스트랩 4.3으로 업그레이드하면서 마주할 수 있는 스타일 관련 이슈와 해결 방법에 대해 알아보겠습니다. 특히, 날짜 선택을 위한 데이터 피커 구현에 중점을 둘 것입니다. 부트스트랩 4.3 업그레이드의 스타일 변화 부트스트랩 4.3으로 업그레이드하면 기존의 스타일이 조금 흐트러질 수 있습니다. 이 중에서도 특히 날짜 선택을 위한 데이터 피커의 스타일이 예전과 다를 수 있습니다. 더욱.. 2019. 7. 25.

✈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.. 2019. 7. 25.

드롭다운 사용을 위한 popper.js 다운로드 for bootstrap 4.3 dropdown components ✈ 드롭다운 사용을 위한 popper.js 다운로드 for bootstrap 4.3 dropdown components 부트스트랩 3.x 까지는 popper.js는 필수가 아니었다. 하지만 4.3에서는 드롭다운 메뉴만 사용하려고 해도, popper.js를 사용해야 한다. 가장 손쉬운 방법은 cdn을 이용하는 방법이지만, 로컬에 파일이 있어야만 하는 경우가 있다. 이럴 때 다운로드를 받아야 하는데 popper.js만 다운로드 받으면 동작하지 않고 에러를 낸다. popper.js.map 파일도 같이 필요로 한다. 보통 두 파일은 같은 폴더에 놓이기 때문에 cdn에서 다운 받을 때 popper.js를 먼저 다운받고, 뒤에 .map을 붙여주면 popper.js.map 파일을 다운로드 받을 수 있다. https:.. 2019. 7. 23.

✈css3 background-size:cover contain 속성 ie7, i8 핵 background-size-polyfill with 짤 : 스타킹 하이힐 2016.08.09 11:11 IE EDGE까지 나와 있는 세상에서 여전히 IE7 버전에 대한 하위 호환 크로스 브라우징을 해줘야 하는 것이 짜증이 나지만... UI는 안 되는 것도 되게 하는 신성한 직업! 브라우저들이 미쳐 날뛰더라도 핵이건 뭐건 써서 잘 맞춰보자. 이 번에 송파구립 통합도서관 중에 가락시장 도서관이 오픈하는데 맞춰서 송파구립 가락몰 도서관의 디자인 수정이 살짝 있었다. 기존의 송파구립도서관들은 BG가 repeat-x로 반복되기 때문에, 별 신경을 쓰지 않았지만, 좌우로 그라데이션 되는 BG가 깔리는 디자인으로 결정이 되었다. 당연히 repeat-x를 쓸 수는 없다. #topheader{ width:100%; height:90px; z-index:999; background:url(.... 2019. 7. 22.

✈ favicon.ico 파비콘 만들어서 홈페이지에 붙이기 2014년에 작성된 글입니다. 티스토리 파비콘은 파비콘을 만든 뒤 블로그 설정에 업로드만 하면 됩니다. 뭐든지 겸사겸사 하는 걸 좋아하는 타입이라. 네이버 블로그에서 티스토리로 이사를 오면서 네이버에서는 뽐낼 수 없었던 기능들을 십분 활용해보는 김에 저처럼 초보가 갑갑해하고 가려운 것을 직접 해나가면서 올려봅니다. 굉장히 상세하게 설명해주시는 다른 분들의 글들도 많지만, 워낙에 아는게 많으셔서 들 그런지 간단한 것 까지 세밀하게 상세하게 쓰다 보면 되려 어렵게 느껴지더군요. 그래서 저는 핵심만 추려봅니다. 파비콘을 다는 방법은 다음과 같습니다. 1. favicon.ico라는 파일을 만든다. 2. 사이트에 올려둔다. 3. 사이에 를 삽입한다. 1.favicon.ico 만들기 포토샵으로 만들어도 되고. ht.. 2019. 7. 21.

✈ jquery animate 사용예 jquery animate 사용예 .animate() 함수를 이용하면 html Element 상의 객체 움직임을 부여할 수 있다. 반드시 CSS 속성 맵 데이터와 함께 사용한다. 움직임에 관련된 속성들은 단수 수치 값(single numeric value)을 이용한다. 즉, width, height, left, margin 등에 이용할 수 있지만 color같은 값에는 사용할 수 없다. .animate( properties [, duration] [, easing] [, complete] ) Returns : jQuery Duration은 지속시간이며, complete에는 콜백 함수를 지정해서, 애니메이션 동작 이후 함수를 실행할 수 있다. 단, 이 함수에는 인자값을 넘겨 줄 수는 없다. .animate(.. 2019. 7. 17.

✈php $_SERVER (서버함수) 예제 php뿐만 아니라 웹프로그래밍을 하다보면 서버환경이나 사용자의 사용환경 정보를 서버사이드에서 수집할 필요가 있을 때가 있다. php에서도 당연히 서버환경이나 사용자환경 예컨데 접속자의 아이피주소라든지, 자바스크립트의 USER_Agent와 같은 정보들을 수집할 수 있는 함수들이 마련되어 있다. 이를 통칭해서 서버함수라 칭하고 php에서는 $_SERVER의 배열 형태로 쓸 수 있다. 사용 예제들은 다음과 같다. 실제 동작 데모페이지는 이 곳을 클릭. $_SERVER['DOCUMENT_ROOT'] = 사이트가 현재 위치한 서버상의 폴더 위치 = /home/hosting_users/rsl2_stspace/www $_SERVER['SCRIPT_FILENAME'] = 실행되고 있는 php문서의 위치와 파일명 = /.. 2019. 7. 14.

이전 1 ··· 26 27 28 29 30 31 32 다음

티스토리툴바