Webi Blog

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

인기 글

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

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

HTML 2018.08.20 0

랜딩 사이트 디자인 시 작업 사이즈

Q. 랜딩페이지로 디자인을 하려고 하는데 한 화면에 꽉차게 보여지려면 포토샵에서 작업할 때 가로 사이즈 몇으로 해야 할까요?  A. 이미지 사이즈가 딱히 정해져있거나 하진 않습니다. 하지만 요즘 큰 모니터 해상도가 대부분 1920px이기 때문에 꽉 찬 화면으로 작업할때는 1920px로 작업하는 경우가 많습니다. 그 이상 해상도까지 커버하려고 더 큰 이미지를 사용할 경우 이미지 용량이 커져 로딩하는데 느려질 수 있습니다.

Kin 2018.07.02 0

맥에서 웹서버를 운영하자 | MAMP 설치하기

맥에서 MAMP 설치하기 영상을 드디어 촬영하였습니다. 혹시나 윈도우 사용중이신데 여기로 잘못 오셨다면 아래 링크로 가보시면 됩니다.^^ http://blog.webi.kr/221311249047 지난번에는 윈도우에서 로컬서버를 구성할 수 있는 WAMP를 설치해봤는데요... 이번에는 맥에서 로컬서버를 구성할 수 있는 "MAMP"를 설치해보겠습니다~~ 이름이 정말 직관적이네요...ㅎㅎㅎ Window + Apache + Mysql + PHP = WAMP Mac + Apache + Mysql..

Server 2018.08.25 0

그누보드만 설치해도 홈페이지가 생긴다?? | WAMP 로컬서버에 그누보드 설치하기

거인의 어깨를 통해 한단계 빠르고 쉽게 목표를 달성하는건 현명 한다고 합니다. 홈페이지 만들때 항상 들어가야하는 회원관리, 게시판 등 매번 만들 필요 없잖아요?? window 컴퓨터에 설치된 WAMP에 그누보드 설치하는 방법을 준비했습니다.^^ 아직 동영상 제작도 그렇고 설명하는 것도 초보 입니다.^^ 그래도 최대한 쉽게 설명하고자 많은 노력중이니 이해해주셔요!~~~ 댓글로 알고 싶으신 코딩이나 개발 팁이 있으시면 남겨..

PHP 2018.07.12 0

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

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

Plugin 2021.08.27 0

PHP 등급 출력 도와주세요! | 다중 if문을 이용한 등급 출력!

Q. 0-100 사이 점수를 하나 입력받는 변수를 설정하고 입력된 값이 조건에 해당하면 등급을 출력 다중 if문 사용 등급과 점수 함께 출력 하다가 잘 안되서ㅠ 도와주세요. A. 해당 문제는 다중 if문으로 해결 가능합니다.^^ 다중 if문은 if(조건1){ 조건1 True }else if(조건2){ 조건2 True }else if(조건3){ 조건3 True }else{ 모든 조건 False } 위와 같은 방식으로 사용하실 수 있습니다. 갯수는 상관없이 필요한 만큼 늘리..

Kin 2018.07.16 0

최신 글

more

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

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

CSS 2021.09.17 0

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

안녕하세요~ 이번 시간에는 PHP의 explode와 implode에 대해서 알아보겠습니다. 간단하게 설명을 드리자면, explode는 문자열을 특정 문자로 분리해서 배열로 만들어 줍니다. implode는 배열을 특정 문자로 합쳐서 문자열로 만들어 줍니다. 이게 도대체 무슨 말?ㅎㅎ 사실 프로그램 공부하면서 제일 어려운 건 이해가 쉽지 않은 것도 있지만 이걸 왜! 어디에! 써야 하는지를 모르겠다는 게 제일 힘든 거 아닐까요? 물론 저도 처..

PHP 2021.09.07 0

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

파일 다운로드를 구현할 때 아주 간단하게 a태그를 이용해서 구현을 합니다. 하지만 그렇게 할 경우 파일 경로가 아주 쉽게 노출이 되어버립니다. 보통 노출되어도 크게 상관없는 경우가 많지만 유료 클래스 상품을 구매한다거나 온라인 컨텐츠를 유료로 판매할 경우에는 파일의 경로가 노출되면 쉽게 공유가 되어버리기 때문에 노출을 막습니다. 물론 스토리지나 CDN 서비스 자체에서 경로를 알더라도 권한을 막아 불가하게 설..

PHP 2021.09.03 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-star..

PHP 2021.08.31 0

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

직접 쇼핑몰을 운영하시는 많은 분들이 지식쇼핑에 입점을 하시는데요 지식쇼핑이 신청만 해서 끝나는게 아니라는거 아시나요? 네이버에서 상품을 긁어갈 수 있도록 네이버에서 원하는 형태로 리스트를 만들어 URL 주소를 제출해야 한답니다. 물론 많은 솔루션에서 기본적으로 제공해주기도 할텐데요!~ 그 중에서 영카트를 사용하시는 분들도 손쉽게 DB URL을 사용할 수가 있습니다. 단, 영카트 버전이 5.2.3 이상이 되어야 사용..

