Webi Blog

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

인기 글

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

여러분들 카카오톡에 링크 공유할 때 공유하는 사이트의 정보가 나오는 거 한 번쯤 보셨죠?? 요즘은 친구들과 링크를 공유하는 일이 꽤나 많이 있는 거 같아요~ 공유하는 링크의 사이트가 섬네일도 안 뜨고 이상하게 뜨고 그러면... 왠지 사이트의 신뢰가 팍팍 떨어지지 않나요?? 그래서 이번에 내가 운영하는 홈페이지의 링크를 카카오톡으로 보냈을 때 나오는 썸네일, 정보를 수정하는 방법을 알려드릴께요!! 생각보다 어렵진..

HTML 2018.08.20 0

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

웹사이트를 만들 때 클라이언트의 요구 혹은 디자이너의 요구로 인해 커서를 내가 원하는 이미지로 변경해야 하는 경우가 생깁니다. 시스템에서 제공해주는 기본 커서로 변경하는 방법은 매우 간단합니다. 시스템 기본 커서로 변경하는 방법 입니다. .link:hover { cursor : pointer; } 가장 많이 쓰이는 방법이며, 특정 태그를 마우스 오버 했을 때 손가락 모양으로 바꾸는 코드입니다. pointer 외에도 기본적인 시스템 커서는..

CSS 2022.01.10 0

jQuery의 Datepicker는 뭔가 아쉬워, 시간이 필요해 | DateTimePicker

jQuery의 datepicker를 아시나요? jQueryui에서 input form에서 날짜를 아주 쉽게 선택할 수 있도록 해주는 아주 고마운 녀석이죠..... 바로 이건데요~ 저기 input 박스를 클릭하면 이렇게 날짜를 선택할수 있게 나옵니다. 하지만...이름 그대로 날짜만 선택할 수 있어요.... 가끔 시간도 같이 선택해줘야 할때가 있는데.... 그래서 다른 플러그인을 써야합니다~ 바로 datetimepicker 죠~ 이름에서부터 알 수 있듯이 날짜와 시..

Plugin 2021.08.27 0

반응형 폰트 사이즈 단위 em? rem? 뭐가 다를까? | css font-size 상대 단위

오늘은 반응형 사이트 제작할 때 많이 쓰는 size 단위인 em, rem에 대해서 알아보도록 하겠습니다. 보통 폰트사이즈를 12px 요렇게 고정 크기 픽셀 단위로 설정하지만 em과 rem은 배율이라고 보시면 되요 1.2em 1.2rem은 1.2배라고 보시면 되요~ 근데 배율이면 기준이 있어야하자나요? 도대체 어떤 요소의 1.2배란 말일까요? 여기서 em과 rem은 서로 다른 길을 갑니다. em은 상위 요소(부모)가 기준이 되구요 rem은 최상위 요소..

CSS 2021.08.30 0

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

요즘은 반응형으로 사이트 제작을 많이 하는데요 반응형 사이트를 제작할 때 아주 애먹는 부분이 있죠.... 바로 사이즈를 어떻게 잡느냐입니다. 보통 가변 사이즈로 설정해야 해서 % 나 em, rem으로 사이즈를 지정해 주지만 특정 영역만 고정 사이즈로 해줘야 할 때가 있습니다. 그럴 땐 정말 머리가 지끈..... 무슨 말인지 이해가 안 되시는 분들을 위해 샘플 코드와 이미지로 준비했습니다. 컨텐츠 영역 컨텐츠 영역 이렇게..

CSS 2021.08.24 0

PHP를 이용해 AWS S3 스토리지에 파일 업로드 하기

요즘 AWS를 이용해 서버를 구축하시는 분들이 많습니다. AWS에서 제공되는 많은 서비스 중 오늘은 PHP를 이용하여 AWS의 S3 스토리지에 파일을 업로드하는 방법에 대해 포스팅합니다. S3 스토리지에 직접 업로드하는 방식이 아닌 PHP 코드로 파일 URL 또는 Form을 통한 파일 업로드하는 방식입니다. 우선 AWS에서 제공하는 SDK를 설치해야 합니다. AWS PHP SDK : https://docs.aws.amazon.com/aws-sdk-php/v3/guide/getting-sta..

