현재 가장 인기있는 글

매크로 프로그램 추천 키매크로 Key Macro 다운로드, 사용 방법, 수강신청

사용방법이 따로 필요 없을 정도로 간단한 매크로 프로그램이 있어 사용방법을 정리해보려고 한다. UI 자체가 복잡하지 않고 간단하게 매크로 설정이 가능하도록 되어있어 수강신청이나 게임 등 매크로가 필요할 때 편리하게 사용 가능하다. (윈도우에서만 사용 가능) 매크로 프로그램 Key Macro 사용방법 1. 아래 파일을 다운 받아 압축을 푼다. 2. 압축 푼 뒤, 나오는 파일 중에 key_macro.exe 파일을 클릭해서 연다. 3. 실행 중단과 편집을 선택 한 뒤, [추가]를 클릭한다. 4. 키보드 추가/마우스 추가/지연추가/문자열추가/매크로 호출 / 독점영역 추가 / 반복구간 중에서 매크로에 필요한 과정을 클릭하여 하나하나씩 추가해 주면 된다. [키보드추가] 키보드 자판 중 한 키를 누르도록 한다. 추가..

tip 2023.04.25 3

일러스트레이터 PDF 내보내기 이미지 고화질로 저장하기

일러스트레이터에서 PDF로 내보내기 하는 경우 이미지가 깨져보이는 경우가 있다. 이 경우 간단하게 설정만 바꾸면 고화질로 내보낼 수 있다. 1) 파일 > 내보내기 > 화면에 맞게 내보내기 클릭 후, 내보낼 대지를 선택한 다음 포맷을 PDF로 한 뒤, 바로 오른쪽 위쪽 톱니바퀴 아이콘을 클릭한다. 2) PDF를 선택 후, Adobe PDF 사전설정을 [고품질 인쇄]로 선택한다. 설정값 저장 후, PDF 내보내기하면 끝! (물론 고품질 인쇄로 하면 PDF 용량이 배가 커지는 단점이 있긴하다.) PDF [고품질 인쇄] 설정 전/후가 이렇게나 화질 차이가 난다. 꼭 [고품질 인쇄]로 설정하고 PDF로 내보내기!!!

tip 2023.08.24 0

택배 배송조회 주소 URL 정리 / 배송추척

쇼핑몰을 제작하다보면 각 택배사별 배송을 조회할 수 있는 링크가 필요해서 정리해보았다. 송장번호라고 적힌 부분에 송장번호(숫자만)입력하면 된다. 생각보다 택배회사가 많아서 계속해서 업데이트될 예정. 국내 택배사 CJ대한통운 https://trace.cjlogistics.com/web/detail.jsp?slipno=송장번호 조금 더 깔끔한 버전▼ https://trace.cjlogistics.com/next/tracking.html?wblNo=송장번호 CJ로지스틱스 http://ex.korex.co.kr:7004/fis20/KIL_HttpCallExpTrackingInbound_Ctr.do?rqs_HAWB_NO=송장번호 우체국택배 https://service.epost.go.kr/trace.Retriev..

tip 2023.05.26 0

[php] strpos(), strrpos(), in_array() 특정 문자열 검색하기

strpos()와 strrpos() 함수는 strstr()과 유사한 방식으로 동작한다. 하지만 strpos()의 실행 속도가 더 빠르기 때문에 strstr()대신 strpos()의 사용을 권장한다고 한다. 문장이나 특정 변수에서 특정 문자가 있는지 체크하려면 strpos(), strrpos() 함수를 사용하면 된다. strpos([대상 문자열], [조건 문자열]) strpos([대상 문자열], [조건 문자열], [검색시작위치(숫자)]) strrpos([대상 문자열], [조건 문자열]) strrpos([대상 문자열], [조건 문자열], [검색시작위치(숫자)]) 둘의 차이는 strpos 함수는 영문자의 대소문자를 구별하여 검색한다. 영문자 대소문자를 구별하지 않고 검색하려면 strrpos()함수를 사용하면 ..

php 2021.05.26 2

[php] 에러메시지 나타내기 / php 오류 찾기