PHP 2021.08.31 0

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

안녕하세요 :) 오늘은 오픈소스인 그누보드에 기본적으로 내장되어 있는 "owlcarousel" 플러그인 사용법을 알아보도록 하겠습니다. 만약에 그누보드에 없거나 별도로 개발을 하실 경우는 https://owlcarousel2.github.io/OwlCarousel2/ 사이트에서 직접 다운로드를 받아 사용하실 수 있습니다. :) 우선 그누보드 기준으로 플러그인의 JS 위치와 소스 위치를 알려드리겠습니다. 위에 보이는 사진처럼 owl 플러그인은 js 폴더안에..

Plugin 2021.08.30 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

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

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

Plugin 2021.08.27 0

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

여러분들 PHP로 개발하실 때 배열 많이 사용하시나요? 저는 정말 많이 사용하는데요~ 배열을 잘 사용한다면 더욱 편하게 개발할 수 있는 것 같아요~ 오늘은 배열을 JSON 형식으로 변환하는 함수에 대해서 알아보겠습니다. 다들 JSON이 뭔지 아시죠? json은 자바스크립트 언어에서 파생되어 자바스크립트의 구문 형식을 따르지만, C, C++, C#, 자바, 펄, 파이썬 등 수많은 프로그램 언어에서 쉽게 사용할 수 있는 독립형 데이터..

PHP 2021.08.26 0

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

저처럼 개발, 코딩 블로그 운영하시는 분들이나 사이트 운영하시는 분들 많으시죠? 특히 요즘은 티스토리, 블로거 같은 HTML 편집이 자유로운 블로그를 운영하시는 분들이 많은데 소스코드를 입력하실 때 어떻게 쓰시나요?? 그냥 텍스트로 입력하시나요? 위처럼 그냥 텍스트로만 입력하게 되면 너무 가독성도 떨어지고 뭔가 딱딱해 보이지 않나요?? 어렵고 힘들게 느껴질 수 있는 프로..

Plugin 2021.08.26 0

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

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

CSS 2021.08.24 0

ALT 속성이 필요한 이유!! | ALT 속성 없는 이미지 태그 쉽게 찾기

ALT 속성이 없는 이미지 태그를 쉽게 찾는 방법을 알아볼 건데요~ 잠깐! 도대체 왜 찾아야 하는 거죠?? 귀찮게.... 하지만 ALT 속성은  - 시각장애인을 위한 웹 접근성에 굉장히 필요합니다.  - SEO에 영향을 줍니다.  - 일시적인 오류로 이미지가 표시 안될 때 이미지 대신 ALT 속성 값이 표시돼요. 그렇기 때문에 최대한 넣어줄 수 있는 부분은 넣어주는 게 좋아요! 1. 시각장애인을 위한 웹 접근성에 굉장히 필요합니다...

CSS 2021.08.24 0

파비콘(ico 파일) 홈페이지에 적용하기 | HTML LINK 태그

오늘은 파비콘을 홈페이지에 적용하는 방법에 대해서 알아보겠습니다. ​ 파비콘이 뭔지 모르신다고요??? 파비콘은 즐겨찾기(favorites)와 아이콘(icon)의 합성어로 주소창이나 즐겨찾기에 표시되는 작은 아이콘이에요! 파비콘이 뭔지 아셨다면 필요한 파일도 만드실 겸 해서 아래 링크로 한번 다녀오시면 될 거 같습니다.^^ 2018.07.03 - [Web/Design] - 파비콘 만드는 법 | 이미지 파일을 ico 파일로 변환 방법 파비콘 만드는..

HTML 2021.08.23 0

배경만 반투명하게 할 때 opacity?? rgba??

HTML코딩을 하다보면 배경을 반투명 하게 해야 할 경우가 생깁니다. 흔히 많이 사용하시는 방법이 CSS의 opacity를 이용해서 투명도를 설정해주시죠? Opacity는 해당 객체의 투명도를 설정할 수 있으며 0 부터 1 까지 소수점으로 설정합니다. 예를 들어 투명도를 50% 정도 주고 싶다 한다면 opacity:0.5; 라고 사용하시면 됩니다. 하지만 opacity를 사용해서 할 경우 아주 환장하는 문제가 생깁니다. 바로 자식요소까지 모두 투..

CSS 2021.06.12 0

맥에서 웹서버를 운영하자 | MAMP 설치하기

맥에서 MAMP 설치하기 영상을 드디어 촬영하였습니다. 혹시나 윈도우 사용중이신데 여기로 잘못 오셨다면 아래 링크로 가보시면 됩니다.^^ http://blog.webi.kr/221311249047 지난번에는 윈도우에서 로컬서버를 구성할 수 있는 WAMP를 설치해봤는데요... 이번에는 맥에서 로컬서버를 구성할 수 있는 "MAMP"를 설치해보겠습니다~~ 이름이 정말 직관적이네요...ㅎㅎㅎ Window + Apache + Mysql + PHP = WAMP Mac + Apache + Mysql..

Server 2018.08.25 0