현재 가장 인기있는 글

파비콘(favicon) 만들어주는 사이트 추천, 웹사이트에 적용하기

파비콘(Favicon)이란? 인터넷 웹 브라우저의 주소창에 표시되는 웹사이트나 웹페이지를 대표하는 아이콘이다. 최근 네이버 검색 결과에 파비콘이 노출되면서 파비콘의 중요성이 더 높아진 것 같다. 단순히 16*16 사이즈로 ico를 만들어서 적용할 수 도있지만, 디바이스 크기가 다양해진 만큼 어느부분에 파비콘이 어떻게 보여질지 몰라 획일화된 사이즈 보다는 다양한 사이즈로 등록해두는 것이 좋을 것 같은 개인적인 생각이 든다. 파비콘 사이즈를 직접 사이즈별로 만들지 않아도, 다양한 사이즈로 자동으로 파비콘을 만들어주는 사이트를 추천하고자한다. 파비콘 만드는 방법 1. 우선 포토샵이나 이미지툴로 192*192 픽셀의 이미지를 만든다. 이미지 확장자는 png나 jpg이면 상관없다. 2. www.favicon-ge..

html·css 2021.02.09 2

javascript + ajax 오류 해결하는 여러가지 방법

javascript로 ajax를 활용하여 값을 저장 불러올때 오류가 나는 경우, 아래와 같은 코드를 추가해주면 어디서 오류가 나는지 알 수 있다. success: function(result) { if (result) { alert("완료"); } else { alert("전송된 값 없음"); } }, error: function() { alert("에러 발생"); } [적용예시] $.ajax({ type:"POST", url:"/shop/ajax_uploader.php", data: { it_id : it_id, is_id : is_id }, contentType: "application/json", success: function(result) { if (result) { alert("완료"); } ..

js·jquery 2021.07.22 0

CSS로 화살표 < > 만들기

슬라이더를 사용하거나 버튼에 들어갈 이런 화살표가 필요한 경우, 예전에는 이미지로 많이 넣었지만 요새는 디바이스 크기가 너무나도 다양해져서 해상도에 따라서 좀 깨져보이기도 한다. 어느 상황에서도 깨져보이지 않게 css로 그려보도록 했다. ::after 요소를 사용해서 border를 넣어 각도를 조절하면 쉽게 화살표를 만들 수 있다. 비슷하게 "CSS만으로 X 버튼 만드는 두가지 방법" 은 이 글 참고 CSS만으로 X 버튼 만드는 두가지 방법 닫기 버튼 만드는 경우 그냥 X 쓰기에는 세로로 긴 알파벳 모양이라 디자인적으로 좀 그렇고, 이미지로 사용하기에는 살짝 귀찮고했는데, CSS 만으로 X 버튼 만들기가 가능하다는 사실!! 첫번째 hongpage.kr CSS 코드 .arrow { position:..

html·css 2021.12.21 0

[포토샵] 이미지 색상이 이상하게 보일 때 | 모니터 색상과 포토샵 색상 맞추는 방법 sRGB IEC61966-2.1

최근 모니터를 바꾸고 난 뒤, 포토샵에서 이미지를 열면 이미지가 이상하게 탁해보이는 증상이 생겼다. 이미지 파일을 이미지 뷰어로 보았을 때는 원래 색상대로 잘 나오는데, 포토샵으로 이미지를 열었을 때, 또는 포토샵으로 수정한 뒤 저장했을 때 색감이 이상하게 바뀌었다. 이 문제는 모니터 색상 설정과 포토샵 색상설정이 일치하지 않아 발생하였다. 따라서 제어판 설정과 포토샵 설정을 모두 바꿔줘야한다. 모니터 색상과 포토샵 색상이 일치하지 않을 때 해결 방법 제어판 색관리 설정 변경 1. 제어판 > 색 관리에 들어가서 '이 장치에 내 설정 사용'에 체크한다. 2. '이 장치에 연결된 프로필' 아래의 [추가] 버튼을 클릭한다. 3. 목록에서 sRGB IEC61966-2.1을 찾아 선택한 뒤, 확인을 클릭한다. 3..

tip 2022.01.07 2

[CSS] 무한 회전하는 이미지

브랜드 홈페이지에서 로고를 무한으로 회전시켜서 임팩트 있는 UI를 만드는것이 최근 자주 보이는 것 같다. 무한 회전하는 이미지를 CSS로만 구현이 가능하다는 사실! 코드는 매우 간단하다. .img {animation: rotate_image 6s linear infinite;transform-origin: 50% 50%;} @keyframes rotate_image{ 100% { transform: rotate(360deg); } } animation: rotate_image 6s linear infinite; rotate_image 라는 이름을 가진 키프레임을 실행시켜라 6s : 6초에 한번씩 (animation-duration) linear : 동일한 속도로 (animation-timing-funct..

html·css 2021.04.19 0

ajax 순서대로 여러번 사용하기 (Promise, then)

ajax란? AJAX란 비동기 자바스크립트와 XML (Asynchronous JavaScript And XML)을 말한다. 간단히 말하면, 서버와 통신하기 위해 XMLHttpRequest 객체를 사용하는 것을 말한다. JSON, XML, HTML 그리고 일반 텍스트 형식 등을 포함한 다양한 포맷을 주고 받을 수 있다. AJAX의 강력한 특징은 페이지 전체를 리프레쉬 하지 않고서도 수행 되는 "비동기성"이다. 이러한 비동기성을 통해 사용자의 Event가 있으면 전체 페이지가 아닌 일부분만을 업데이트 할 수 있게 해준다. 출저 : MDN Web docs 정리하자면 ajax의 가장 큰 특징 두가지는 페이지 새로고침 없이 서버에 요청하고, 서버로부터 데이터를 받고 작업을 수행한다는 것이다. 아마 웹이나 앱개발을..

js·jquery 2022.02.17 0

CSS만으로 X 버튼 만드는 두가지 방법

닫기 버튼 만드는 경우 그냥 X 쓰기에는 세로로 긴 알파벳 모양이라 디자인적으로 좀 그렇고, 이미지로 사용하기에는 살짝 귀찮고했는데, CSS 만으로 X 버튼 만들기가 가능하다는 사실!! 첫번째 방법 : content: "\00d7" 를 활용 :after 에 content: "\00d7"; 만 추가해주면 아주 간단하게 X 버튼이 가능하다. .close {display:inline-block;*display:inline;} .close:after {display: inline-block;content: "\00d7"; font-size:15pt;} 그러면 이렇게 딱 깔끔한 X 버튼을 만들 수 있다. 크기는 font-size로 조정하면 되고 크기를 키울 수록 굵기가 자동으로 굵어진다. 두번째 방법 : tran..

html·css 2021.09.16 1

[jQuery] 스크롤 따라다니는 퀵메뉴 만들기

예전에 한 때 홈페이지에 항상 퀵메뉴가 있던 시절이 있었는데, 없어지는 듯 하다가 요새 다시 보이는 듯 하다. 아무래도 쇼핑몰이나 고객의 요구에 빨리 응해야하는 사이트에서는 퀵메뉴가 필수불가결한 요소인 것 같다. 보통 오른쪽에 완전히 고정해두는 형태(position:absolute)로 넣을 수도 있지만 완전 고정해두면 좀 유연성이 없어보이고(?) 너무 큰 사이즈로 넣는다면 사이트의 다른 구성요소보다 더 이목이 집중되는 느낌... 요새는 아래처럼 작은메뉴를 만들어 스크롤 내릴때 마다 부드럽게 따라오는 형태로 많이 사용하는 것 같다. jquery를 활용하면 부드럽게 따라오는 메뉴를 만들 수 있다. 일단 결과물은 아래 HTML 퀵메뉴를 구성하고 클래스값(quickmenu)이나 아이디를 지정한다. 등급별혜택 1..

js·jquery 2021.04.15 0

디자인

more

html·css 2021.12.29 0
[CSS] window.print() 머리글, 바닥글 없애기

프린트할 페이지 안에 아래와 같은 버튼을 넣으면 해당 페이지를 인쇄할 수 있는 창이 뜨게 된다. 하지만 이 인쇄창에는 머리글, 바닥글이 기본적으로 나오게되고 불필요한 정보들을 담고 있다. 사용자가 인쇄창 옵션에서 머리글과 바닥글에 해제해서 인쇄해도 되지만 따로 설정을 하지 않아도 머리글과 바닥글이 인쇄가 되지 않게 설정하도록 하려고한다. 방법 방법은 바로 css를 이용하는 것! 인쇄할 페이지 내에 아래의 코드를 넣어준다. 머리글과 바닥글은 페이지의 여백이 있어야 넣을 수가 있는데, 페이지의 여백을 아예 없애주어 머리글과 바닥글이 들어가지 못하도록 하는 원리이다. css코드 @media print { @page { margin: 0; } body { margin: 1.6cm; } } 결과 인쇄페이지의 머리..

html·css 2021.12.21 0
CSS로 화살표 < > 만들기

슬라이더를 사용하거나 버튼에 들어갈 이런 화살표가 필요한 경우, 예전에는 이미지로 많이 넣었지만 요새는 디바이스 크기가 너무나도 다양해져서 해상도에 따라서 좀 깨져보이기도 한다. 어느 상황에서도 깨져보이지 않게 css로 그려보도록 했다. ::after 요소를 사용해서 border를 넣어 각도를 조절하면 쉽게 화살표를 만들 수 있다. 비슷하게 "CSS만으로 X 버튼 만드는 두가지 방법" 은 이 글 참고 CSS만으로 X 버튼 만드는 두가지 방법 닫기 버튼 만드는 경우 그냥 X 쓰기에는 세로로 긴 알파벳 모양이라 디자인적으로 좀 그렇고, 이미지로 사용하기에는 살짝 귀찮고했는데, CSS 만으로 X 버튼 만들기가 가능하다는 사실!! 첫번째 hongpage.kr CSS 코드 .arrow { position:..

html·css 2021.09.16 1
CSS만으로 X 버튼 만드는 두가지 방법

닫기 버튼 만드는 경우 그냥 X 쓰기에는 세로로 긴 알파벳 모양이라 디자인적으로 좀 그렇고, 이미지로 사용하기에는 살짝 귀찮고했는데, CSS 만으로 X 버튼 만들기가 가능하다는 사실!! 첫번째 방법 : content: "\00d7" 를 활용 :after 에 content: "\00d7"; 만 추가해주면 아주 간단하게 X 버튼이 가능하다. .close {display:inline-block;*display:inline;} .close:after {display: inline-block;content: "\00d7"; font-size:15pt;} 그러면 이렇게 딱 깔끔한 X 버튼을 만들 수 있다. 크기는 font-size로 조정하면 되고 크기를 키울 수록 굵기가 자동으로 굵어진다. 두번째 방법 : tran..

html·css 2021.04.19 0
[CSS] 무한 회전하는 이미지

브랜드 홈페이지에서 로고를 무한으로 회전시켜서 임팩트 있는 UI를 만드는것이 최근 자주 보이는 것 같다. 무한 회전하는 이미지를 CSS로만 구현이 가능하다는 사실! 코드는 매우 간단하다. .img {animation: rotate_image 6s linear infinite;transform-origin: 50% 50%;} @keyframes rotate_image{ 100% { transform: rotate(360deg); } } animation: rotate_image 6s linear infinite; rotate_image 라는 이름을 가진 키프레임을 실행시켜라 6s : 6초에 한번씩 (animation-duration) linear : 동일한 속도로 (animation-timing-funct..

UX·UI 2021.04.16 0
앱디자인 | 유저 플로우 툴 추천 - Overflow / user flow tool

Adobe XD로 앱 화면을 60페이지 넘게 작업을 마치고... 이 많은 내용을 어떻게 하면 개발자에게 잘 전달할 수 있을까 고민을 많이 했다. XD에서 프로토타입을 바로 만들어볼 수도 있지만, 개발자나 기획자에게 유저플로우를 한번에 이해시키기에는 한눈에 도식화 할 필요가 있었다. 여기저기 알아보다가 알게된 툴이 있는데 아주 좋은 것 같다! Overflow 툴 소개 The world's first user flow diagramming tool tailored for designers. Build and present beatiful user flow diagrams that tell a story. 오버플로우는 세계 최초 디자이너에게 최적화된 유저플로우 도식화 툴이다. 스토리를 말해주는 아름다운 유저플..

개발

more

js·jquery 2022.12.07 0
[jQuery] 모바일/PC 디바이스 구분하여 스크립트 다르게 보여주기

디바이스 화면 크기에 따라 스크립트를 다르게 적용(반응형)하는 방법은 아래 글 참고! (화면 크기만으로 구분하므로, PC이더라도 화면 크기가 작아지면 모바일 버전으로 나오게 된다.) https://hongpage.kr/20 [jQuery] 디바이스 크기별로 jquery 스크립트 다르게 불러오기 (반응형) 홈페이지가 반응형인 경우, 디바이스 크기별 jQuery 스크립트를 다르게 불러와야하는 경우가 종종있다. 같은 슬라이더를 쓰더라도 PC버전과 Mobile 버전의 속성을 다르게 할 수도 있는데 아래와 같 hongpage.kr 아래의 방법은 디바이스 크기가 아니라 디바이스 기종에 따라서 모바일과 모바일이 아닌 경우를 구분하는 제이쿼리 스크립트이다. 따라서 PC에서 화면을 작게한다해도 모바일 스크립트가 적용되지..

php 2022.11.10 0
[php] Warning: Illegal string offset 'file' 오류수정

파일을 수정한 적도 없는데, 어느 날 갑자기 게시판 글 수정 페이지에서 파일 에러 문구가 떴다. Warning: Illegal string offset 'file' in /web/home/xxx/html/skin/board/basic/write.skin.php on line 156 Warning: Illegal string offset 'source' in /web/home/xxx/html/skin/board/basic/write.skin.php on line 157 Warning: Illegal string offset 'size' in /web/home/mymoodae/html/skin/board/basic/write.skin.php on line 157 글 신규 등록시에는 뜨지 않는 에러인데, 첨부..

php 2022.11.04 0
[php] PHPExcel 엑셀로 데이터 다운받기

1. PHPExcel 다운받기 PHPExcel은 데이터를 엑셀로 다운받을 수 있게 해주는 라이브러리이다. https://github.com/PHPOffice/PHPExcel 홈페이지에서 다운받거나 아래 파일을 다운 받는다. 2. 다운로드 파일 코드 별도의 php파일을 만든 후, 파일 상단에 include_once('/PHPExcel.php');를 넣어 PHPExcel.php을 불러온다. include_once('/PHPExcel.php'); 그 다음으로 SQL문 등 데이터를 가져오는 구문들을 넣어주고 $rows[] = array(1열데이터,2열데이터, 3열데이터, 4열데이터, 5열데이터); 이런식으로 array()안에 데이터를 콤마로 구분하여 넣어준다. 나는 세개의 시트로 나누어서 다운받게 할 예정이라 ..

js·jquery 2022.10.25 0
Swiper 슬라이더 익스플로러에서 작동 안될 때 해결 방법

다양한 옵션과 효과를 제공하여 홈페이지에서 많이 사용하고 있는 Swiper 슬라이더. 작업을 다 하고 브라우저별로 확인하는데 익스플로러에서는 Swiper 작동이 안되는 불상사가. 여기저기 헤매던 중 해결 방법을 찾게 되었다. 바로 Swiper버전을 낮추는 것! https://cdnjs.com/libraries/Swiper/ Swiper - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers Most modern mobile touch slider and framework with hardware accelerated transitions - Simple. Fast. Reliable. Cont..

js·jquery 2022.10.18 0
jquery | .not() 특정 선택자만 제외하기

.not() jquery 선택자 중에 특정 요소(특정 클래스, 특정 아이디)만 제외하고 싶은 경우 아래와 같이 사용하면 된다. .not(selector) 사용 예시 1) 클래스명이 link인 것만 제외한 a 태그 $('a').not('.link').css(); 2) 링크 주소가 #인 것만 제외한 a태그 $('a').not('[href^=#]').css(); 3) 클래스명이 content 가 아닌 #section $('#section').not('.content').css(); .not() 여러개 지정하기 아래와 같이 두가지 방법으로 사용 가능하다. [방법1] 선택자(여기서는 a태그) 밖에 .not()을 사용하여 '제외할 선택자1, 제외할선택자2' 로 표기한다. ※ 주의 ※ 작은 따옴표 안에 제외할 선택자..

TIP

more

tip 2022.11.04 0
.pem 파일 <-> .ppk파일 키파일 확장자 변환하기

ppk vs. pem 이란? ppk 파일은 PuTTY Private Key file의 약자로 PuTTY 프로그램에서 사용하기 위한 키파일 확장자이고, pem은 Privacy Enhanced Mail의 약어로 Base64의 인코딩으로 이루어진 인증서 파일이다. 아마존 클라우드 서비스에서 프라이빗 키파일을 .pem 파일로 다운받아 사용하게 되는데 윈도우에서 FTP을 접속하거나, PuTTY 를 이용하려면 .ppk 형식의 확장자로 파일이 필요하다. 또는 .ppk 형태로 키파일을 관리하다가 맥북에서 FTP접속할 때는 .pem파일로 필요하게 되는 경우가 있다. 이 경우 상황에 맞추어 .pem .ppk 변환과정이 필요한데 방법은 아래와 같다. [공통] Puttygen 설치하기 컴퓨터에 Puttygen이 설치되어있지 ..

tip 2022.10.18 0
pdf 홈페이지에 임베드 하는 방법 / PDF 미리보기 기능

와 같은 방식으로 PDF를 링크를 걸면 디바이스에 따라 간혹 바로 보여지기도하고, 다운 받아지기도하는데 웹사이트에서 PDF 를 다운받지 않고 무조건 바로 볼수 있도록 (미리보기처럼) 하는 방법을 정리해보려고 한다. 첫번째 방법 : 사이에 넣어주면 된다. 두번째 방법 : embed 태그를 사용해 pdf를 임베드하는 방식이다.가장 직관적인 방법이라 할 수 있겠다. embed 경로를 pdf 경로로 넣고, type="application/pdf"를 넣어준다. 위의 두 방법은 간혹 익스플로러에서 제대로 작동하지 않을때가 있다. 따라서 세번째 방식이 가장 적합한 것 같다. 세번째 방법 : 구글 드라이브를 활용한 마치 구글드라이브에 업로드 하여 보여주는 듯한 효과로 브라우져에 상관없이 잘 작동한다. 경로를 https..

tip 2022.04.04 0
카페24 갤러리 게시판 썸네일 크기 변경하기

카페24 갤러리 목록페이지(list.html) 썸네일을 아무리 고화질로 업로드해도 자체적으로 리사이즈가 되어 보여 깨져보인다. 관리자페이지에서 리사이즈 크기를 따로 설정할 수 있는 곳이 없는 것 같다. 코드로 직접 수정해주는 방법 밖에 없다. 썸네일을 리사이즈하지 않고, 원본크기를 불러오는 방식이다. 스킨편집에서 /board/gallery/list.html 파일을 수정하면 된다. 기존에 {$img_src}로 이미지를 불러오는데 이 경로를 /file_data/카페24아이디/{$real_filename} 로 변경해주면 된다. 썸네일로 이미지 원본을 불러오는 것이니 리스트 페이지 로드가 느려지지 않게 적절한 크기로 썸네일을 업로드 해주어야한다. 변경전 변경후

tip 2022.03.15 0
카페24 서브도메인 설정하기 / 2차도메인 추가

abc.com의 도메인을 쓰고 있는데, en.abc.com 처럼 기본 도메인 앞에 특정한 문자를 추가해 서브도메인을 사용하고 싶은 경우 카페24에서 쉽게 설정할 수 있다. 동일한 사이트에 한글/영문버전으로 나눠서 사용하는 경우 서브도메인을 많이 사용한다. 아래의 설명은 카페24 기준으로 설정 방법을 설명하지만, 가비아나 다른 서비스도 설정 방법은 비슷하다. 서브도메인이란? 도메인 네임 시스템(DNS) 계층에서 서브도메인(subdomain) 또는 하위 도메인은 다른 주도메인의 일부인 도메인이다. 예를 들어 example.com이라는 웹사이트의 일부로서 온라인 스토어를 제공하게 된다면 서브도메인 shop.example.com을 사용할 수 있다. (출저 : 위키백과) 카페24 서브도메인 설정 방법 1. 카페2..

tip 2022.03.03 0
SmartEditor2 스마트에디터 기본 글꼴 변경하기

SmartEditor2 (스마트에디터2)란? WYSIWYG 모드 및 HTML 편집 모드와 TEXT 모드를 제공하고, 자유로운 폰트 크기 설정 기능, 줄 간격 설정 기능, 단어 찾기/바꾸기 기능 등 편집에 필요한 다양한 기능을 제공하는 네이버에서 만든 에디터 http://naver.github.io/smarteditor2/user_guide/ SmartEditor2 사용자 가이드 · GitBook No results matching "" naver.github.io 스마트에디터의 기본글꼴은 돋움 9pt로 초기 설정되어있다. 스마트에디터 글꼴 목록에 글꼴 추가하는 방법 1) 스마트에디터를 불러오는 스크립트 내의 옵션 htParams 안에 한줄 추가한다. aAdditionalFontList : [["Noto ..