php 코드작업을 하다가 제대로 작동안할 때, 일부러 에러메세지를 출력하여 어디서 오류가 났는지 확인 할 수가 있다. 아래 코드를 파일 안에 넣어준다. 그러면 아래처럼 코드를 추가한 페이지에 에러메세지가 뜨게 된다. 이 에러메세지를 확인한 후, 알맞게 코드를 수정하면 된다. 아래 메세지의 경우에는 변수들이 제대로 정확히 정의되지 않아서 발생한 에러이다. 반대로 에러메세지가 뜨는 경우, 뜨지 않게 하려면 아래 코드를 추가하면 된다.

php 2022.12.19 1

[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

[jQuery] 스크롤 이벤트 / 스크롤 특정 위치에 따라 효과 변경

스크롤 위치에 따라 요소들에 Class를 추가해준다던지, 효과를 변경할 수 있다. 현재 스크롤 위치 구하기 $(document).scrollTop(); 특정 요소의 위치 구하기 offset().top을 사용하면 문서 상단으로부터 특정 섹션, div가 있는 위치를 구할 수 있다. $("#section3").offset().top; scroll()기본 코드 $(window).scroll(function(){ var h = $(document).scrollTop(); //현재 스크롤 위치 if(h > 200) { // 스크롤 위치가 200을 넘으면 } else { } }); 응용 현재 내 스크롤 위치와 특정요소의 위치를 통해 사이트에서 다양하게 구현이 가능하다. 1) 배경색이 검정색인 섹션(#section1)..

js·jquery 2023.11.19 0

CSS로 화살표 < > 만들기

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

html·css 2021.12.21 0

디자인

more

html·css 2023.09.27 0
[CSS] nth-child / n번째부터 n번째까지 CSS 변경

특정 순서의 CSS를 변경할 때 유용한 nth-child(). 다양하게 활용이 가능하다. 3의 배수인 박스 배경 변경 .box:nth-child(3n){ background:red } 20번째 이후 모든 박스 배경 변경 /* 22번 부터 이후 모든 box 폰트색 변경 */ .box:nth-child(n+20) { background:red } 1번째부터 5번째까지 박스 배경 변경 1번째부터 지정할때는 -n으로 시작하는 것 주의 .box:nth-child(-n+6) { background:red } 15번째부터 20번째까지 박스 배경색 변경 .box:nth-child(n+15):nth-child(-n+20) { background:red } 마지막에서 3번째 박스 변경 .box:nth-last-child(..

html·css 2023.09.04 0
audio/video 태그 다운로드, 재생속도 메뉴 없애기

audio태그를 이용해서 음악을 넣으면 아래처럼 ... 버튼을 누르면 다운로드, 재생속도를 조절할 수 있는 메뉴가 뜨게 된다. 이 메뉴가 뜨지 않게하려면 태그 사이에 controlsList="noplaybackrate nodownload nofullscreen"을 추가하면 된다. noplaybackrate -> 재생속도 메뉴 안보이게 nodownload -> 다운로드 메뉴 안보이게 nofullscreen -> 영상의 경우 풀스크린 안되게 코드

디자인 2023.08.01 0
무료 캘리그라피 손글씨 한글 폰트 다운로드

디자인하면서 간혹 캘리그라피 같은 손글씨 폰트가 필요할 때가 있는데 매번 찾기도 번거로워서 자주 사용하는 폰트들을 한번 정리해보고자한다. 손글씨체도 디자인에 다용도로 활용하기 어려운 애매한 폰트들이 많은데 이 폰트들은 깔끔하고 뭔가 프로페셔널해보이는 손글씨라 다용도로 활용하기 좋다. 더군다나 무료 사용이 가능하다는 점! (다만, 자세한 허용범위는 각 홈페이지를 참고!) 1. 제주한라산 제주특별자치도의 상징성과 문화적 고유성을 살리고, 국제도시로서 디자인적 예술적 품격을 갖춘 문화예술의 이미지를 담은 미래 지향적 서체 ■ 개인/기업/상업적인 용도 사용 가능 ■ 다운로드 : https://jeju.go.kr/jeju/symbol/font/infor.htm 2. 상상토끼 꽃길 사방간데 넘실데는 꽃길처럼 비단색..

html·css 2023.07.10 1
부트스트랩 모달창 검정 배경 아래로 뜰 때 해결 방법 (Bootstrap Modal)

버튼이나 다양한 요소를 클릭시에 모달창을 쉽게 뛰울 수 있어 활용도가 높은 부트스트랩 모달창 부트스트랩 공식 홈페이지에 나와 있는대로 부트스트랩 스크립트와 CSS만 로드하면 쉽게 모달창을 띄울 수있다. https://getbootstrap.com/docs/4.0/components/modal/ Modal Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content. getbootstrap.com 다만, 사용할 페이지 코드에 따라서 일부 변경이 필요한데 다른 CSS코드와 겹쳐서 종종 모달창이 백그라운드보다 아래쪽에 위치하는 경우가 ..

개발

more

js·jquery 2024.02.27 0
자바스크립트 예약어

예약어(Reserved Words)는 자바스크립트에 먼저 등록된 요소를 말한다. 이 예약어는 변수, 라벨, 펑션 네임으로 사용할 수 없다. 변수, 라벨 등에서 사용할 수 없는 예약어 arguments break case continue default do else false for function if null return super switch this true try typeof var void while with 예시 //사용가능 var apple = a; var name = a; //사용불가 var arguments = a; var if = a; var do = a; var default = a; 생각보다 많은 예약어가 있는데 아래 표 참고 참고 : https://www.w3schools.com/..

js·jquery 2023.11.19 0
[jQuery] 새로고침 시 스크롤 위치 맨위로 리셋해주는 스크립트

스크롤을 내려 페이지를 보다가 새로고침 하는 경우, 브라우저가 이전 스크롤 위치를 기억하였다가 해당 스크롤 위치 그대로 보여준다. 새로고침 할 때, 이전 위치가 아닌 가장 위로 보여주고 싶은 경우 아래 코드를 넣어주면 된다. 문서 로드시, 자동으로 scrollTop: 0 을 적용하여, 문서 맨 위로 로드될 수 있도록 해준다. $(function(){ $("html, body").animate({ scrollTop: 0 }, "fast"); });

js·jquery 2023.11.19 0
[jQuery] 스크롤 이벤트 / 스크롤 특정 위치에 따라 효과 변경

스크롤 위치에 따라 요소들에 Class를 추가해준다던지, 효과를 변경할 수 있다. 현재 스크롤 위치 구하기 $(document).scrollTop(); 특정 요소의 위치 구하기 offset().top을 사용하면 문서 상단으로부터 특정 섹션, div가 있는 위치를 구할 수 있다. $("#section3").offset().top; scroll()기본 코드 $(window).scroll(function(){ var h = $(document).scrollTop(); //현재 스크롤 위치 if(h > 200) { // 스크롤 위치가 200을 넘으면 } else { } }); 응용 현재 내 스크롤 위치와 특정요소의 위치를 통해 사이트에서 다양하게 구현이 가능하다. 1) 배경색이 검정색인 섹션(#section1)..

php 2023.11.07 0
[php] Undefined variable, Undefined index 에러 해결

php 에서 Undefined variable, Undefined index 에러메세지는 값(변수)이 제대로 정의되지 않아 발생하는 오류이다. 값이 없는 경우를 대비해서 아래처럼 미리 지정을 해주어야한다. [에러 해결방법] isset()를 사용한 변수 선언 에러메세지가 Undefined variable : XX in /web/home/, Undefined index : XX in /web/home/ 이런식으로 뒤에 어떤 변수에 대한 오류인지 뜰텐데, 해당 변수를 isset()함수를 사용하여 값을 정해줘야한다. 해당 변수에 대한 값이 있으면 해당값을 보여주고 아니면 공백으로 값을 전달할 수 있도록 해야한다. $value = isset($_POST['value']) ? $_POST['value'] : '';..

js·jquery 2023.11.06 0
[jQuery] Swiper 슬라이더 버튼 컬러 변경 (Navigation, Pagination)

Swiper 스와이퍼 슬라이더 기본 코드 https://swiperjs.com/ Swiper - The Most Modern Mobile Touch Slider Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. swiperjs.com Slide 1 Slide 2 Slide 3 Slide 4 Slide 5 위와 같이 기본 CSS를 불러와 사용하면 아래처럼 모든 버튼들 컬러가 파란색으로 보여진다. Navigation, Pagination 컬러 변경 네비게이션, 페이지네이션의 파란색을 다른 색으로 변경하는 방법은 아주 간단하다. 아래와 같이 테마 컬러..

TIP

more

tip 2024.03.27 0
[그누보드/영카트] 글쓰기시 이모지 사용하기

그누보드 영카트 게시판에서 이모지를 등록하면 물음표로 뜨게 된다. 이 경우 CHARSET을 변경해주어야한다. 1. DB 기본 셋팅 변경 ALTER TABLE `yourDBName`.`yourTableName` CONVERT TO CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci; 2. config.php 파일 변경 기존 define('G5_DB_CHARSET', 'utf8'); 변경 define('G5_DB_CHARSET', 'utf8mb4'); 3. /adm/sql_write.sql 기존 ENGINE=MyISAM DEFAULT CHARSET=utf8; 변경 ENGINE=MyISAM DEFAULT CHARSET=utf8mb4; utf8이라 되어있는 부분을 utf8mb..

tip 2024.01.15 0
그누보드 게시판 게시물 연도별로 보기

갤러리나 게시판 게시글이 많아지면 카테고라이징이 필요한 경우가 생긴다. 그누보드에서 게시판에 카테고리를 생성하여, 글 등록시에 카테고리를 선택할수도 있지만 날짜에 따라 자동으로 카테고라이징 하여 볼 수 있게 추가 카테고리를 추가하는 작업을 하였다. 예시화면 기본적으로 현재 연도에 해당하는 게시물만 보여지며, 게시판 우측 상단에서 연도를 선택한 뒤 '이동하기'를 클릭하면 해당 년도에 속하는 게시물만 볼 수 있도록 하는 기능이다. 코드 수정 방법 나의 경우에는 날짜를 게시물 등록 날짜가 아닌 사진을 찍은 날짜로 선택해서 등록할 수 있도록 하여서 날짜부분이 여분필드인 wr_1로 되어있는데, 게시물 등록날짜로 구분하고 싶은 경우에는 wr_1을 wr_datetime으로 변경해서 사용하면 된다. 1) /bbs/ca..

tip 2023.10.20 1
구글 사이트 등록하기 / 구글 서치콘솔 사용 방법 SEO

1. 구글 사이트 등록 전 - SEO 설정 구글 사이트 등록하기전에 홈페이지 사이에 메타태그를 적절히 넣어줘야한다. SEO 메타태그 관련한 자세한 내용은 아래 포스팅 참고 https://hongpage.kr/14 [네이버 웹마스터도구] 웹사이트 빠르게 등록하는 팁 ① 메타태그 설정 네이버에 사이트 등록하기 (네이버 웹마스터도구) STEP 1. 메타태그 삽입 네이버 또는 다른 포탈사이트에 내 홈페이지를 등록하기 위해서는 몇가지 설정을 해야하는데 그 중 가장 먼저 해야할 일 hongpage.kr 2. 구글 사이트 등록하기 1) 구글에 사이트 등록은 서치콘솔에서 가능하다. https://search.google.com/search-console?hl=ko 에 접속한 뒤, 오른쪽 URL 접두어 란에 사이트 주소..

tip 2023.10.20 0
다음 사이트 등록 방법 / 검색엔진 SEO

다음 검색시 사이트가 뜨게 하려면 다음에 사이트 등록을 하면 되는데, SEO설정 없이 간단하게 아래와 같이 신청하면 하면 된다. 다음 사이트 검색 등록하기 1. 다음 검색등록 페이지(https://register.search.daum.net/index.daum)에 접속한 뒤, 가운데 등록화면 URL에 등록할 홈페이지 주소를 입력한다. 2. 개인정보 및 서비스 이용 동의에 체크 후 [확인]을 누른다. 3. 검색시 나오게할 정보들을 입력하면 된다. 1) 제목(필수) : 사이트이름 2) 모바일 URL : 별도의 모바일 홈페이지 주소가 있는 경우 적어준다. ex) 카페24 쇼핑몰의 경우 기존 주소 앞에 m. 붙은 모바일 주소 3) 설명 : 검색시 사이트이름 아래에 나오는 설명 4) 설명-품목 (필수) : 검색시..

tip 2023.09.27 0
.htaccess 파일 이용하여 짧은 주소 만들기 / 리다이렉션

홈페이지에 대한 기본적인 설정을 할 때 유용하게 쓰이는 .htaccess 파일 이 파일에서 정의를 하면 긴 주소도 짧게 사용이 가능하다. 리다이렉션 기본 코드 에디터에 아래와 같이 작성 한 뒤, 서버 가장 상위 폴더에 업로드하면 된다. RewriteEngine On RewriteBase / RewriteRule 줄일주소 /기존주소 [L] 한줄한줄씩 해석을 해보자면 아래와 같다. RewriteEngine On

리뷰

more

[책리뷰] 모든 비즈니스는 브랜딩이다 - 브랜딩 마케팅 기본서 추천

책의 제목처럼 요즘 모든 일에 브랜딩이 필요함을 느끼고, 그 중요성을 느끼고 있다. 단순히 브랜딩이 디자인이 아니라는 것을 알고는 있었지만 어디부터 어떻게 시작해야할지 막막해서 읽게 된 책. 브랜딩의 컨셉 구축 부터 실제 소비자의 인식으로 이어지기까지의 모든 과정을 쉽게 이해할 수 있도록 쓰여있어 술술 읽기에 좋았다. 다양한 사례들이 있어서 이런 이론이 적용되었구나 무릎을 탁 치면서 재미있게 읽었다. 한번 읽고 100% 적용하기에는 어렵겠지만 조금씩 실제 비즈니스에 적용해보도록 해야겠다. (다 읽은 날짜 2023년 7월 9일) 모든 비즈니스는 브랜딩이다 / 홍성태 지음 브랜드관리 = 컨셉을 관리하는 것 브랜드 컨셉의 7C 브랜드 체험의 7E 고객지향성 (Customer Orientation) 응축성 (C..

리뷰 2023.07.09 0

레오폴드 키보드 FC900R AS 수리 후기

2년전쯤 구입해서 잘 사용하고 있던 레오폴드 키보드 FC900R. 평소 컴퓨터를 많이 하다보니, 키보드를 많이 치기도 하고, 컴퓨터 앞에서 커피도 마시고, 한번은 콜라를 제대로 쏟은 적이 있는데.. 물티슈로 다 닦고 물기를 완전히 제거했다고 생각했는데 콜라의 설탕의 끈적인게 남았는지 어느날인가부터 갑자기 Ctrl 키가 먹지 않았다. 키보드 연결의 문제인가 하고, 연결도 다시 해보았지만 Ctrl 키 자체가 고장난 것 같아 AS를 맡겨보기로 했다. 아니 왜 Ctrl키만 안먹히는거냐고요... 레오폴드 A/S 비용 보증서에는 구입 후, 1년간 무상 A/S처리되고, 기간이 끝난 후 제품에 문제가 발생할 경우 유상처리 된다고 되어있었다. 그리고 레오폴드 홈페이지를 확인하니 키를 교체하는 것 자체는 크게 비용이 들지..

리뷰 2023.04.27 0

[클래스101 강의] 트렌드코리아 2023, 김난도 교수

트렌드코리아는 한 해의 트랜드를 미리 공부하기 위해 종종 책으로 접했는데, 클래스 101에서 강의로 나오게 되어 보게 되었다. 강의로 보니 이야기 듣듯이 편하게 볼 수 있어서 휘리릭 보기 좋았다. 강의 들으면서 기억해두기 위해 적은 것들 정리해 본다. 서울대 소비트렌트 분석센터의 2023 전망, 트렌트코리아 2023 더 높은 도약을 준비하는 검은 토끼의 해 2023 Trend Keyword 'RABBIT JUMP' [R]edistribution of the Average : 평균실종 정규분포가 아닌 집단이 많아져 평균이 의미가 없어짐. 1) 양극화 : 어정쩡한 소비를 하지 않고, 고가품과 초가성비 상품이 동시에 인기 2) 다극화, N극화 : 사람마다 취향이 다양화됨. 고객 한사람 한사람을 위한 제품이 생..

리뷰 2023.01.10 0