AWS 2021.08.31 0

최신 글

more

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

웹 개발을 하다 보면 자주는 아니지만 간혹 웹페이지 화면을 이미지로 저장해야 하는 경우가 생긴다. 당연히 관리자 화면의 통계나 일부 화면을 이미지로 저장하고 싶다고 할 때는 이렇게 말을 한다. 스크린 캡처를 이용하시는게 좋을 듯 합니다. 캡처 프로그램을 실행하고 영역을 마우스로 드래그하는 과정이 귀찮을 수는 있지만... 원하는 영역만 지정해서 저장할 수 있고 정말 심플한 방법이다. 중요한건 추가적인 개발 비용..

Plugin 2022.05.11 0

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

우리가 웹사이트를 접속 할 때 서버에서 불러오는 리소스(js, css, image) 등을 파일로 저장해 두었다가 다시 접속할 때 서버에서 로딩하지 않고 캐시 파일을 불러와 사용합니다. 브라우저의 개발자 도구를 통해 확인해보면 캐시된 파일들을 확인 할 수 있습니다. 캐시를 사용할 때 장점 대부분 브라우저는 캐시 사용이 기본 사용으로 설정되어있습니다. 캐시를 사용할 경우 웹페이지에 접속할 때 마다 사용되는 리소스 파일들..

ETC 2022.04.27 0

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

보통 개발을 진행할 때 주로 UTF-8로 문자셋을 사용합니다. 일반적으로 개발할 경우는 문제가 없지만, 외부 서비스를 연동할 때 문자셋이 다른 경우가 있습니다. 그리고 개발된 지 오래되어 EUC-KR로 되어있는 홈페이지를 수정할 때 문자셋이 달라 문자가 깨지는 경우를 많이 접하게 됩니다. 보통은 iconv() 함수를 이용해서 변환을 해주지만 이 함수는 원래의 문자셋을 알아야 하기 때문에 현재 변수에 문자가 어떠한 문자셋으..

PHP 2022.02.28 0

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

Ajax로 프로그램을 만들 때 혹은 Form데이터를 Query String 형식으로 변경해서 사용할 때 어떠한 방법을 사용하시나요? 일일이 하나씩 데이터를 불러와서 사용합니다! 네, 보통은 폼 값을 하나씩 불러와 Ajax 데이터로 만들어서 사용하는 경우가 대부분일 겁니다. 하지만 불어와야 하는 Form 데이터가 30개? 50개? 100개? 이렇게 항목이 많은 경우에는 하나씩 불러와서 넣어주는 건 너무 힘들어요ㅜ 이럴 때 사용할 수 있는 jQ..

Script 2022.02.26 0

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

상담 신청 혹은 문의를 받기 위해 홈페이지에 간단하게 폼을 만들어 놓으면 지긋지긋하게 스팸글이 올라오곤 합니다. 그래서 캡챠 기능을 많이 이용합니다. 캡챠 기능이 너무 불편해요. 저는 캡챠 기능이 사실 너무 싫어요ㅠ 스팸글을 막기 위해서는 어쩔 수 없다는 생각도 합니다. 글자를 보고 입력을 해야하는데 그나마 보기 편한 곳은 한 번에 통과하는 경우도 있지만 보기 힘들게 해 놓은 곳은 5번 이상을 시도해도 실패한..

Plugin 2022.02.16 0

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

고도몰5 Pro를 이용해서 스킨 작업을 하거나 튜닝을 진행할 때 게시판 말머리로 검색하는 기능을 사용하는 경우가 있습니다. 물론 일반적인 게시판 스킨에는 기본적으로 말머리를 사용하게 되면 셀렉트 박스로 선택할 수 있도록 나오기 때문에 문제가 되지 않습니다. 하지만 셀렉트 박스가 아닌 다른 방식으로 사용할 때 혹은 말머리 기능이 나오지 않는 곳에서 사용하는 방법을 알려드릴께요~ ⚠️ 해당 포스팅에서 사용된 Ski..

GodoMall5 Pro 2022.02.08 0