Webi Blog

웹아이에서 운영되고 있는 블로그입니다.

인기 글
CSS로 마우스 커서를 내가 원하는 이미지로 변경하기 | 커서가 안 바뀔 때

웹사이트를 만들 때 클라이언트의 요구 혹은 디자이너의 요구로 인해 커서를 내가 원하는 이미지로 변경해야 하는 경우가 생깁니다. 시스템에서 제공해주는 기본 커서로 변경하는 방법은 매우 간단합니다. 시스템 기본 커서로 변경하는 방법 입니다. .link:hover { cursor : pointer; } 가장 많이 쓰이는 방법이며, 특정 태그를 마우스 오버 했을 때 손가락 모양으로 바꾸는 코드입니다. pointer 외에도 기본적인 시스템 커서는 아래 링크에서 확인해 보시면 됩니다. https://developer.mozilla.org/ko/docs/Web/CSS/cursor cursor - CSS: Cascading Style Sheets | MDN CSS cursor 속성은 요소 위에 마우스 커서가 올라갔을 ..
CSS 2022.01.10 14

PHP 배열을 손쉽게 JSON 형식으로 변환하기 | json_encode, json_decode

여러분들 PHP로 개발하실 때 배열 많이 사용하시나요? 저는 정말 많이 사용하는데요~ 배열을 잘 사용한다면 더욱 편하게 개발할 수 있는 것 같아요~ 오늘은 배열을 JSON 형식으로 변환하는 함수에 대해서 알아보겠습니다. 다들 JSON이 뭔지 아시죠? json은 자바스크립트 언어에서 파생되어 자바스크립트의 구문 형식을 따르지만, C, C++, C#, 자바, 펄, 파이썬 등 수많은 프로그램 언어에서 쉽게 사용할 수 있는 독립형 데이터 포맷이라고 합니다. 그냥 쉽게는 배열이랑 비슷한데 쓰는 방법이 좀 다르다!! 그리고 print 하면 문자열로 출력이 된다고 보시면 됩니다~ 물론 PHP에서는 사용이 불가능합니다!! json을 php에서 사용하려면 배열로 변환해서 사용해야 합니다. 저는 주로 데이터를 주고받거나 ..
PHP 2021.08.26 2

웹페이지 화면 이미지로 저장하기 | html2cavas 플러그인

웹 개발을 하다 보면 자주는 아니지만 간혹 웹페이지 화면을 이미지로 저장해야 하는 경우가 생긴다. 당연히 관리자 화면의 통계나 일부 화면을 이미지로 저장하고 싶다고 할 때는 이렇게 말을 한다. 스크린 캡처를 이용하시는게 좋을 듯 합니다. 캡처 프로그램을 실행하고 영역을 마우스로 드래그하는 과정이 귀찮을 수는 있지만... 원하는 영역만 지정해서 저장할 수 있고 정말 심플한 방법이다. 중요한건 추가적인 개발 비용도 안든다 하지만 스크린 캡쳐만으로 해결할 수 없고 이미지로 저장해야 할 수밖에 없는 상황이 왔다. 나 : 영수증 프린트 출력이 PC버전에는 되는데 모바일에서는 안돼요. 뺄까요? 클라이언트 : 음..모바일에서는 이미지 저장으로 하면 안 될까요? 나 : 네.... 잘 사용하지 않는 플러그인이지만 어쩔 ..
Plugin 2022.05.11 4

반응형 사이트 사이즈 계산에는 CSS의 calc()가 최고죠!!

요즘은 반응형으로 사이트 제작을 많이 하는데요 반응형 사이트를 제작할 때 아주 애먹는 부분이 있죠.... 바로 사이즈를 어떻게 잡느냐입니다. 보통 가변 사이즈로 설정해야 해서 % 나 em, rem으로 사이즈를 지정해 주지만 특정 영역만 고정 사이즈로 해줘야 할 때가 있습니다. 그럴 땐 정말 머리가 지끈..... 무슨 말인지 이해가 안 되시는 분들을 위해 샘플 코드와 이미지로 준비했습니다. 컨텐츠 영역 컨텐츠 영역 이렇게 왼쪽에 이미지 사이즈를 고정으로 해주고 싶을 때 %로 사이즈를 줬을 때 Width 사이즈에 따라 왼쪽 이미지 영역에 여백이 생겼다 없어졌다 하는 걸 보실 수 있습니다. 그래서 이미지 영역은 px로 고정을 해줘야 하는데 그럼 콘텐츠 영역에 % 사이즈를 주기가 애매해져요~ 저는 이러한 경우에..
CSS 2021.08.24 2

