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

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

티스토리 글 하단 하트 클릭하는 부분에 "이 글이 도움되셨다면 하트를 눌러주세요" 안내 문구를 넣는 방법을 공유하고자한다. 이런 문구가 있다면 글에 도움을 받은 분들이 조금 더 적극적으로 하트를 누르지 않을까해서 안내 멘트를 넣게 되었다. 방법은 아주 간단하다. 스킨편집에 들어가서 HTML 파일에서 ctrl+f를 눌러 을 찾아 로 교체하고, 그 아래 코드를 추가해준다. 아래 코드로 교체한다. 이 글이 도움 되셨다면 하트를 눌러주세요. 위치 조정하기 스킨마다 CSS가 조금씩 달라서 혹시 위치가 잘 안맞는다면 top:-120px 부분의 숫자를 조정하면 된다. 음수의 숫자를 더 크게할수록 더 위로 올라가고, 작게 할수록 더 내려간다. .heart_tooltip {position:absolute;left:0;t..

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

bxSlider 다양한 옵션을 제공해주어 사용하기가 편해 웹에서 많이 사용되는 이미지슬라이더 bxslider https://bxslider.com/ jQuery Content Slider | Responsive jQuery Slider | bxSlider Coded with ♥ by bxslider.com bxSlider 깃허브를 확인해보니 responsive jQuery content slider 라고 써있다. 어느 기기에서나 조정이 되는 Fully responsive 라고... 기존 bxSlider bxSlider는 기본적으로 반응형을 제공하기는 하지만 화면을 줄이면 전체적으로 사이즈가 작아지는 것일 뿐, 보여지는 슬라이드 갯수를 반응형으로 조절해주지는 않는다. 화면이 작아지는데 슬라이드 갯수를 그대..

자바스크립트에서 유용하게 사용되는 onclick. 모든 브라우저에서 지원이 된다. 불가피하게 링크 태크 a 사용이 어려운 경우 onclick으로 링크 연결을 하는 경우가 종종 있는데, onclick으로도 이동할 페이지를 현재창/새창/상위프레임/팝업으로 다양하게 열 수 있다. 1. 현재창에서 열 때 onclick="location.href='링크주소'" 2. 새창으로 열 때 onclick="window.open('링크주소')" 3. 상위 프레임에서 열 때 onclick="parent.location.href='링크주소'" 4. 팝업창으로 열 때 onclick="window.open('링크주소','창이름','width=가로사이즈,height=세로사이즈,left=왼쪽위치,top=상단위치');" 팝업의 경우 옵..

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

문제상황 phpMyAdmin에서 칼럼을 수정하거나 삭제하려고할 때마다 #1067 -'ct_time'의 유효하지 못한 디폴트 값을 사용하셨습니다. 라고 오류가 발생한다. ct_time 컬럼 형식은 datetime이고 기본값이 0000-00-00 00:00:00 이었는데, 기존에 서버에 설치해서 사용할 때는 아무 문제 없다가 이번에 새로운 서버에 새롭게 영카트를 설치하면서 문제가 발생했다. 이 문제는 mysql 5.6 이후로 mysql 문법이 엄격해지면서 발생한다고 한다. mysql 5.5 이하 버전에서는 기본이 false 였지만, 5.6부터는 기본이 true 여서 발생하는 문제. 5.6의 문법에 맞게 입력하거나 아래의 방법으로 해결이 가능하다. 해결방법 SQL_MODE에서 "NO_ZERO_IN_DATE,N..

네이버 블로그로는 각종 리뷰, 일상적인 것들을 올리고 있었는데 내가 작업했던 코드들을 기록해놓을 만한 또 하나의 블로그가 필요해졌다. 네이버 아이디를 하나 더 만들어서 운영할까 하다가 코드의 경우 구글로 많이 검색하기도하고, 구글 애드센스와 친화적인 티스토리를 선택하게 되었다. (이왕이면 미미하게라도 수익이 나면 좋으니까) 구글 애드센스란? 구글 애드센스(Google AdSense)는 구글에서 제공하는 서비스로, 제작한 웹사이트, 앱 페이지나 블로그 글에 애드센스 광고를 붙이면 광고 수익의 일부를 받을 수 있는 서비스이다. 보통 해당 페이지와 가장 연관성 높은 광고가 나오게 된다. 애드센스 신청 과정 애드센스를 통해 홈페이지나 블로그로 수익을 얻을 수 있다는 장점이 있지만, 아무나 가능한 것은 아니다. ..

오랜만에 워드프레스 로그인을 하는데 다른건 잘 작동되는데 wp-admin 폴더만 접속하려고하면 403 forbidden 에러가 떴다. 스팸도 많고, 보안 이슈도 많은 워드프레스... 꼭 몇달에 한번씩 이렇게 문제가 생기네. 구글링해서 루트폴더에 있는 .htaccess를 삭제해보기도하고, 퍼미션을 변경해보기도하고, 플러그인 폴더명을 바꿔보기도는 등 여러가지 해결방법을 적용해보았는데도 /wp-admin 하위 파일만 접속이 안되는거다. 에러 내용 Forbidden You don't have permission to access /wp-admin/ on this server. 그러다 불현듯 wp-admin 폴더 안의 .htaccess 파일을 확인해보니 이 파일이 문제였었다. wp-admin 폴더에 아무도 접근하..

닫기 버튼 만드는 경우 그냥 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..

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("완료"); } ..

