Webi Blog

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

Web 27

CSS의 Width사이즈 계산 방식을 달리 해보자~ | box-sizing

퍼블리싱하실 때 Div 나 li 등의 태그 사이즈 지정해 줄 때 어떻게 하시나요? 저는 box-sizing을 알기 전에는 상당히 복잡하게 했던거 같아요 디자이너가 넘겨준 전체 사이즈에서 border 사이즈 빼고 padding 넣어줄 사이즈 빼고 남은 사이즈를 width로 넣어줬는데요. 다들 그렇게 하셨나요? 물론 디자인 파일을 받아서 작업을 하다 보니 그렇게 계산해서 작업을 한 거고 content-box 방식의 나름 장점도 있겠죠^^ width영역의 사이즈를 고정해서 주고 싶다거나 할때 말이죠 자 여기서 잠깐!! 중간 중간 box-sizing, content-box 이런 말들이 나왔는데 이게 뭐죠? 이게 바로 오늘 알아볼 CSS의 box-sizing이고요~ content-box는 box-sizing의 속..

Web/CSS 2021.09.17

PHP에서 배열을 문자열로 합치기, 문자열을 배열로 만들기 | explode, implode

안녕하세요~ 이번 시간에는 PHP의 explode와 implode에 대해서 알아보겠습니다. 간단하게 설명을 드리자면, explode는 문자열을 특정 문자로 분리해서 배열로 만들어 줍니다. implode는 배열을 특정 문자로 합쳐서 문자열로 만들어 줍니다. 이게 도대체 무슨 말?ㅎㅎ 사실 프로그램 공부하면서 제일 어려운 건 이해가 쉽지 않은 것도 있지만 이걸 왜! 어디에! 써야 하는지를 모르겠다는 게 제일 힘든 거 아닐까요? 물론 저도 처음에 공부할때 그런 어려움이 있었어요ㅠ 자! 일단 어떻게 사용하는지에 대해서 알아볼게요 string implode ( string $glue , array $pieces ) implode를 먼저 알아볼게요.. 사용법은 위와 같습니다. // 결과 a1 is: 1,2,3 a2..

Web/PHP 2021.09.07

[PHP] 원격지 파일 주소 노출 안하고 curl로 다운로드 받기

파일 다운로드를 구현할 때 아주 간단하게 a태그를 이용해서 구현을 합니다. 하지만 그렇게 할 경우 파일 경로가 아주 쉽게 노출이 되어버립니다. 보통 노출되어도 크게 상관없는 경우가 많지만 유료 클래스 상품을 구매한다거나 온라인 컨텐츠를 유료로 판매할 경우에는 파일의 경로가 노출되면 쉽게 공유가 되어버리기 때문에 노출을 막습니다. 물론 스토리지나 CDN 서비스 자체에서 경로를 알더라도 권한을 막아 불가하게 설정할 수 있지만 단순 웹호스팅을 이용하거나 보안 설정이 불가피 할 때 PHP에서 파일 경로를 노출하지 않고 원격지 파일을 다운로드를 받을 수 있는 방법을 포스팅 합니다. // 파일을 받을 권한이 있는 지 체크 if($is_guest) alert('다운로드 권한이 없습니다.'); $filepath = "..

Web/PHP 2021.09.03

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

Web/PHP 2021.08.31

영카트에서 네이버 쇼핑 디비URL, 요약URL 확인하기 | 영카트 5.2.3 이상

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

Web/PHP 2021.08.31

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

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

Web/Plugin 2021.08.30

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

오늘은 반응형 사이트 제작할 때 많이 쓰는 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의 글자크기 위 코드를 실행하게 되면 다..

Web/CSS 2021.08.30

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

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

Web/Plugin 2021.08.27

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

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

Web/PHP 2021.08.26

구글 코드 하이라이터 prettyfy를 이용해 코드를 컬러풀하게 바꿔보아요~

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

Web/Plugin 2021.08.26