CODE CAVE

jQuery로 화면 사이즈를 구해야 할 일은 많습니다. 특히 모바일은 디바이스가 워낙 다양해서 한 페이지가 디스플레이 크기에 따라서 변화하는 식으로 반응형 디자인을 하고, 그 것이 실제로 디바이스 크기에 반응하도록 하는 CSS 기능 중에 미디어 쿼리라는 기능이 있습니다. 자바스크립트로도 미디어 쿼리 처럼 화면 사이즈 별로 실행해야할 행위가 다를 경우에 할 수 있는 방법이 있습니다. 물론 jQuery로 하면 더 간단한 문법으로 적용할 수 있겠죠. 그래서 이번 포스팅에서는 jQuery로 화면 사이즈를 구하고 화면 사이즈에 따른 코드를 분기 해보겠습니다. function open_chatroom(){ var windowWidth = $( window ).width(); if(windowWidth < 500) ..

웹 사이트에 쿠키를 이용하면 여러가지 것들을 만들 수 있습니다~ 어떤 배너를 오늘 하루 보지 않기, 로그인 접속자만 보이기, 브라우저로 새 접속시에만 보기 등등.. 무언가 고유한 값을 저장해놓고 사용할 수 있게 됩니다. 변수는 프로그램이 실행될때 초기화가 되고 값이 부여되고, 프로그램을 닫으면 모두 소멸됩니다. 데이터베이스는 데이터를 지우지 않는 이상 계속 남아있게 되지만 전용 서버가 있어야 합니다. 하지만 쿠키는 일정 기간 동안 지워지지 않고 클라이언트 PC에 저장되게 됩니다. 즉, 유저 마다 고유한 어떤 값을 프로그램 종료시에도 보관하고 있게 되는 겁니다. 이런 쿠키는 여러 사이트에서 볼 수 있습니다. 이번에 제가 포스팅 해볼 것은 쿠키에 대한 것으로 브라우저로 새 접속시의 쿠키 사용 입니다. 예제는..

말풍선 스타일도 참 여기저기 많이 쓰이죠~ 저도 일반적으로 포토샵을 활용하여 이미지로 만들어서 썼었는데 이게 단점이 텍스트 양에 따라서 이미지 사이즈가 조정되어 좀 귀찮은 작업들을 해야한다는 단점과 위에서 색상이라도 바꾸자고 하면 포토샵에서 또 새로 색 입히고 다시 자르고 이미지 폴더에 덮어쓰기하고.... 별로 디자인 할 필요도 없는 간단한 말풍선이라면 더더욱 짜잘한 수정사항이 짜증나질 수 있죠.. 아무튼 여러모로 매우 귀찮습니다! 이런 말풍선 정도는 CSS로 만들 수 없을까?? 생각하다가 찾아봤는데 말풍선, CSS로 만들 수 있습니다!! 네! 찾았습니다! 그것도 바로 실무에서 복붙할 수 있도록 말풍선 CSS를 만들어주는 사이트가 있어서 소개해드립니다. 전 이 사이트의 스타일 고대로 가져와서 몇가지만 수..

이번에 소개 해드릴 것은 swiper 라는 라이브러리 인데요~ 간단하게 이미지 슬라이더를 구현 할 수 있는데 여기에 터치 스와이프 까지 지원해서 모바일에서 쓰기에도 매우 적합하다고 보여집니다~ 저도 실제로 한개의 데스크탑 슬라이드와 한개의 모바일 웹 사이트에 적용해봤는데 매우 자연스럽고 확장성도 좋았습니다. 공식 사이트는 여기 이구요. 스와이프 라이브러리 사용법은 아래와 같습니다. new Swiper('.container', { pagination: '.swiper-pagination', paginationClickable: true, spaceBetween:0, loop: true, }); 위 처럼 작성 해주시면 자바스크립트 쪽은 끝 입니다. 매우 직관적이죠? 객체를 생성하면서 생성자에 인수를 넘기는 ..

CSS 에는 opacity 라는 멋진 속성이 있죠, 하지만 이 속성의 단점은 해당 요소의 자식 요소 까지 모두 투명해진다는 단점이 있습니다. 배경만 투명하게 하고 싶으실 시에는 rgba를 이용하시면 됩니다. 사용법은 아래와 같습니다. background-color: rgba(255,255,255,0.5); 위 명령은 하얀색에 투명도를 50%로 준 것입니다. 그럼 즐 코딩하세요!

이미지를 부트스트랩을 안쓰면 text-align: center; 을 써서 가운데 정렬이 되지만 부트스트랩에서 .img-responsive를 써서 반응형 이미지로 만든 후에 가운데 정렬 하면 안되는 경우가 있습니다. 이는 너비 값이 고정이 아니게 되버려서 안되는건데요~ 그럴땐 부트스트랩의 .center-block을 쓰면 됩니다.!

아이폰 사파리에서 이나 을 쓸 시에 라운드 처리와 그라데이션이 기본으로 들어가 있는 경우가 있습니다. 분명이 다른 스타일을 넣었는데.. 백그라운드도 지정했고 라운드를 작게 지정했는데 이상하게 그라데이션과 라운드가 잡혀있는 경우는 사파리에서 적용되는 기본 스타일로, CSS에서 해당 버튼에 appearance:0; 만 넣어주시면 사파리의 기본 스타일이 사라지고 작성하신 스타일이 잘 적용 될 것 입니다. apperance:0; 그럼 모두 즐코딩 하세요~ 도움이 되셨다면 아래 공감 버튼을 꾹!▼▼▼▼▼▼

euc-kr.... 오랜만에 다뤄보네요 ㅋㅋ 이젠 없을 줄 알았는데 새로 맡은 쇼핑몰 프로젝트가 독립몰인데 euc-kr 이네요 하.. 투정은 그만하고 본론으로 들어가겠습니다.. phpmyadmin 을 설치하시고 euc-kr로 구성된 디비의 SQL 덤프 파일을 가져오기(import) 하실 때 여기서 파일 문자셋을 고르셔야 하는데, 이때 euc-kr이 없으신 분들 계실 겁니다. euc-kr은 이 세상에서 사라져야 마땅할 캐릭터셋이지만 그래도 어쩌겠습니까 ㅠㅠ 아직도 euc-kr의 흔적이 남아있는게 꾀 있는걸.. 참고로 저는 아마존 EC2 서버에 우분투를 깔고 phpmyadmin을 사용하였습니다. phpmyadmin 설치는 여기를 참조하세요. 해결 법은 의외로 간단합니다~ 1. 설정 파일 열기 (루트만 수정할..

보통 가운데 정렬 할때 margin:0 auto; 많으들 쓰시죠. 하지만 이건 가로크기를 고정으로 해야한다는 단점이 있습니다. 유동적으로 하고 싶을 때의 방법은 text-align: center;와 display: inline-block; 을 이용하는 것입니다. 텍스트가 아닌데 text-align 하면 먹히는건 경험 해보셨나요?? 이 태그가 text-align 속성이 먹히는 이유는 이게 inline-block 속성을 가진 태그 이기 때문입니다. 즉 text-align 은 텍스트와 inline-block 속성을 가진 태그들을 정렬 해줍니다. ul을감싸는wrap { text-align: center }ul { display: inline-block; } 끝~ 즐코딩하세요~~ 도움이 되셨다면 아래 공감 버튼을..

PHP 버전이 어느정도 되면 (저는 5.5에서 테스트) Warning이랑 Notice 로그가 많이 뜨죠.. 저는 포트폴리오 때문에 웹사이트 개발 했던 것들을 파일로 다 보관했는데,어느날 노트북을 바꾸고 나서 제 프로젝트를 열어보니 난리가 나더라구요 저 이상한 로그들로요.. PHP 버전이 올라가서인것 같아요..아무튼 저런 로그나 에러가 안뜨게 개발하는게 제일 베스트겠지만 어떤 만들어진 프로젝트에 참여하게 됐다거나 인수인계를 받았다거나 서버를 옮겼을 때 에러나 워닝,노티스 로그가 엄청나게 뜰 수 있습니다.예를 들어 if(!$_SESSION) 은 세션이 없다면 수행하는 if문인데 $_SESSION 자체가 없을 경우 Not define 에러가 뜹니다.그래서 if(!isset($_SESSION)) 이렇게 해주어야..