증상 카페24 쇼핑몰 상품 상세페이지에서 (필수, 선택 옵션이 없는 경우) 상품을 장바구니에 담기 버튼을 클릭했는데 장바구니에 담기지 않거나 (필수, 선택 옵션이 있는 경우) 옵션을 선택했는데도 "필수 옵션을 선택해주세요" 경고창이 뜨는 증상 해결방법 스킨 코드의 문제가 아니라 도메인 연결의 문제이다. 도메인을 포워딩 기능을 사용하여 홈페이지를 연결하는 경우 발생하는 문제이다. 포워딩 기능을 모두 해제하고, 네임서버를 카페24로 변경하면 된다. (예시) 가비아에서 도메인을 구입한 경우 1) 가비아 로그인 후 > 마이가비아 > 서비스관리 > 해당도메인 리스트에서 [관리툴] 클릭 2) 네임서버 옆에 [설정]을 눌러 카페24 네임서버로 변경해준다. 카페24 네임서버 1차: dns1.cafe24.com (175..

얼마전에 본체를 바꿨다. 기존에 듀얼 모니터를 사용했는데, 하나는 HDMI, 하나는 VGA로 연결해서 사용하고있었다. 그런데 새로 구입한 본체에 VGA 포트가 있어서 연결했는데 화면이 안나오는거다. 이상하다 싶어서 알아봤는데 그래픽카드쪽에 꽂아야한다고.... (소프트웨어는 잘알지만 하드웨어쪽은 정말 문외한 나....) 이엠텍 Emtek GTX1050 ti 4GB 포트 구성 일단, 이엠텍 Emtek GTX1050 ti 4GB 포트는 아래처럼 되어있다. 듀얼모니터를 사용한다면 HDMI, DVI포트를 사용하거나, 아니면 HDMI 분배기를 구입해야하는데, 분배기가 생각보다 가격이 비싸길래 상대적으로 저렴한 DVI 젠더를 구입하기로 하였다 (최소 거의 6~7만원대). 사용하고 있는 모니터에는 HDMI하고, VGA..

안녕하세요. 티스토리를 운영하시는 분들은 애드핏, 구글애드센스 등 다양하게 광고를 넣으실텐데요 쿠팡파트너스의 상품 배너를 넣는 방법을 알려드리도록 하겠습니다. 스킨마다 방법은 조금 차이가 있을 수 있습니다. 저는 Odyssey 스킨을 사용중입니다. 혹시 사이드바가 없다면 꾸미기 > 스킨편집에서 PC레이아웃 사이드바 형태를 "2단 우측 사이드바"로 변경해주세요. 사이드바에 쿠팡 상품 배너 넣기 1. 꾸미기 > 스킨편집을 클릭해 [html 편집]을 클릭합니다. 2. 그러면 HTML 코드들이 나오는데 Ctrl + F 를 눌러 box-category를 검색해줍니다. 검색하면 해당 부분이 노란색으로 표시 됩니다. 이 부분이 사이드바의 카테고리 영역인데요. 사이드바의 각각의 영역은 와 로 감싸져 있는 것을 확인하실..