OWL Carousel로 슬라이드를 간편하게 만들기

안녕하세요 :) 오늘은 오픈소스인 그누보드에 기본적으로 내장되어 있는 "owlcarousel" 플러그인 사용법을 알아보도록 하겠습니다. 만약에 그누보드에 없거나 별도로 개발을 하실 경우는 https://owlcarousel2.github.io/OwlCarousel2/ 사이트에서 직접 다운로드를 받아 사용하실 수 있습니다. :) 우선 그누보드 기준으로 플러그인의 JS 위치와 소스 위치를 알려드리겠습니다. 위에 보이는 사진처럼 owl 플러그인은 js 폴더안에 "owlcarousel" 이름으로 있습니다. 그누보드에서는 "head.sub.php"파일에태그안에서 확인해보시면 됩니다. 만약 구버전이거나 적용이 되어 있지 않다면 위 사진과 같이 적용을 하시면 되겠습니다. 모든 준비가 완료되었다면 실제 슬라이드를 적용..
Plugin 2021.08.30 4

카카오톡 링크 공유 시 표시되는 이미지 및 정보 수정하기

여러분들 카카오톡에 링크 공유할 때 공유하는 사이트의 정보가 나오는 거 한 번쯤 보셨죠?? 요즘은 친구들과 링크를 공유하는 일이 꽤나 많이 있는 거 같아요~ 공유하는 링크의 사이트가 섬네일도 안 뜨고 이상하게 뜨고 그러면... 왠지 사이트의 신뢰가 팍팍 떨어지지 않나요?? 그래서 이번에 내가 운영하는 홈페이지의 링크를 카카오톡으로 보냈을 때 나오는 썸네일, 정보를 수정하는 방법을 알려드릴께요!! 생각보다 어렵진 않아요.. 다른 SNS과 마찬가지로 카카오톡은 메타 태그 정보를 가져가서 보여주기 때문에 우리는 메타태그를 넣어주면 되요~ 매타 태그를 넣어주실 때에는 태그 사이에 넣어주시면 됩니다. 태그 사이에 넣기 싫으신 분은 안넣으셔도 되지만....반드시 태그 앞에 있어야 합니다.^^ 위와 같은 태그들이 사..
HTML 2018.08.20 4

최신 글

more

웹페이지 화면 이미지로 저장하기 | html2cavas 플러그인

웹 개발을 하다 보면 자주는 아니지만 간혹 웹페이지 화면을 이미지로 저장해야 하는 경우가 생긴다. 당연히 관리자 화면의 통계나 일부 화면을 이미지로 저장하고 싶다고 할 때는 이렇게 말을 한다. 스크린 캡처를 이용하시는게 좋을 듯 합니다. 캡처 프로그램을 실행하고 영역을 마우스로 드래그하는 과정이 귀찮을 수는 있지만... 원하는 영역만 지정해서 저장할 수 있고 정말 심플한 방법이다. 중요한건 추가적인 개발 비용도 안든다 하지만 스크린 캡쳐만으로 해결할 수 없고 이미지로 저장해야 할 수밖에 없는 상황이 왔다. 나 : 영수증 프린트 출력이 PC버전에는 되는데 모바일에서는 안돼요. 뺄까요? 클라이언트 : 음..모바일에서는 이미지 저장으로 하면 안 될까요? 나 : 네.... 잘 사용하지 않는 플러그인이지만 어쩔 ..
Plugin 2022.05.11 4

[Mac] 맥 사파리, 크롬에서 웹사이트 캐시 지우기

우리가 웹사이트를 접속 할 때 서버에서 불러오는 리소스(js, css, image) 등을 파일로 저장해 두었다가 다시 접속할 때 서버에서 로딩하지 않고 캐시 파일을 불러와 사용합니다. 브라우저의 개발자 도구를 통해 확인해보면 캐시된 파일들을 확인 할 수 있습니다. 캐시를 사용할 때 장점 대부분 브라우저는 캐시 사용이 기본 사용으로 설정되어있습니다. 캐시를 사용할 경우 웹페이지에 접속할 때 마다 사용되는 리소스 파일들을 서버에서 불러오지 않고 파일로 불러오기 때문에 웹사이트 접속을 빠르게 할 수 있습니다. 캐시를 끈 상태에서 웹사이트를 이용해 보면 실제로 체감이 될 정도의 속도차이를 느낄 수 있습니다. 또한 웹사이트 운영자는 캐시로 인해 서버에서 불러오지 않는 파일은 트래픽에 영향을 주지 않기 때문에 트래..
ETC 2022.04.27 2

