placeholder에 CSS적용시는 방법
placehoder에 아주 간단하게 CSS를 적용시킬 수 있다. input::-webkit-input-placeholder { font-size: 90%; } input::-moz-placeholder { font-size: 90%; } input:-ms-input-placeholder { font-size: 9...
검색 결과
이런, 검색 결과가 없습니다.
KBoard 스킨 제작시 알아두면 좋은 PHP 정리
스킨 제작에 참고할 수 있게 자주 사용되는, 또는 알아두면 좋은 PHP 코드를 정리해보았다. 코드 관련 정보는 지속적으로 추가 및 개선해 나갈 예정이다. 일반 기능일반적으로 두루두루 사용되는 기능이다. 관...
워드프레스 Admin bar 관리자한테만 보이기
회원제 블로그 또는 사이트를 운영 중인 경우 어드민 바(Admin Bar)를 숨기고 싶은 경우가 있다.회원 관리 플러그인을 통해 숨기는 방법, Admin Bar 전용 플러그인을 설치해 제어하는 방법 등 방법은 많지만 외부...
KBoard 입력 필드 활용하기
KBoard는 입력 필드를 사용하여 글 작성 시 더 많은 내용을 입력하는게 가능하다. 알면 좋은 기능이지만 따로 정리된 글이 없어 자주 쓰이는 몇 가지를 나름대로 정리해봤다. 사용법이 더 생각나면 추가할 예정이...
CSS 속성 선택자 정리 - CSS [attribute] Selector
CSS 작업에 사용하면 유용한 요소인 속성 선택자를 정리해본다. 어지간한 모던 브라우저는 다 지원하고, Internet Explorer는 7부터 지원한다. 자세한 정보 :: w3schools.com - CSS Selector Reference [attrib...
댓글 작성자명 관리자와 본인만 보게 수정하기
KBoard-comments 스킨을 수정하여 댓글 작성자명을 관리자와 작성자 본인에게만 보이게 수정해보았다. 댓글 작성자가 관리자라면 관리자의 이름을 노출한다. 본인의 이름을 볼 수 있는 건 당연히 회원만 가능하다...
"사용자 정의하기"의 추가 CSS 입력 영역 제거하기
워드프레스는 개발 능력이 없어도 테마를 손쉽게 수정할 수 있는 "사용자 정의"기능이 있다. (물론 테마에서 지원을 해줘야 작동한다) 잘 사용하면 굉장히 편리한 기능이지만 특정 상황에 따라 기능을 숨기거나 ...
[SSH] MySql 백업 명령어 (mysqldump)
사이트를 전체 백업하여 복제할 일이 있어 찾아보고 스크랩한다. 일반적인 방법 mysqldump -u[username] -p[password] [dbname] > [filename].sql 값 설명 [username] DB 사용자명 [password] DB 비밀...
레이어 화면 중앙 정렬 (가로, 세로)
화면 중앙에 div를 놓고싶을 때 사용.width, height 값이 반드시 필요하니 주의 .center { position: absolute; margin: auto; top: 0; right: 0; bottom: 0; left: 0; width: 100px; height: 100px; } <...
회원인지 비회원인지 체크하기
티스토리 메뉴바를 활용해 작동되는 스크립트이다.관리자에서 메뉴바를 제거했다면 동작하지 않으니 주의하자. 로그인 한 티스토리 회원이라면 <html> 에 member라는 class를 추가하고비회원이라면 guest라...
티스토리 스킨 설치방법
스킨 메뉴에서 바로 적용하는게 아닌, 다운받은 티스토리 스킨 파일의 설치방법이다. 스킨을 처음 설치하거나, 설치한 스킨이 제대로 작동하지 않는다면 아래 step을 천천히 따라해볼 것. step 1 - 파일 업로드 ...
Emmet Cheat Sheet
Emmet 단축키를 전부 볼 수 있는 Documentation https://docs.emmet.io/cheat-sheet/
로그인 페이지 URL 변경
KBoard나 여타 플러그인에서는 권한이 없는 사용자를 로그인 페이지로 이동(Redirect)시킨다. 이때 이동되는 페이지는 워드프레스 기본 로그인 페이지가 된다. 이 기본 로그인 페이지가 아닌 프론트단에서 커스텀...
포토샵의 Drop shadows를 CSS로 변환시켜주는 사이트
http://psd-to-css-shadows.com/ 포토샵의 shadows 값을 CSS로 변경해주는 사이트.설정된 값에 맞춰 box-shadow와 text-shadow CSS를 만들어준다. 2019-05-30링크 주소 변경
Admin Bar 아이템 제거 방법
워드프레스는 사용자 로그인 시 어드민 바(Admin Bar)가 노출된다. 어드민 바에는 워드프레스 기본 버튼이나, 각종 플러그인의 버튼이 나타나는데, 다음은 이 버튼을 숨기는 방법이다. ※ 워드프레스는 어드민 바...
KBoard 체크박스 필수로 선택하게 하기
KBoard의 입력 필드를 활용하여 여러 입력폼을 추가할 수 있다. 이 중 체크박스를 추가하고 해당 체크박스에 체크를 해야 글을 쓸 수 있게 하는 방법을 기록한다. 체크박스를 추가하는 방법은 이 글(링크)에서 확...
KBoard 라디오버튼 필수로 선택하게 하기
이전 글(링크)에선 체크박스를 반드시 선택하게 하였는데, 이번엔 라디오버튼을 필수로 선택하게 하거나 특정 옵션을 선택해야만 글이 등록되게 하는 코드를 기록해둔다. 1. script.js 수정수정하고자 하는 KBoar...
TinyMCE에 스타일(CSS) 추가하기
워드프레스의 TinyMCE는 다양하게 기능을 추가할 수 있다. 그 중 add_editor_style( $stylesheet )을 사용하여 에디터에 Style을 쉽게 추가할 수 있는데, Admin의 에디터에선 스타일이 적용되나, Front의 에디터...
onclick 링크 (새창/팝업/현재창/프레임)
onclick 속성을 사용하여 링크를 이동하는 방법에 대해 기록해둔다. 1. 즉시 이동 <button onclick="location.href='https://naver.com'">네이버</button> 2. 새 창으로 열기 <button...
에디터에서 KBoard 미디어 추가 버튼 제거하기
사이트 납품 시 KBoard를 사용하여 게시판을 제공해줄 때게시판 글쓰기 화면의 KBoard 미디어 추가 버튼과 에디터 기능 중의 KBoard 미디어 추가 아이콘을 제거하고싶을 때 사용할 수 있다. 다음 코드를 테마...
부드럽게 나타나고 숨겨지는 사이드바
CSS #sidebar { font-size: 14px; z-index: 100; -webkit-transform: translate3d(-300px,0,0); -moz-transform: translate3d(-300px,0,0); transform: translate3d(-300px,0,0); -webkit-transition: all ...
[jQuery] 특정 소스의 값 뽑아오기 (주소, 경로, 데이터 등등)
jQuery의 attr() 속성을 사용하면, 특정 소스가 가진 값을 뽑아올 수 있다. 아래 예제를 참고해보자. <img src="http://abc.com/original.png" alt="original image" id="original-image"> <img src="ht...
[js] 특정 주소에서 html 에 class 추가하기
if ( window.location.pathname == '/' ) { var root = document.documentElement; root.className += ' index'; }wondow.location.pathname에 지정된 경로의 URL로 접속 할 경우 index라는 class를 html에 추...
[js] 페이지 맨 위로 이동하는 버튼 (scroll to top)
1. 부드럽게 올리기 <script> var scrollUpDelay = 1; var scrollUpSpeed = 30; function scrollUp() { if(document.body.scrollTop<1) { return; } document.body.scrollTop=document.body.scrol...
Javascript Location 오브젝트 모음
현재 접속해있는 사이트의 location 정보를 가져올 수 있는 location object에 대해 잊지 않기 위해 간단히 기록해본다. 브라우저 개발자도구로 바로 테스트해볼 수 있으니 직접 써보면 이해하는데 더 도움이 ...
관리자가 아니라면 wp-admin 페이지 접근 못하게 막기
관리자가 아닌 일반 회원(구독자)이라면 wp-admin 페이지의 접근을 제한시킨다. 테마의 functions.php에 추가하면 작동한다. 아직까지 별 다른 문제는 발견하지 못함. 코드 /** * 관리자가 아닌 사람은 관리자 ...
[jQuery] 페이지 하단으로 이동하는 버튼
HTML <div id="go-bottom">가자</div> jQuery $("#go-bottom").click(function(){ $('html, body').scrollTop( $(document).height() ); });
[js] Firefox 에서 javascript:scroll(0,0) 안될 때
이렇게 사용 Do you mean like this:<a href="javascript:scroll(0,0)">To Top</a>It seems this should still be supported, per MDN: https://developer.mozilla.org/docs/Web/API/Window/scrollDo...
특정 CSS, 최소 IE 버전 기록
CSS3 transform2d - ie9 transform3d - ie10 webkit, moz, ms, o http://www.w3schools.com/cssref/css3_pr_transform.asp @media - ie9 http://www.w3schools.com/cssref/css3_pr_mediaquery.asp box-sizin...
IE7, 8 에서 투명도(opacity) 사용에 필요한 소스 (IE 핵)
opacity: 0.5; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE 8 */ filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); /* IE 7 and olders */ 순서가 달라지면 적용...
서버(ip) 체크해서 운영중인지 멈추었는지 출력
$address = "0.0.0.0"; //ip주소 $port = 80; //포트번호 $out = "GET / HTTP/1.0\r\n\r\n"; $fp = @fsockopen($address, $port, $errno, $errstr, 1); usleep(50); if( $fp ) { echo "정상"; } e...
구버전 IE를 위한 background-color: rgba(); 꼼수
background-color: rgba(); 는 배경색만 투명도를 설정할 수 있는 아주 좋은 속성이다. 하지만 구형 Internet Explorer에서는 지원하지 않기 때문에 사용하기 위해선 다른 방법을 선택해야 한다. 사이트가 구형 I...
[js] html에 class 추가/제거 하는 토글 버튼
<script> function sidebar_toggle() { var root = document.documentElement; if (~root.className.indexOf(' selector')) { root.className = root.className.replace(' selector', ''); } else { ...
Using The WordPress Enqueue Hook
theme 의 function.php 에 추가하면 테마에 js, css 파일을 불러올 수 있다. wp_enqueue_scripts – action used to load scripts on the front-end admin_enqueue_scripts – actionused to load scripts in the W...
[jQuery] A 링크 클릭 방지 (# 대체)
a태그에 링크 기능을 넣지 않거나 아직 링크가 없을 경우 흔히 href값에 #을 넣는다. 근데 이 링크를 누르면 '#' 때문에 자꾸 페이지 상단으로 이동되니 여간 귀찮은게 아니다. 링크의 href값이 #일 경우 링크를 ...
strpos / 문자열을 포함하고 있는지 검사
<?php $text = '홍길동의 아버지'; $find = '아버지'; if(strpos($text, $find) !== false) { echo '포함'; } else { echo '미포함'; } ?> "홍길동의 아버지" 라는 텍스트에 "아버지" 라...
배경 그라데이션 효과 - CSS Gradient
이미지를 사용하지 않고 CSS를 사용하여 div 또는 특정 태그의 배경에 Gradation 효과를 넣을 수 있다. background: #397fb3; /* For browsers that do not support gradients */ background: -webkit-linear-gra...
삼항 연산자 사용법
삼항 연산자(혹은 삼항식)를 사용해 긴 if 문을 짧게 줄일 수 있다.if 문의 결과를 변수에 담고자 할 때 혹은 간단한 if문을 보기 좋게 한 줄로 쓰고자 할 때 사용할 수 있다. 적용 전 var foo = ''; if ...
[jQuery] 스크립트 로드 순서
jQuery(document).ready(function() { }); DOM 로드 완료 후 작동 jQuery(window).load(function() { }); 페이지 로드가 완전히 완료된 후 작동도움이 많이 되는 설명 - http://webdir.tistory.com...
괜찮은 플러그인 스크랩
Shortcodes Ultimatehttps://wordpress.org/plugins/shortcodes-ultimate/ 숏코드를 손쉽게 만들 수 있는 플러그인 Jetpack by WordPress.comhttps://wordpress.org/plugins/jetpack/screenshots/ 트래픽 최...
php include
$wwwDir = explode('www', dirname(__FILE__))[0].'www/'; include($wwwDir.'file.php'); 소스 설명 include html 을 포함한 파일을 불러오기 위한 include include_once 함수파일을 한...
체크박스 미리 체크해놓고 수정 못하게 막기
HTML // HTML5 <input type="checkbox" checked disabled> // older <input type="checkbox" checked="checked" disabled="disabled"> checked를 쓰면 기본으로 체크가 되어 있게 한다.disabl...
첨부파일 개수 추가시 참고사항
$content->attach->{첨부파일 키}[0] 은 첨부파일 url 입니다. $content->attach->{첨부파일 키}[1] 은 첨부파일 파일명 입니다. http://www.cosmosfarm.com/threads/document/195
KBoard 입력 필드를 사용해 체크박스를 추가하는 방법
KBoard에서 입력 필드를 활용하여 체크박스를 만들고 값을 저장하여 사용하는 방법이다. editor.php <label for="checkbox"> <input type="hidden" name="kboard_option_checkbox" value=""> ...
Chrome, Firefox에서 사용 가능한 주소 복사 기능
function copy_trackback(address) { var IE=(document.all)?true:false; if (IE) { if(confirm("이 글의 주소를 클립보드에 복사하시겠습니까?")) window.clipboardData....
서버 이전 후 도메인 연결이 이상할 때
서버 이전 후 무언가 꼬여서 도메인이 이전 서버의 도메인으로 자꾸 이동한다면 다음 링크의 방법을 해봐야한다. php 편집 https://codex.wordpress.org/Changing_The_Site_URL wp-config.php 편집 과&nbs...
[js] 구글 웹폰트 로더
Google Fonts API에서 제공하는 것보다 글꼴 로드를 더욱 세밀하게 할 수 있다,, 고 하는 구글의 웹 글꼴 로더에 대한 간단한 사용법을 기록한다. Web Font Loader 저장소 바로가기 head <script src...
[jQuery] 랜덤으로 class 추가하기
방법1 변수 classes에 할당된 배열의 이름을 li 태그에 랜덤으로 부여 $(document).ready(function(){ var classes = ["one", "two", "three"]; $('li').addCl...
[jQuery] 스크롤시 class 추가/제거
기록기록 방법1 <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script> jQuery(document).ready(function() { var bodyOffset = jQuery('body').offset(); jQuery(...
$_SERVER 함수
출처 :: http://www.x2chi.com/458 출처 사이트의 글을 그대로 긁어왔습니다. $_SERVER['DOCUMENT_ROOT'] = 현재 사이트가 위치한 서버상의 위치 = webappinclude $_SERVER['HTTP_ACCEPT_ENCODING'] = 인코딩 방...
[jQuery] .removeClass() 에 .delay() 효과 적용하기
jQuery 속성 중 class 를 지워주는 removeClass 라는게 있다. 하지만 이 속성은 document 가 준비되는 순간 또는 window 가 로드되는 순간 class 를 지워버린다. removeClass에 delay효과를 주기 위해선 다음과 ...
[jQuery] fadeIn, fadeOut 되는 위로가기 버튼
화면 스크롤시 특정 높이에서 Scroll to Top 버튼이 fade In 되는 스크립트이다. HTML <div class="scrollUp" onclick="javascript:scrollUp();"><i class="fa fa-angle-up" aria-hidden="true"><...
[jQuery] 스크롤 따라다니는 사이드바(레이어) - stick kit
https://github.com/leafo/sticky-kit 참고용
php 에러 코드 불러오기
PHP는 코드가 잘못되면 사이트 자체가 죽어버린다. (공포의 500에러) 이 때 어디가 잘못되었는지 보고싶다면 아래 코드를 사용하면 된다. 사이트 로딩시 제일 처음 불러와지는 파일에 넣어서 사용하거나, 의심되...
브라우저 버전, 종류 체크
간단하게 스크립트를 삽입하는걸로 브라우저 버전을 체크, <html> 에 class 를 추가할 수 있다. 크로스브라우징을 할 때 유용하다. 추가로 공식 홈페이지 내의 스크립트를 사용해 특정 위치에 현재 접속한 ...
[js] 금액 단위에 자동으로 콤마(,)를 붙여주는 함수
// 숫자 타입에서 쓸 수 있도록 format() 함수 추가 Number.prototype.format = function(){ if(this==0) return 0; var reg = /(^[+-]?\d+)(\d{3})/; var n = (this + ''); while (reg.test(n...
[js] Linkify - 자동 링크 추가
글이나 댓글에 달린 주소에 자동으로 링크(a)를 걸어주는 JS 플러그인. ex) http://wallel.com -> http://wallel.com 공식 홈페이지를 접속해보면 어떻게 작동하는지 이해하기 더 쉬우니 참고해볼것. 홈페이지...
타이틀 불러오는 소스
<?php bloginfo('name'); $site_description = get_bloginfo( 'description', 'display' ); if ( $site_description && ( is_home() || is_front_page() ) ) { echo ' | '.$site_description; } wp...
현재 로그인 한 유저 정보 불러오는 함수
현재 로그인 한 유저의 정보를 불러오는 방법이다. 원문 글 - Wordpress Codex Function Reference/wp get current user 예제 $current_user = wp_get_current_user(); /** * @example Safe usage: $curre...
[jQuery] smooth scroll to top 페이지 상단으로 부드럽게 이동하기
jQuery('a[href="#top"]').click(function(e){ e.preventDefault(); jQuery('html, body').animate({ scrollTop: 0 },500) }); <a href="#top">Scroll to Top</a>#top 이라는 ...
플러그인 설치시 ftp 정보 물어볼 때 추가할 php
wp-config.php 파일 제일 하단에 define('FS_METHOD','direct'); 이 코드만 추가하면 된다. http://www.hongkiat.com/blog/update-wordpress-without-ftp/
Retina display 를 위한 js 플러그인
공식홈페이지 :: https://imulus.github.io/retinajs/ 스크립트를 include 하고 img 태그 뒤에 특정 명령어를 입력하면, Retina Display 일 때 해당 크기의 이미지를 불러온다. 자세한 설명은 공식 홈페이지...
php 파일에서 shortcode 사용하기 - do_shortcode
워드프레스 테마 작업 중 템플릿 파일을 마크업 할 때 shortcode를 사용해 위젯을 불러오거나 직접 만든 shortcode를 사용해야 하는 경우가 있다. 이럴 경우 do_shortcode로 간단하게 shortcode를 불러올 수 있다...
[jQuery] jQuery 기반 tabs 플러그인 모음
jQuery EasyTabs https://os.alfajango.com/easytabs/가장 많이 쓰이는 것 같은 플러그인.브라우저 지원 : IE 7+, Firefox 4+, Chrome, Safari, Opera 11Tabslethttp://vdw.github.io/Tabslet/완전 깔끔한게 맘에...
워드프레스 - get_permalink, add_query_arg
워드프레스 템플릿이나 특정 php 를 제작할 때 링크를 추가하는 경우 사용할 수 있는 방법이다. 기존의 방식을 사용해도 문제는 없으나, 주소가 변하기 때문에 사용자들의 혼돈을 야기할 수 있다. (물론 설정에 ...
[jQuery] 셀렉트박스에서 특정 옵션 선택시 레이어 나타내기
select 에서 특정 option 선택시 레이어를 보여주고 숨기고 할 수 있는 스크립트. jQuery jQuery('#selectBox').change(function() { var state = jQuery('#selectBox option:selected').val(); if ( state == ...
HTML 특수문자 코드표 - HTML Entities
마크업을 할 때나 글을 작성할 때 < 와 같은 특수문자를 표시하기 위해선 < 와 같이 코드로 입력해야한다.아래 사이트를 방문해 원하는 특수문자의 코드를 찾아 사용하면 된다. https://dev.w3.org/...
KBoard 게시판 카테고리 셀렉트박스가 아닌 가로로 출력하기
카테고리 선택이 셀렉트박스가 아닌 가로로 나열되어 있는걸 원한 클라이언트가 있어 이래 저래 짜집기 한 PHP 코드이다. 카테고리 1에 등록된 소스만 적용되며, 선택된 카테고리는 a 태그에 active 라는 클래스...
관리자 > 사용자 목록에 원하는 컬럼(Column) 추가하기
관리자의 사용자 페이지에 원하는 Column(이하 컬럼)을 추가하는 방법에 대해 스크랩 한다. 1. 컬럼 추가테마의 functions.php 파일에 add_filter를 사용하여 컬럼을 추가한다. function custom_user_columns( $c...
드래그 색상 변경하기
화면 드래그 색상을 변경해준다. IE9부터 지원하니 다양하게 활용할 수 있겠다. 코드 ::-moz-selection { color: #fff; background-color: #888; } ::selection { color: #fff; background-color: #888; }
[js] Toggle Visibility - 토글 레이어
클릭해서 보여주고, 다시 클릭하면 숨기는게 가능한 간단하지만 유용한 자바스크립트 토글 소스. SCRIPT function toggle_visibility(id) { var e = document.getElementById(id); if(e.style.display == 'bloc...
알림판의 기본 위젯 제거하기
워드프레스를 설치하고 나면 알림판에 여러 기본 위젯들이 나타난다. 개인적으로 사용하는 블로그형 사이트라면 놔둬도 크게 상관은 없는데, 클라이언트에게 납품하는 사이트의 경우 제거해서 납품하는게 좀 더 ...
HTTP 상태 코드
간혹 사이트 이용 또는 작업시 404, 502, 403 등의 숫자와 함께 에러 메세지가 출력될 때가 있다.위키백과에 HTTP 응답 상태 코드가 한글로 잘 정리가 되어있어 링크를 남긴다. https://ko.wikipedia.org/wiki...
SSL 인증서 설치 후 .htaccess를 수정하여 http로 접근 시 https로 redirect시키기
SSL 인증서를 설치했을 때 기존 http로 접속하면 https로 도메인을 변경하는 방법을 기록한다. 여러 문서를 찾아보고 테스트 해보고 했지만 아래 방법이 내 나름 가장 완벽하게 작동한 것 같다.(아래 설정은 ...
oninput 이벤트로 input type text에 숫자만 받기
작업을 하다보면 종종 input type="text"에 숫자만 받아야 하는 경우가 있다. 물론 input type="number"를 사용하면 아주 간단하게 해결되지만 maxlength, minlength 속성이 적용되지 않아 number 타입을...
Lorem Ipsum 사이트 모음 (한글, 다국어)
사이트를 제작할 때 편히 사용되는 로렘 입숨(Lorem Ipsum)을 자동으로 생성해주는 사이트를 스크랩한다. 로렘 입숨의 정의 로렘 입숨(lorem ipsum; 줄여서 립숨, lipsum)은 출판이나 그래픽 디자인 분야에서 폰...
우커머스 결제 화면의 청구지 주소 필드 제거
우커머스로 디지털 콘텐츠를 판매할 경우 상품을 배송하는 것이 아니기 때문에 주소를 받을 필요가 없다. 결제 화면에서 이 주소 필드를 없애려면 아래 코드를 사용하면 된다. /** * 우커머스 주소 필드 ...
우커머스 재고 관리 옵션 제거
지난 글에 이어 디지털 콘텐츠를 판매할 경우 재고 관리가 필요 없기 때문에 상품 등록 시 나타나는 SKU 필드와 상품 조회에 나타나는 SKU 문구를 제거할 수 있는 코드를 기록한다. 코드 /** * 우커머스 ...
국내외 웹사이트 빌더 업체 리스트
코딩 지식이 없어도 손쉽게 웹사이트를 만들 수 있는 서비스를 제공하는 업체를 알아두기 위해 모아봤다. 해외 1. Squarespace (https://www.squarespace.com/) 반응형템플릿쇼핑몰유료 2. Wix (http...
가비아 호스팅에서 워드프레스 "한글 퍼머링크"가 제대로 동작하지 않는다면?
가비아 호스팅에서 워드프레스 "한글 퍼머링크"가 제대로 작동하지 않는다면, .htaccess 파일에 아래 코드를 추가하자. .htaccess <IfModule mod_url.c> CheckURL On ServerEncoding UTF-8 ClientEnc...
Sublime Text 3 커맨드에서 명령어 보기
에디터에서 특정 커멘드의 명령어를 찾아 커스텀 단축키를 추가하기 위해 기록한다.Ex) copy_file_path의 command 명령어 찾기 Ctrl + `를 눌러 커멘드 창을 열고 아래 명령어를 입력한다. sublime.log_com...
IE, isNaN 함수 대체
IE에서는 isNaN 함수가 없기 때문에 필요한 경우 수동으로 추가 작업을 해줘야한다. CODE if ( ! Number.isNaN ) { Number.isNaN = function isNaN(value) { return value !== value; }; }
Filezilla에서 vscode를 기본 편집기로 설정하기
파일질라(Filezilla)는 설정에서 프로그램 기본 편집기를 변경할 수 있다.이 설정을 사용해 vscode를 기본 편집기로 연결하려고 했는데 생각보다 vscode 파일의 경로가 이상해서 기록해둔다. FTP 설정 ...
xampp 프로그램 종료 시 xampp-control.ini 권한 에러 발생할 때
xampp 프로그램을 종료할 때 xampp-control.ini 파일에 대한 권한이 없다고 경고창이 뜨는 경우가 있다.한번 뜬 경고창은 닫을 수 없고 프로그램 응답 없음이 떠야 windows에서 프로그램을 강제 종료한다. 두 ...
파일 첨부 input 외형 변경 (w. jQuery)
input type file의 외형을 간단히 수정할 수 있는 방법을 기록한다. jQuery로 작성되어 있으나 IE는 고려하지 않았다. HTML <label for="attached"> <input class="file_real" id="attached" ...
파일 탐색기에서 OneDrive 아이콘 제거하기
Windows는 OneDrive가 기본으로 설치되어있다.사용하지 않아 삭제를 해도 파일 탐색기에는 바로가기가 남아있는데, 불편하니 제거하는 방법을 기록한다. 레지스트리 편집기 실행 Win + R 버튼을 눌러 ...
Visual Studio Code 추천 확장 프로그램
한동안 vscode를 사용하면서 작업에 도움이 되고 편리했던 확장 프로그램을 노션에 정리해보았다. 조만간 블로그로 옮겨야지 ... https://wallel.notion.site/c1d23c84ea5a4418a1c5680f7c305821
개인 프로젝트에 스타일린트 적용하기 (w. Visual Studio Code)
스타일린트는 설정만 잘해두면 무지성으로 스타일을 입력해도 여러모로 알아서 맞춰줘서 매우 편리하다.여러 명이 하나의 프로젝트를 작업할 때 매우 좋다. 추가하자. *아래 환경은 주로 React + TypeS...
프로젝트에 추가 해두면 좋은 .gitignore
개인 프로젝트를 깃헙과 연결해서 사용하다 보면 git ignore를 추가해야 할 때가 있다.그럴 때마다 매번 폴더나 파일을 ignore로 추가했는데 부트스트랩에서 정말 잘 정리해 둬서 기록 해둔다. .gitignore ...
간단하게 아코디언 메뉴 만들기
자바스크립트를 사용해서 정말 간단하게 아코디언 메뉴를 만드는 방법을 기록한다. 미리보기 See the Pen Accordion Menu 1 by Tae Young, Kim (@kty0529) on CodePen. HTML <ul> &l...
fadeIn, fadeOut 효과 (w. Vanilla JS, CSS Keyframes)
간단하게 CSS의 Keyframes와 Vanilla JavaScript를 활용한 fadeIn, fadeOut 효과를 만드는 방법을 기록한다. Preview See the Pen fadeIn / fadeOut Effect (w. Vanilla JS, CSS Keyframes) by Tae Y...
Unsplash 랜덤 이미지 URL 사용하기
Unsplash에서는 API 사용 없이 간단하게 URL 호출로만 랜덤 이미지를 제공해주는 기능이 있다. 공식 문서에서는 찾지 못해 구글링만 해서 찾았어야 했는데 기록용으로 남긴다.사실 공식 문서에 없어서 언제 사...
Node 버전 변경
프로젝트를 하다보면 해당 프로젝트에 맞게 노드 버전을 변경해야 하는 경우가 있어서 기록한다. 사용중인 터미널에서 버전 변경 nvm ls (또는 nvm list) : 설치된 버전 조회 nvm use 18.20.4 : 사용할...
CSS Media Query를 사용한 기기별 체크
CSS Media Query를 사용하면 간단하게 기기의 다양한 상태 체크가 가능하다. iOS인지 Windows인지, 마우스 커서가 없지는 않은지, 핸드폰이 가로로 되어있는지 세로로 되어있는지 등등!매우 많은 방법이 있지...
핸드폰에 있는 Google OTP, 크롬 브라우저에서 똑같이 사용하기
매번 OTP를 입력할 때마다 핸드폰을 켜는 게 너무 귀찮아서핸드폰에 있는 Google OTP를 브라우저에서 사용하고 싶어서 찾아보고 그 방법을 기록해 둔다. 1. 크롬 확장프로그램 설치 크롬 웹스토어에서 "인...
IcoMoon을 활용한 커스텀 아이콘 폰트 만들기
간단하게 폰트처럼 사용할 수 있는 아이콘 폰트를 찾다 보면 FontAwesome, Material Icons 등 다양한 아이콘 폰트가 있다.사용하기 편리하고 다양한 아이콘을 제공해서 너무 좋으나 사용하지 않는 아이콘을 불러...
GitHub Pages 배포 시 Custom Domain이 초기화 될 때
GitHub에서 제공하는 Pages는 나만의 Custom Domain을 설정할 수 있다. 그런데, 설정을 잘 하고 배포를 하면 설정한 Custom Domain이 해제되어 기본 도메인으로 되돌아가는 경우가 있다. 🙁이럴 땐 배포를 할 ...
기본 Open Graph 설정하기
프로젝트를 진행할 때 기본적으로 세팅해야 하는 오픈 그래프 메타 태그를 기록해둔다. 🚨 단일 페이지가 아닌, 글이 많은 블로그나 페이지가 다양한 기업 홈페이지를 개발한다면 유동적으로 메타 태그가 생성...
Git Remote 저장소 변경하기
작업을 하다보면 간혹 리모트 저장소의 위치를 변경해야 하는 경우가 있다. 현재 저장소 확인 git remote -v origin https://github.com/kty0529/wallel.git (fetch) origin https://github.com/kty05...
내가 사용하는 AGENTS.md 부칙 정리
나는 프로젝트를 진행할 때 Codex를 사용한다. 프로젝트 루트에 AGENTS.md 파일을 두면 Codex는 작업을 시작하기 전에 해당 문서를 참고하여 작업 방향과 제약 조건을 설정한다. 따라서 AGENTS.md는 단순한 참...
KBoard 첨부파일 url 및 파일명 불러오기
KBoard는 파일 첨부시 무조건 다운로드가 되게 한다. 이미지든, 압축파일든, 그 밖의 무엇이든. 만약 이미지 파일을 첨부하고 그 이미지를 <img> 태그로 넣고싶다면 다음 코드를 사용하면 된다. <img sr...
select box, input box style 초기화 CSS
select box와 input box의 스타일을 잡기 위해선 스타일을 초기화 시켜 주는게 좋다.특히 Mac은 Windows와 다르게 select box의 경우 스타일을 초기화 하지 않으면 원하는 CSS 를 입힐 수 없다. 다음 코드를 참고...
플러그인 경로 알아내기
플러그인을 제작하거나 수정할 때 php 내에서 특정 파일을 include 하고 싶을 때 사용하면 좋다. plugin_dir_path( __DIR__ ) 은 플러그인의 기본 위치(경로)를 알려준다. ex) /.../wp-content/plugins/kboard/sk...
Minimal #1
사진을 사용하는 블로거를 위한 블로그 스킨을 제작했습니다.
디지털 브로슈어
디지털 매거진과 마찬가지로 팀을 이끌어 십여개의 디지털 브로슈어를 배포했습니다.
디지털 매거진
최초 기획 시 모바일 전용 디지털 매거진을 개발하고Phase2 부터 반응형을 지원하여 PC, Tablet, Mobile을 모두 지원하게 개선했습니다.
무언가
축제 전문 업체인 '무언가'의 홈페이지를 리뉴얼하였습니다.
Barachiel
티스토리 스킨을 개발했습니다.
지주
해양산업을 전문으로 하는 기업의 웹사이트를 제작했습니다.
세이렌 의원
피부과 웹사이트를 개발했습니다.
한원건설
건설사 웹사이트를 개발했습니다.
HS펀딩
P2P 크라우드 펀딩 "HS펀딩"을 제작했습니다.재직했던 회사에서 제작한 자체 P2P 크라우드 펀딩 솔루션인 Fiscus를 사용했습니다.
월드펀딩
P2P 크라우드 펀딩 "월드펀딩"을 제작했습니다.재직했던 회사에서 제작한 자체 P2P 크라우드 펀딩 솔루션인 Fiscus를 사용했습니다.
아이나 요가&필라테스
요가&필라테스 센터 홈페이지를 만들고 유지보수 중입니다. GitHub Pages를 사용해 배포했으며 react-router가 적용되지 않는 것을 대응하기 위해 react-snap을 활용했습니다. SEO를 최적화 관련해서는...
달작
콘텐츠 에이전시 홈페이지를 개발했습니다.
합천 댕김 여행사
여행사 홈페이지를 제작했습니다.
사유학교
사유학교 홈페이지를 제작했습니다.
아이나 요가&필라테스 리뉴얼
프로젝트 개요 Next.js 14와 TypeScript를 기반으로 한 정적 웹사이트입니다. React Query로 상태를 관리하며 SCSS 모듈을 활용해 스타일을 구성했습니다. Vercel Analytics와 Speed Insights를 도입해 성...
요가 수업 시간표 디자인
Figma를 사용하여 아이나 요가&필라테스에서 사용할 시간표를 디자인 했습니다.
쉽게 구현해보는 자바 애플리케이션
Java 기반의 애플리케이션을 요구사항에 맞게 구현하는 과정입니다. 이 과정에서 Java8 ~ 11의 특징인 Stream, Function Programming, Optional 등을 배우면서 비지니스 로직을 작성하고,Junit5를 배우면서 테...
만들면서 배우는 실전 퍼블리싱
마크업을 설계할 때 자주 헷갈리는 Semantic 태그와 문서화 구조의 구성, 막연하게 느껴지는 Grid와 Flex, jQuery 없이는 만들 수 없는 JavaScript 코드 등등... 웹 개발을 할 ...
[Java/Spring] 고양이 사진 검색 사이트 API 과제 풀어보기
프로그래머스 과제테스트 연습에 있는 고양이 사진 검색 사이트에서 사용된 API를 직접 구현해보면서 Java/Spring을 학습해보는 코드리뷰 강의입니다.
Square
가장 기본이 되는 2단 스킨에 불필요한 기능은 제거하여 더 가볍게 제작했습니다. ※ 티스토리 반응형웹 스킨 공모전 대상 수상
Raphael
2단 형식의 스킨입니다. 자주 사용하지 않는 위젯은 하단으로 이동시키고 자주 사용하는 위젯은 우측에 설정하여 더 편하게 사용해보세요.\ 스킨 옵션을 통해 블로그 가로 길이, 본문/사이드바 너비, 사이드바와...
Navy Default
기본적인 KBoard 일반 게시판입니다. 편리한 확장설정을 제공하고 있습니다.\ 스크린샷과 데모 게시판을 확인해주세요. ※ Cosmosfarm 에서 판매중인 \[ Powered By KBoard 삭제 \] 제품과 다른 라이센스가 적용...
SASS Start Kit
반복되는 스타일 초기 세팅을 단 한 번의 @use로 해결하는 SCSS 스타터 키트입니다. 프로젝트 시작 시 반복적으로 세팅하는 SCSS 초석을 빠르게 불러오기 위한 템플릿입니다. core.scss 한 파일만 포함하...
GEO Source
GeoSource는 전 세계 국가 정보를 쉽고 정확하게 활용할 수 있도록 만든 표준 국가 데이터 서비스입니다.ISO 코드, 통화 기호, 다국어 국가명 등 국제 서비스 구축에 필요한 핵심 데이터를 통합 제공하여, 개발자...
이용약관
무료 배포 파일 통합 라이센스
유로로 판매되고 있는 파일 외에 무료로 배포되고 있는 파일에 적용되는 통합 라이센스 입니다.이 라이센스는 파일을 내려받음과 동시에 적용됩니다. 라이센스 저작권이 표기되어 있는 파일의 경우 저작권...