요즘 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-started/installation.html Installing the AWS SDK for PHP Version 3 - AWS SDK for PHP Using PHP with the Suhosin patch is not ..

직접 쇼핑몰을 운영하시는 많은 분들이 지식쇼핑에 입점을 하시는데요 지식쇼핑이 신청만 해서 끝나는게 아니라는거 아시나요? 네이버에서 상품을 긁어갈 수 있도록 네이버에서 원하는 형태로 리스트를 만들어 URL 주소를 제출해야 한답니다. 물론 많은 솔루션에서 기본적으로 제공해주기도 할텐데요!~ 그 중에서 영카트를 사용하시는 분들도 손쉽게 DB URL을 사용할 수가 있습니다. 단, 영카트 버전이 5.2.3 이상이 되어야 사용할 수가 있답니다. 영카트의 버전 확인하는 방법을 모르신다구요? 알려드릴께요!^^ 쇼핑몰이 업로드 되어있는 FTP로 접속을 하셔서 index.php 파일이 있는 곳으로 이동해 주세요. 이렇게 영카트의 파일들이 있고 index.php가 있는 홈폴더로 이동하게 되면 config.php 파일도 보이..

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

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

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

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

저처럼 개발, 코딩 블로그 운영하시는 분들이나 사이트 운영하시는 분들 많으시죠? 특히 요즘은 티스토리, 블로거 같은 HTML 편집이 자유로운 블로그를 운영하시는 분들이 많은데 소스코드를 입력하실 때 어떻게 쓰시나요?? 그냥 텍스트로 입력하시나요? 위처럼 그냥 텍스트로만 입력하게 되면 너무 가독성도 떨어지고 뭔가 딱딱해 보이지 않나요?? 어렵고 힘들게 느껴질 수 있는 프로그램인데 그래도 컬러감 있게 넣어주면 보기라도 좋잖아요? 😂 제가 소개할 코드 하이라이터는 구글의 Prettify입니다. 구글의 Prettify를 소개하기 전에 몇 개만 소개해드리겠습니다. 1. 제일 많이 알려져 있는 SyntaxHighlighter http:// http://alexgorbatchev.com/SyntaxHighlighte..

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

ALT 속성이 없는 이미지 태그를 쉽게 찾는 방법을 알아볼 건데요~ 잠깐! 도대체 왜 찾아야 하는 거죠?? 귀찮게.... 하지만 ALT 속성은 - 시각장애인을 위한 웹 접근성에 굉장히 필요합니다. - SEO에 영향을 줍니다. - 일시적인 오류로 이미지가 표시 안될 때 이미지 대신 ALT 속성 값이 표시돼요. 그렇기 때문에 최대한 넣어줄 수 있는 부분은 넣어주는 게 좋아요! 1. 시각장애인을 위한 웹 접근성에 굉장히 필요합니다. HTML 웹페이지를 만드는 데 있어 시각장애인을 위한 배려는 반드시 필요합니다. 시각장애인은 음성인식기를 컴퓨터에 장착을 하고 사용하는데 이 음성인식기를 사용하면 웹사이트의 모든 내용을 음성으로 들을 수 있습니다. 만약 시각 장애인이 어떠한 이미지를 클릭한다면 이미지를 설명해주는 ..

오늘은 파비콘을 홈페이지에 적용하는 방법에 대해서 알아보겠습니다. 파비콘이 뭔지 모르신다고요??? 파비콘은 즐겨찾기(favorites)와 아이콘(icon)의 합성어로 주소창이나 즐겨찾기에 표시되는 작은 아이콘이에요! 파비콘이 뭔지 아셨다면 필요한 파일도 만드실 겸 해서 아래 링크로 한번 다녀오시면 될 거 같습니다.^^ 2018.07.03 - [Web/Design] - 파비콘 만드는 법 | 이미지 파일을 ico 파일로 변환 방법 파비콘 만드는 법 | 이미지 파일을 ico 파일로 변환 방법 안녕하세요 웹아이_디혜입니다:D 파비콘?? 파비콘이 뭔지도 몰랐던 저... 그런데 이제 파비콘 만드는 법까지 포스팅하는 날이 오네요 파비콘은요 조기 보이시는거 저겁니다..ㅋㅋㅋ 만드는 방 blog.webi.kr 혹시라도 ..