PHP 문자열 문자셋 확인하기 | mb_detect_encoding()

보통 개발을 진행할 때 주로 UTF-8로 문자셋을 사용합니다. 일반적으로 개발할 경우는 문제가 없지만, 외부 서비스를 연동할 때 문자셋이 다른 경우가 있습니다. 그리고 개발된 지 오래되어 EUC-KR로 되어있는 홈페이지를 수정할 때 문자셋이 달라 문자가 깨지는 경우를 많이 접하게 됩니다. 보통은 iconv() 함수를 이용해서 변환을 해주지만 이 함수는 원래의 문자셋을 알아야 하기 때문에 현재 변수에 문자가 어떠한 문자셋으로 들어가 있는지 알아야 합니다. 하지만 문자셋 확인이 안 되어 iconv() 함수를 사용하더라도 문자가 깨지는 경우가 있습니다. 이럴 경우 현재 변수에 담긴 값의 문자셋이 무엇인지 알아내기 위해 mb_detct_encoding() 함수를 사용합니다. $str = "테스트 문자"; $en..
PHP 2022.02.28 2

jQuery Ajax 사용 시 Form 데이타를 한방에 쉽게 전송하기!! | serialize()

Ajax로 프로그램을 만들 때 혹은 Form데이터를 Query String 형식으로 변경해서 사용할 때 어떠한 방법을 사용하시나요? 일일이 하나씩 데이터를 불러와서 사용합니다! 네, 보통은 폼 값을 하나씩 불러와 Ajax 데이터로 만들어서 사용하는 경우가 대부분일 겁니다. 하지만 불어와야 하는 Form 데이터가 30개? 50개? 100개? 이렇게 항목이 많은 경우에는 하나씩 불러와서 넣어주는 건 너무 힘들어요ㅜ 이럴 때 사용할 수 있는 jQuery의 유용한 함수가 있습니다. 바로 serialize()입니다. serialize함수는 실렉터 한 폼의 input 데이터들을 쿼리 스트링으로 변경해주는 역할을 합니다. 저는 ajax로 예를 들었지만 폼 데이터를 쿼리 스트링으로 사용해야 할 때 유용하게 사용할 수 ..
Script 2022.02.26 2

스팸글은 이제 그만!! PHP로 구글 reCaptcha v3 사용하기

상담 신청 혹은 문의를 받기 위해 홈페이지에 간단하게 폼을 만들어 놓으면 지긋지긋하게 스팸글이 올라오곤 합니다. 그래서 캡챠 기능을 많이 이용합니다. 캡챠 기능이 너무 불편해요. 저는 캡챠 기능이 사실 너무 싫어요ㅠ 스팸글을 막기 위해서는 어쩔 수 없다는 생각도 합니다. 글자를 보고 입력을 해야하는데 그나마 보기 편한 곳은 한 번에 통과하는 경우도 있지만 보기 힘들게 해 놓은 곳은 5번 이상을 시도해도 실패한 적이 많아요. 하지만 구글에서 서비스 중인 reCaptcha v3를 사용하면 이런 문제를 해결할 수 있습니다. 어떠한 입력도 없이 구글이 판단하는 사용자의 점수를 기준으로 스팸글인지 판단해서 막아주는 서비스 입니다. 점수가 어떻게 계산되는지는 모르겠지만 작동 방식을 보면 구글이 보내주는 키값을 함께..
Plugin 2022.02.16 2

고도몰5 Pro상품후기, Q&A 말머리(카테고리) 검색 기능 사용하기 with. 상품 상세페이지

고도몰5 Pro를 이용해서 스킨 작업을 하거나 튜닝을 진행할 때 게시판 말머리로 검색하는 기능을 사용하는 경우가 있습니다. 물론 일반적인 게시판 스킨에는 기본적으로 말머리를 사용하게 되면 셀렉트 박스로 선택할 수 있도록 나오기 때문에 문제가 되지 않습니다. 하지만 셀렉트 박스가 아닌 다른 방식으로 사용할 때 혹은 말머리 기능이 나오지 않는 곳에서 사용하는 방법을 알려드릴께요~ ⚠️ 해당 포스팅에서 사용된 Skin은 Moment이며, 스킨에 따라 파일 위치, 스크립트 내용들이 달라질 수 있습니다. 👉 게시판에서 셀렉트 박스가 아닌 다른 방식으로 사용하는 경우 말머리를 셀렉트 박스가 아닌 페이지에 리스트로 전부 노출 시키는 경우에는 간단하게 링크에 파라미터 값을 추가해주시면 사용가능합니다. &category..
GodoMall5 Pro 2022.02.08 2

티스토리툴바