All in One SEO v4.9.7.2에서 생성된 이 파일은 llms.txt 파일로, LLM이 사이트를 색인화하는 데 사용됩니다.

# Wallel

그렇고 그런 이야기

## Sitemaps

- [XML Sitemap](https://wallel.com/sitemap.xml): Contains all public & indexable URLs for this website.

## 글

- [핸드폰에 있는 Google OTP, 크롬 브라우저에서 똑같이 사용하기](https://wallel.com/핸드폰에-있는-google-otp-크롬-브라우저에서-똑같이-사용하/) - 매번 OTP를 입력할 때마다 핸드폰을 켜는 게 너무 귀찮아서핸드폰에 있는 Google OTP를 브라우저에서 사용하고 싶어서 찾아보고 그 방법을 기록해 둔다. 1. 크롬 확장프로그램 설치 크롬 웹스토어에서 "인증 도구"를 찾아서 설치 해준다. 2. 핸드폰의 OTP 내보내기 1. Google Authenticator 앱을 켜고 좌측 상단 햄버거 바를 눌러 "계정 전송" 메뉴로 접속. 2. "계속"을 눌러 보안 인증을 하고
- [프로젝트에 추가 해두면 좋은 .gitignore](https://wallel.com/자주-사용하는-gitignore/) - 개인 프로젝트를 깃헙과 연결해서 사용하다 보면 git ignore를 추가해야 할 때가 있다.그럴 때마다 매번 폴더나 파일을 ignore로 추가했는데 부트스트랩에서 정말 잘 정리해 둬서 기록 해둔다. .gitignore # Numerous always-ignore extensions *.diff *.err *.log *.orig *.rej *.swo *.swp *.vi *.zip *~ # OS or Editor folders ._* .cache .DS_Store .idea .project .settings .tmproj *.esproj *.sublime-project *.sublime-workspace
- [SSL 인증서 설치 후 .htaccess를 수정하여 http로 접근 시 https로 redirect시키기](https://wallel.com/ssl-인증서-설치-후-htaccess를-수정하여-http로-접근-시-https로-redirect시/) - SSL 인증서를 설치했을 때 기존 http로 접속하면 https로 도메인을 변경하는 방법을 기록한다. 여러 문서를 찾아보고 테스트 해보고 했지만 아래 방법이 내 나름 가장 완벽하게 작동한 것 같다.(아래 설정은 워드프레스 플러그인 중 Really Simple SSL 플러그인이 자동 생성하는 코드이다.) .htaccess # Begin SSL Redirect RewriteEngine on RewriteCond %{HTTP:X-Forwarded-Proto} !https RewriteRule ^(.*)$ https://%{HTTP_HOST}/$1 [R=301,L] #
- [가비아 호스팅에서 워드프레스 "한글 퍼머링크"가 제대로 동작하지 않는다면?](https://wallel.com/가비아에서-워드프레스-한글-퍼머링크-404-뜰-때/) - 가비아 호스팅에서 워드프레스 "한글 퍼머링크"가 제대로 작동하지 않는다면, .htaccess 파일에 아래 코드를 추가하자. .htaccess CheckURL On ServerEncoding UTF-8 ClientEncoding EUC-KR 추가할 땐 반드시 # END WordPress 아래에 추가하자.그렇지 않으면 워드프레스에서 무언가의 편집이 발생할 때마다 추가한 코드가 사라지는 슬픔이 발생한다.(왜인지는 모름, 원래 그런가? 🤔)
- [oninput 이벤트로 input type text에 숫자만 받기](https://wallel.com/oninput-이벤트로-input-type-text에-숫자만-받기/) - 작업을 하다보면 종종 input type="text"에 숫자만 받아야 하는 경우가 있다. 물론 input type="number"를 사용하면 아주 간단하게 해결되지만 maxlength, minlength 속성이 적용되지 않아 number 타입을 사용하기 아쉬운 경우가 있다.number 타입을 쓰고 스크립트로 글자수 제한을 하는 것도 방법이지만 이번 글에선 text 타입에 숫자만 받는 스크립트를 스크랩 해둔다. 코드 매우 간편하게 사용할
- [내가 사용하는 AGENTS.md 부칙 정리](https://wallel.com/내가-사용하는-agents-md-부칙-정리/) - 나는 프로젝트를 진행할 때 Codex를 사용한다. 프로젝트 루트에 AGENTS.md 파일을 두면 Codex는 작업을 시작하기 전에 해당 문서를 참고하여 작업 방향과 제약 조건을 설정한다. 따라서 AGENTS.md는 단순한 참고 문서가 아니라, AI의 행동을 정의하는 일종의 운영 규칙에 가깝다. 프로젝트마다 요구 사항은 다르기 때문에 세부 지침은 달라진다. 그러나 여러 프로젝트를 운영하면서 공통적으로 반복되는 문제가 있었다.언어 혼입, 과도한 추측
- [개인 프로젝트에 스타일린트 적용하기 (w. Visual Studio Code)](https://wallel.com/vscode-개인-프로젝트에서-스타일린트-적용되게-하기/) - 스타일린트는 설정만 잘해두면 무지성으로 스타일을 입력해도 여러모로 알아서 맞춰줘서 매우 편리하다.여러 명이 하나의 프로젝트를 작업할 때 매우 좋다. 추가하자. *아래 환경은 주로 React + TypeScript + SCSS or Styled-Component 조합 때 사용한다. Install npm install --save-dev stylelint stylelint-config-standard stylelint-scss stylelint-order stylelint-config-idiomatic-order stylelint-config-recommended-scss postcss postcss-syntax @stylelint/postcss-css-in-js .stylelintrc.json 프로젝트 루트에 스타일린트 설정 파일(.stylelintrc.json)을 생성하고 아래 코드를 넣자.
- [Git Remote 저장소 변경하기](https://wallel.com/git-remote-저장소-변경하기/) - 작업을 하다보면 간혹 리모트 저장소의 위치를 변경해야 하는 경우가 있다. 현재 저장소 확인 git remote -v origin https://github.com/kty0529/wallel.git (fetch) origin https://github.com/kty0529/wallel.git (push) 저장소 정리 저장소에 수정사항은 없는지 업데이트 해보는게 좋다. git fetch git pull git add . git commit -m "clear" git push 저장소 제거 git remote remove origin 새 저장소 연결 git remote add
- [Node 버전 변경](https://wallel.com/node-버전-변경/) - 프로젝트를 하다보면 해당 프로젝트에 맞게 노드 버전을 변경해야 하는 경우가 있어서 기록한다. 사용중인 터미널에서 버전 변경 nvm ls (또는 nvm list) : 설치된 버전 조회 nvm use 18.20.4 : 사용할 버전 node -v : 변경된 버전 확인 개별 터미널에서의 버전 변경이기 때문에 새 터미널을 열거나 기존 터미널을 닫으면 지정한 버전이 초기화 된다. 기본 버전 변경
- [간단하게 아코디언 메뉴 만들기](https://wallel.com/간단하게-아코디언-메뉴-만들기/) - 자바스크립트를 사용해서 정말 간단하게 아코디언 메뉴를 만드는 방법을 기록한다. 미리보기 See the Pen Accordion Menu 1 by Tae Young, Kim (@kty0529) on CodePen. HTML menu1 description menu2 description menu3 description menu4 description
- [기본 Open Graph 설정하기](https://wallel.com/기본-open-graph-설정하기/) - 프로젝트를 진행할 때 기본적으로 세팅해야 하는 오픈 그래프 메타 태그를 기록해둔다. 🚨 단일 페이지가 아닌, 글이 많은 블로그나 페이지가 다양한 기업 홈페이지를 개발한다면 유동적으로 메타 태그가 생성되도록 해야한다.이 글은 기본 메타 태그를 참고하기 위해 기록한 글이다. Basic 최소한으로 추가해야 할 메타 태그
- [GitHub Pages 배포 시 Custom Domain이 초기화 될 때](https://wallel.com/github-pages-배포-시-custom-domain이-초기화-될-때/) - GitHub에서 제공하는 Pages는 나만의 Custom Domain을 설정할 수 있다. 그런데, 설정을 잘 하고 배포를 하면 설정한 Custom Domain이 해제되어 기본 도메인으로 되돌아가는 경우가 있다. 🙁이럴 땐 배포를 할 때 CNAME을 다시 설정하도록 하면 임시로 해결할 수 있다. 참고 https://stackoverflow.com/questions/67183664/why-is-my-github-pages-custom-domain-constantly-reset https://github.com/tschaub/gh-pages/issues/213 해결법 "scripts": { "deploy": "echo '도메인주소' > ./build/CNAME && gh-pages -d build", } "도메인 주소"
- [IcoMoon을 활용한 커스텀 아이콘 폰트 만들기](https://wallel.com/icomoon을-활용한-커스텀-아이콘-폰트-만들기/) - 간단하게 폰트처럼 사용할 수 있는 아이콘 폰트를 찾다 보면 FontAwesome, Material Icons 등 다양한 아이콘 폰트가 있다.사용하기 편리하고 다양한 아이콘을 제공해서 너무 좋으나 사용하지 않는 아이콘을 불러와 무겁거나내가 원하는 몇몇 아이콘을 지원하지 않아 조금 아쉽게 느껴질 때가 있다. IcoMoon을 사용하면 이런 아쉬움을 조금이나마 달랠 수 있다. 프로젝트 생성 IcoMoon 사이트에 접속해 회원가입(또는 로그인)하고 [ IcoMoon
- [Javascript Location 오브젝트 모음](https://wallel.com/javascript-location-오브젝트-모음/) - 현재 접속해있는 사이트의 location 정보를 가져올 수 있는 location object에 대해 잊지 않기 위해 간단히 기록해본다. 브라우저 개발자도구로 바로 테스트해볼 수 있으니 직접 써보면 이해하는데 더 도움이 될 것 같다. location.hash 현재 보고있는 페이지의 # 이후의 정보(해시)를 가져온다. https://wallel.com/test.html#part2 => #part2 location.host 현재 보고있는 페이지의 호스트를 가져온다.도메인에 포트번호가 있다면 함께 가져온다. https://wallel.com/ => wallel.com https://wallel.com:1234
- [CSS Media Query를 사용한 기기별 체크](https://wallel.com/css-media-query를-사용한-기기별-체크/) - CSS Media Query를 사용하면 간단하게 기기의 다양한 상태 체크가 가능하다. iOS인지 Windows인지, 마우스 커서가 없지는 않은지, 핸드폰이 가로로 되어있는지 세로로 되어있는지 등등!매우 많은 방법이 있지만 자주 쓸만한 것들만 우선 기록한다. 쓰다 보면 나중에 늘어날지도, 🧐 CSS 1. 레티나 디스플레이와 일반 디스플레이 구분 /* ----------- 일반 ----------- */ @media screen and (-webkit-min-device-pixel-ratio: 1) { } /*
- [[js] 구글 웹폰트 로더](https://wallel.com/js-구글-웹폰트-로더/) - Google Fonts API에서 제공하는 것보다 글꼴 로드를 더욱 세밀하게 할 수 있다,, 고 하는 구글의 웹 글꼴 로더에 대한 간단한 사용법을 기록한다. Web Font Loader 저장소 바로가기 head Google에서 제공하는 폰트를 쓰려면 google object에 추가,커스텀
- [HTML 특수문자 코드표 - HTML Entities](https://wallel.com/html-특수문자-코드표-html-entities/) - 마크업을 할 때나 글을 작성할 때 < 와 같은 특수문자를 표시하기 위해선 < 와 같이 코드로 입력해야한다.아래 사이트를 방문해 원하는 특수문자의 코드를 찾아 사용하면 된다. https://dev.w3.org/html5/html-author/charref
- [체크박스 미리 체크해놓고 수정 못하게 막기](https://wallel.com/체크박스-미리-체크해놓고-수정-못하게-막기/) - HTML // HTML5 // older checked를 쓰면 기본으로 체크가 되어 있게 한다.disabled를 쓰면 해당 input의 값을 사용자가 변경할 수 없게 한다. + 2022-10-06 추가말 그대로 읽을 수 만 있게 하는 readyonly 라는 속성도 있다.
- [Unsplash 랜덤 이미지 URL 사용하기](https://wallel.com/unsplash-랜덤-이미지-url-사용하기/) - Unsplash에서는 API 사용 없이 간단하게 URL 호출로만 랜덤 이미지를 제공해주는 기능이 있다. 공식 문서에서는 찾지 못해 구글링만 해서 찾았어야 했는데 기록용으로 남긴다.사실 공식 문서에 없어서 언제 사라질지 모르는 기능이기도 하고.. 🤔 기본 URL https://source.unsplash.com/random 옵션 1. 크기 https://source.unsplash.com/random/300×300 WIDTHxHEIGHT 로 입력 2. 사용자 https://source.unsplash.com/user/USERNAME USERNAME에 사용자명 입력ex) https://source.unsplash.com/user/max_duz https://source.unsplash.com/user/max_duz/300x300 크기를 지정해서 사용하는 것도 가능하다. 3.
- [fadeIn, fadeOut 효과 (w. Vanilla JS, CSS Keyframes)](https://wallel.com/vanilla-js-css-keyframes를-사용한-fadein-fadeout-효과/) - 간단하게 CSS의 Keyframes와 Vanilla JavaScript를 활용한 fadeIn, fadeOut 효과를 만드는 방법을 기록한다. Preview See the Pen fadeIn / fadeOut Effect (w. Vanilla JS, CSS Keyframes) by Tae Young, Kim (@kty0529) on CodePen. HTML fadeIn Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur fugiat perspiciatis excepturi tenetur, corrupti delectus nisi illo incidunt optio
- [파일 첨부 input 외형 변경 (w. jQuery)](https://wallel.com/파일-첨부-input-외형-변경/) - input type file의 외형을 간단히 수정할 수 있는 방법을 기록한다. jQuery로 작성되어 있으나 IE는 고려하지 않았다. HTML 첨부하기 .file_real이 실제로 작동하는 input 이고.file_fake는 사용자에게 보여지는 input이다. readonly를 추가하여 사용자가 수정할 수 없게 하고
- [IE, isNaN 함수 대체](https://wallel.com/ie-isnan-함수-대체/) - IE에서는 isNaN 함수가 없기 때문에 필요한 경우 수동으로 추가 작업을 해줘야한다. CODE if ( ! Number.isNaN ) { Number.isNaN = function isNaN(value) { return value !== value; }; }
- [[jQuery] 랜덤으로 class 추가하기](https://wallel.com/jquery-랜덤으로-class-추가하기/) - 방법1 변수 classes에 할당된 배열의 이름을 li 태그에 랜덤으로 부여 $(document).ready(function(){ var classes = ["one", "two", "three"]; $('li').addClass(classes[~~(Math.random()*classes.length)]); }); 방법2 변수 bgImageTotal 변수의 숫자를 최대값으로 하여 li 태그에 image1 ~ 5 class를 랜덤으로 부여 $(document).ready(function () { var bgImageTotal = 5; var randomNumber = Math.round(Math.random() * (bgImageTotal - 1)) + 1; $('li').addClass('image' + randomNumber); });
- [Chrome, Firefox에서 사용 가능한 주소 복사 기능](https://wallel.com/js-주소-복사-스크립트-크롬-파폭-사용-가능/) - function copy_trackback(address) { var IE=(document.all)?true:false; if (IE) { if(confirm("이 글의 주소를 클립보드에 복사하시겠습니까?")) window.clipboardData.setData("Text", address); } else { temp = prompt("이 글의 주소입니다. Ctrl+C를 눌러 클립보드로 복사하세요", address); } } 링크 출처 - http://jang8584.tistory.com/135
- [티스토리 스킨 설치방법](https://wallel.com/티스토리-스킨-설치방법/) - 스킨 메뉴에서 바로 적용하는게 아닌, 다운받은 티스토리 스킨 파일의 설치방법이다. 스킨을 처음 설치하거나, 설치한 스킨이 제대로 작동하지 않는다면 아래 step을 천천히 따라해볼 것. step 1 - 파일 업로드 관리자 화면 > 스킨 > 스킨 등록으로 접속한다. 다운받은 파일을 추가(첨부)한다. 전체 드래그를 하여 첨부를 하면 스크린샷과 같이 images 폴더의 파일이 누락된다. 스킨에 따라 images 폴더 내에
- [회원인지 비회원인지 체크하기](https://wallel.com/회원인지-비회원인지-체크하기/) - 티스토리 메뉴바를 활용해 작동되는 스크립트이다.관리자에서 메뉴바를 제거했다면 동작하지 않으니 주의하자. 로그인 한 티스토리 회원이라면 에 member라는 class를 추가하고비회원이라면 guest라는 class를 추가한다. 코드 $(document).ready(function() { var getText = $('#tistorytoolbarid').find('.tt_menubar_logout').children('.tt_menubar_link_tit').text(); var $html = $('html'); if (getText == '로그인') { $html.addClass('guest'); } else if ( getText == '로그아웃' ) { $html.addClass('member'); } });
- [onclick 링크 (새창/팝업/현재창/프레임)](https://wallel.com/onclick-링크-새창팝업현재창프레임/) - onclick 속성을 사용하여 링크를 이동하는 방법에 대해 기록해둔다. 1. 즉시 이동 네이버 2. 새 창으로 열기 네이버 이후 언급되는 window.open() 인터페이스에 대해선 mdn에서 자세히 볼 수 있다. 3. 팝업으로 열기 네이버 마지막 width=430 같은 옵션 값은 mdn 문서의 Parameters 에서 windowFeatures를 참고해보면 더 많은 옵션을
- [Visual Studio Code 추천 확장 프로그램](https://wallel.com/visual-studio-code-추천-확장-프로그램/) - 한동안 vscode를 사용하면서 작업에 도움이 되고 편리했던 확장 프로그램을 노션에 정리해보았다. 조만간 블로그로 옮겨야지 ... https://wallel.notion.site/c1d23c84ea5a4418a1c5680f7c305821
- [국내외 웹사이트 빌더 업체 리스트](https://wallel.com/국내외-웹사이트-빌더-업체-리스트/) - 코딩 지식이 없어도 손쉽게 웹사이트를 만들 수 있는 서비스를 제공하는 업체를 알아두기 위해 모아봤다. 해외 1. Squarespace (https://www.squarespace.com/) 반응형템플릿쇼핑몰유료 2. Wix (https://ko.wix.com/) 반응형한국어 지원템플릿쇼핑몰무료/유료 국내 1. 아임웹 (https://imweb.me/) 반응형템플릿쇼핑몰무료/유료상세 기능 - https://imweb.me/features 2. 모두 (https://www.modoo.at/) 네이버 자회사PC/Mobile템플릿네이버 톡톡 연동네이버 스마트 스토어 연동상세 기능 - https://www.modoo.at/home/main/promote 3. 크리에이터링크 (https://creatorlink.net/) 4. 식스샵 (https://www.sixshop.com/)
- [파일 탐색기에서 OneDrive 아이콘 제거하기](https://wallel.com/파일-탐색기에서-onedrive-아이콘-제거하기/) - Windows는 OneDrive가 기본으로 설치되어있다.사용하지 않아 삭제를 해도 파일 탐색기에는 바로가기가 남아있는데, 불편하니 제거하는 방법을 기록한다. 레지스트리 편집기 실행 Win + R 버튼을 눌러 실행기를 켜고 regedit을 입력한다. KEY 찾아가기 HKEY_CLASSES_ROOT\CLSID\{018D5C66-4533-4307-9B53-224DE2ED1FE6} 위 경로를 직접 찾아가거나, Ctrl + F 를 눌러 018D5C66-4533-4307-9B53-224DE2ED1FE6를 검색한다. 값 중 System.IsPinnedToNameSpaceTree을 더블클릭하여 값 데이터를 1에서 0으로 변경하면 끝
- [레이어 화면 중앙 정렬 (가로, 세로)](https://wallel.com/position-absolute-속성을-이용한-레이어-화면-중앙-정렬-가로-세로/) - 화면 중앙에 div를 놓고싶을 때 사용.width, height 값이 반드시 필요하니 주의 .center { position: absolute; margin: auto; top: 0; right: 0; bottom: 0; left: 0; width: 100px; height: 100px; } wallel
- [xampp 프로그램 종료 시 xampp-control.ini 권한 에러 발생할 때](https://wallel.com/xampp-프로그램-종료-시-xampp-control-ini-권한-에러-발생할-때/) - xampp 프로그램을 종료할 때 xampp-control.ini 파일에 대한 권한이 없다고 경고창이 뜨는 경우가 있다.한번 뜬 경고창은 닫을 수 없고 프로그램 응답 없음이 떠야 windows에서 프로그램을 강제 종료한다. 두 가지 방법으로 문제 해결을 시도해볼 수 있다. 1. 관리자 권한으로 실행 xampp control panel 자체를 관리자 권한으로 실행한다. 2. xampp-control.ini 파일에 쓰기 권한 부여 xampp가 설치된 드라이브를 찾아가
- [Filezilla에서 vscode를 기본 편집기로 설정하기](https://wallel.com/filezilla에서-vscode를-기본-편집기로-설정하기/) - 파일질라(Filezilla)는 설정에서 프로그램 기본 편집기를 변경할 수 있다.이 설정을 사용해 vscode를 기본 편집기로 연결하려고 했는데 생각보다 vscode 파일의 경로가 이상해서 기록해둔다. FTP 설정 설정을 열고 [ 파일 편집 ] 페이지로 이동한다. [ 사용자 편집기 사용 ]에 체크하고, [ 찾아보기 ]를 누른다. C: 드라이브의 사용자 폴더로 이동해 다음 경로를 찾아가 Code.exe 파일을 선택한다. 설정을 저장하면 remote의
- [에디터에서 KBoard 미디어 추가 버튼 제거하기](https://wallel.com/에디터에서-kboard-미디어-추가-버튼-제거하기/) - 사이트 납품 시 KBoard를 사용하여 게시판을 제공해줄 때게시판 글쓰기 화면의 KBoard 미디어 추가 버튼과 에디터 기능 중의 KBoard 미디어 추가 아이콘을 제거하고싶을 때 사용할 수 있다. 다음 코드를 테마의 functions.php 에 추가하면 된다. /** * KBoard 미디어 추가 버튼 제거 */ function remove_kboard_media_button(){ remove_action( 'media_buttons', 'kboard_editor_button' ); remove_filter( 'mce_buttons', 'kboard_register_media_button' ); remove_filter( 'mce_external_plugins', 'kboard_add_media_button' );
- [strpos / 문자열을 포함하고 있는지 검사](https://wallel.com/strpos-문자열을-포함하고-있는지-검사/) - "홍길동의 아버지" 라는 텍스트에 "아버지" 라는 글자가 있다면 '포함'없다면 '미포함' 출처 :: http://ezcode.tistory.com/47
- [HTTP 상태 코드](https://wallel.com/http-상태-코드/) - 간혹 사이트 이용 또는 작업시 404, 502, 403 등의 숫자와 함께 에러 메세지가 출력될 때가 있다.위키백과에 HTTP 응답 상태 코드가 한글로 잘 정리가 되어있어 링크를 남긴다. https://ko.wikipedia.org/wiki/HTTP_%EC%83%81%ED%83%9C_%EC%BD%94%EB%93%9C
- [select box, input box style 초기화 CSS](https://wallel.com/select-box-input-box-style-초기화-css/) - select box와 input box의 스타일을 잡기 위해선 스타일을 초기화 시켜 주는게 좋다.특히 Mac은 Windows와 다르게 select box의 경우 스타일을 초기화 하지 않으면 원하는 CSS 를 입힐 수 없다. 다음 코드를 참고하여 원하는 속성을 사용하면 된다.속성은 찾는 대로 계속 추가해 나갈 예정. /* input 기본 스타일 초기화 */ input { -webkit-appearance: none; -moz-appearance: none; appearance: none;
- [Sublime Text 3 커맨드에서 명령어 보기](https://wallel.com/sublime-text-3-커맨드에서-명령어-보기/) - 에디터에서 특정 커멘드의 명령어를 찾아 커스텀 단축키를 추가하기 위해 기록한다.Ex) copy_file_path의 command 명령어 찾기 Ctrl + `를 눌러 커멘드 창을 열고 아래 명령어를 입력한다. sublime.log_commands(True) *True 대소문자 주의 명령어를 알고자 하는 행동을 하고 command에 뜨는 이름을 복사하여 사용한다.마지막으로 로그 보기는 아래 명령어로 끄자. sublime.log_commands(False) 참고링크 https://superuser.com/questions/636057/how-to-set-shortcut-for-copy-file-path-in-sublime-text-3
- [placeholder에 CSS적용시는 방법](https://wallel.com/placeholder에-css적용시는-방법/) - placehoder에 아주 간단하게 CSS를 적용시킬 수 있다. input::-webkit-input-placeholder { font-size: 90%; } input::-moz-placeholder { font-size: 90%; } input:-ms-input-placeholder { font-size: 90%; } input:-moz-placeholder { font-size: 90%; } input::placeholder { font-size: 90%; } 이렇게 하면 사이트 내 모든 input의 placeholder에 font-size: 90%; 가 적용된다.style은 각각 따로 지정해줘야 적용되니 주의하자.(콤마로 한번에 style을 입히면 작동하지 않는걸 확인했다. 왜지..)
- [삼항 연산자 사용법](https://wallel.com/삼항-연산자-사용법/) - 삼항 연산자(혹은 삼항식)를 사용해 긴 if 문을 짧게 줄일 수 있다.if 문의 결과를 변수에 담고자 할 때 혹은 간단한 if문을 보기 좋게 한 줄로 쓰고자 할 때 사용할 수 있다. 적용 전 var foo = ''; if (5 > 0) { foo = 'true'; } else { foo = 'false'; } 적용 후 var foo
- [포토샵의 Drop shadows를 CSS로 변환시켜주는 사이트](https://wallel.com/포토샵의-drop-shadows를-css로-변환시켜주는-사이트/) - http://psd-to-css-shadows.com/ 포토샵의 shadows 값을 CSS로 변경해주는 사이트.설정된 값에 맞춰 box-shadow와 text-shadow CSS를 만들어준다. 2019-05-30링크 주소 변경
- [우커머스 결제 화면의 청구지 주소 필드 제거](https://wallel.com/우커머스-결제-화면의-청구지-주소-필드-제거/) - 우커머스로 디지털 콘텐츠를 판매할 경우 상품을 배송하는 것이 아니기 때문에 주소를 받을 필요가 없다. 결제 화면에서 이 주소 필드를 없애려면 아래 코드를 사용하면 된다. /** * 우커머스 주소 필드 없애기 * https://wpbeaches.com/remove-address-fields-in-woocommerce-checkout/ */ function custom_override_checkout_fields( $fields ) { unset($fields['billing']['billing_company']); unset($fields['billing']['billing_address_1']); unset($fields['billing']['billing_address_2']); unset($fields['billing']['billing_city']); unset($fields['billing']['billing_postcode']); unset($fields['billing']['billing_country']); unset($fields['billing']['billing_state']); unset($fields['billing']['billing_phone']); return $fields; } add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' ); ※
- [우커머스 재고 관리 옵션 제거](https://wallel.com/우커머스-재고-관리-옵션-제거/) - 지난 글에 이어 디지털 콘텐츠를 판매할 경우 재고 관리가 필요 없기 때문에 상품 등록 시 나타나는 SKU 필드와 상품 조회에 나타나는 SKU 문구를 제거할 수 있는 코드를 기록한다. 코드 /** * 우커머스 재고 관리 기능 없애기 * https://www.skyverge.com/blog/how-to-hide-sku-woocommerce-product-pages/ */ add_filter( 'wc_product_sku_enabled', '__return_false' ); ※ 관리자 페이지의 우커머스 설정에서 "재고 관리 활성화"를 체크 해제해 주는 것을
- [워드프레스 Admin bar 관리자한테만 보이기](https://wallel.com/워드프레스-admin-bar-관리자한테만-보이기/) - 회원제 블로그 또는 사이트를 운영 중인 경우 어드민 바(Admin Bar)를 숨기고 싶은 경우가 있다.회원 관리 플러그인을 통해 숨기는 방법, Admin Bar 전용 플러그인을 설치해 제어하는 방법 등 방법은 많지만 외부 기능에 기대지 않고 functions.php에 간단한 코드 추가로 숨길 수 있는 방법이 있어 기록한다. 다음 코드를 테마의 functions.php 파일에 추가하면 된다. 참고자료 참고 함수 :: current_user_can, show_admin_bar읽어보면 좋은
- [[jQuery] 셀렉트박스에서 특정 옵션 선택시 레이어 나타내기](https://wallel.com/jquery-셀렉트박스에서-특정-옵션-선택시-레이어-나타내/) - select 에서 특정 option 선택시 레이어를 보여주고 숨기고 할 수 있는 스크립트. jQuery jQuery('#selectBox').change(function() { var state = jQuery('#selectBox option:selected').val(); if ( state == 'option2' ) { jQuery('.layer').show(); } else { jQuery('.layer').hide(); } }); 스크립트를 추가하고 HTML 전체 옵션1 옵션2 옵션3 내용 마크업을 한 뒤
- [Lorem Ipsum 사이트 모음 (한글, 다국어)](https://wallel.com/lorem-ipsum-사이트-모음-한글-다국어/) - 사이트를 제작할 때 편히 사용되는 로렘 입숨(Lorem Ipsum)을 자동으로 생성해주는 사이트를 스크랩한다. 로렘 입숨의 정의 로렘 입숨(lorem ipsum; 줄여서 립숨, lipsum)은 출판이나 그래픽 디자인 분야에서 폰트, 타이포그래피, 레이아웃 같은 그래픽 요소나 시각적 연출을 보여줄 때 사용하는 표준 채우기 텍스트로, 최종 결과물에 들어가는 실제적인 문장 내용이 채워지기 전에 시각 디자인 프로젝트 모형의 채움 글로도 이용된다. 이런
- [알림판의 기본 위젯 제거하기](https://wallel.com/알림판의-기본-위젯-제거하기/) - 워드프레스를 설치하고 나면 알림판에 여러 기본 위젯들이 나타난다. 개인적으로 사용하는 블로그형 사이트라면 놔둬도 크게 상관은 없는데, 클라이언트에게 납품하는 사이트의 경우 제거해서 납품하는게 좀 더 여러모로 정말 많이 낫다. ※ 대시보드에 기본 위젯이 추가될 경우 그에 맞춰 계속 업데이트 할 예정. 1. 기본 위젯 제거 remove_meta_box( $id, $page, $context ); 함수를 사용하여 원하는 위젯을 제거할 수 있다. 사용법은 의외로 간단하다.
- [관리자 > 사용자 목록에 원하는 컬럼(Column) 추가하기](https://wallel.com/관리자-사용자-목록에-원하는-컬럼column-추가하기/) - 관리자의 사용자 페이지에 원하는 Column(이하 컬럼)을 추가하는 방법에 대해 스크랩 한다. 1. 컬럼 추가 테마의 functions.php 파일에 add_filter를 사용하여 컬럼을 추가한다. function custom_user_columns( $column ) { $column['registered'] = '가입일'; $column['url'] = '웹사이트'; return $column; } add_filter( 'manage_users_columns', 'custom_user_columns' ); $column['컬럼명(영문)'] = '컬럼라벨'; 처럼 사용하여 더 많은 컬럼을 추가할 수 있다. 2. 컬럼 내용 추가 1번에서
- [[jQuery] 스크롤시 class 추가/제거](https://wallel.com/jquery-스크롤시-class-추가제거/) - 기록기록 방법1 화면을 스크롤 하면 header 에 scroll 이라는 class 가 추가된다. 방법2 $(window).scroll(function() { var scroll = $(window).scrollTop(); //console.log(scroll); if (scroll >= 50) { //console.log('a'); $(".header").addClass("change"); } else {
- [[jQuery] A 링크 클릭 방지 (# 대체)](https://wallel.com/jquery-a-링크-클릭-방지-대체/) - a태그에 링크 기능을 넣지 않거나 아직 링크가 없을 경우 흔히 href값에 #을 넣는다. 근데 이 링크를 누르면 '#' 때문에 자꾸 페이지 상단으로 이동되니 여간 귀찮은게 아니다. 링크의 href값이 #일 경우 링크를 눌러도 아무런 반응이 없게 하는 방법을 기록한다. 방법1 자바스크립트 액션 실행할 Anchor 태그 // 방법 1 - 모든 기존 선언된 이벤트
- [[jQuery] smooth scroll to top 페이지 상단으로 부드럽게 이동하기](https://wallel.com/jquery-smooth-scroll-to-top/) - jQuery('a[href="#top"]').click(function(e){ e.preventDefault(); jQuery('html, body').animate({ scrollTop: 0 },500) }); Scroll to Top #top 이라는 주소를 가진 링크를 클릭하면 스크립트가 작동한다. http://abc.com/#top 과 같이 주소 뒤에 #top이 붙지 않게 하기 위해 preventDefault 로 기존 링크의 기능을 제거시켰다. 500을 원하는 숫자로 조절해 스크롤 속도를 지정 할 수 있다. 관련 글 fade in, fade out 되는 위로가기 버튼
- [관리자가 아니라면 wp-admin 페이지 접근 못하게 막기](https://wallel.com/관리자가-아니라면-wp-admin-페이지-접근-못하게-막기/) - 관리자가 아닌 일반 회원(구독자)이라면 wp-admin 페이지의 접근을 제한시킨다. 테마의 functions.php에 추가하면 작동한다. 아직까지 별 다른 문제는 발견하지 못함. 코드 /** * 관리자가 아닌 사람은 관리자 페이지 접근 금지시키기 * current_user_can()을 변경하여 권한을 수정해서 사용하면 된다. * http://natko.com/block-access-to-wp-admin-and-wordpress-dashboard/ */ function stop_access_dashboard() { if ( ! current_user_can( 'administrator' ) && ! ( defined('DOING_AJAX') && DOING_AJAX ) )
- [Admin Bar 아이템 제거 방법](https://wallel.com/admin-bar-아이템-제거-방법/) - 워드프레스는 사용자 로그인 시 어드민 바(Admin Bar)가 노출된다. 어드민 바에는 워드프레스 기본 버튼이나, 각종 플러그인의 버튼이 나타나는데, 다음은 이 버튼을 숨기는 방법이다. ※ 워드프레스는 어드민 바의 아이템을 노드(nodes)라고도 부른다. 사용 $wp_admin_bar->remove_node( $id ); $id에 제거하고자 하는 노드 아이디를 넣으면 된다. Parameters($id) 확인법 wp-admin-bar-edit 에서 "wp-admin-bar-"를 제외한 "edit"이 노드 아이디가 된다. 예제 function remove_admin_bar_node( $wp_admin_bar )
- [TinyMCE에 스타일(CSS) 추가하기](https://wallel.com/tinymce에-스타일-추가하기/) - 워드프레스의 TinyMCE는 다양하게 기능을 추가할 수 있다. 그 중 add_editor_style( $stylesheet )을 사용하여 에디터에 Style을 쉽게 추가할 수 있는데, Admin의 에디터에선 스타일이 적용되나, Front의 에디터에는 스타일이 적용되지 않는 문제가 있다. 이 때 사용하면 되는 함수를 기록한다. 테마의 functions.php 편집 우선 에디터에 스타일을 불러오는 add_editor_style( $stylesheet ); 함수를 사용해서 스타일을 추가한다. add_editor_style( get_theme_file_uri( 'css/editor-style.css' ) );
- [KBoard 스킨 제작시 알아두면 좋은 PHP 정리](https://wallel.com/kboard-스킨-제작시-알아두면-좋은-php-정리/) - 스킨 제작에 참고할 수 있게 자주 사용되는, 또는 알아두면 좋은 PHP 코드를 정리해보았다. 코드 관련 정보는 지속적으로 추가 및 개선해 나갈 예정이다. 일반 기능 일반적으로 두루두루 사용되는 기능이다. 관리자 체크 $board->isAdmin(); 게시글이 공지사항인지 체크 $content->notice; 활용에 따라 공지사항에만 다른 내용을 추가 하거나, 일반 글에만 내용 추가 가능. 날짜 관련 정보 게시글의 날짜 관련된 정보를 뽑아올
- [KBoard 체크박스 필수로 선택하게 하기](https://wallel.com/kboard-체크박스-필수로-선택하게-하기/) - KBoard의 입력 필드를 활용하여 여러 입력폼을 추가할 수 있다. 이 중 체크박스를 추가하고 해당 체크박스에 체크를 해야 글을 쓸 수 있게 하는 방법을 기록한다. 체크박스를 추가하는 방법은 이 글(링크)에서 확인할 수 있다. 1. script.js 수정 수정하고자 하는 KBoard 스킨의 script.js 파일을 열고 다음 코드를 찾는다. ※ KBoard 최신 버전의 경우 script.js 파일이 존재하나, 스킨에 따라
- [KBoard 입력 필드를 사용해 체크박스를 추가하는 방법](https://wallel.com/kboard-입력-필드를-사용해-체크박스를-추가하는-방법/) - KBoard에서 입력 필드를 활용하여 체크박스를 만들고 값을 저장하여 사용하는 방법이다. editor.php checked> 체크박스 input type="hidden" 이 있어야 글을 수정할 때 제대로 작동한다. document.php, list.php
- [KBoard 입력 필드 활용하기](https://wallel.com/kboard-입력-필드-활용하기/) - KBoard는 입력 필드를 사용하여 글 작성 시 더 많은 내용을 입력하는게 가능하다. 알면 좋은 기능이지만 따로 정리된 글이 없어 자주 쓰이는 몇 가지를 나름대로 정리해봤다. 사용법이 더 생각나면 추가할 예정이다. editor.php 파일을 편집하여 입력 필드를 추가하고, document.php / latest.php 등 아무 곳에서나 값을 가져다 사용하면 된다. 기본적인 입력 필드의 추가/사용은 이곳(링크)을 참고할 것. TEXT FIELD 추가
- [KBoard 라디오버튼 필수로 선택하게 하기](https://wallel.com/kboard-라디오버튼-필수로-선택하게-하기/) - 이전 글(링크)에선 체크박스를 반드시 선택하게 하였는데, 이번엔 라디오버튼을 필수로 선택하게 하거나 특정 옵션을 선택해야만 글이 등록되게 하는 코드를 기록해둔다. 1. script.js 수정 수정하고자 하는 KBoard 스킨의 script.js 파일을 열고 다음 코드를 찾는다. ※ KBoard 최신 버전의 경우 script.js 파일이 존재하나, 스킨에 따라 editor.php 파일에 inline으로 script가 삽입되어있는 경우도 있으니 주의하자. function kboard_editor_execute(form){ jQuery.fn.exists = function(){
- [댓글 작성자명 관리자와 본인만 보게 수정하기](https://wallel.com/댓글-작성자명-관리자와-본인만-보게-수정하기/) - KBoard-comments 스킨을 수정하여 댓글 작성자명을 관리자와 작성자 본인에게만 보이게 수정해보았다. 댓글 작성자가 관리자라면 관리자의 이름을 노출한다. 본인의 이름을 볼 수 있는 건 당연히 회원만 가능하다. list-template.php 목록에서 작성자를 노출하는 코드를 검색하여 다음과 같이 수정하면 된다. $current_user = wp_get_current_user(); if ( $board->isAdmin() ) { echo $comment->user_display; } else { if ( $comment->user_uid == $current_user->ID || $comment->user_uid
- [배경 그라데이션 효과 - CSS Gradient](https://wallel.com/배경-그라데이션-효과-css-gradient/) - 이미지를 사용하지 않고 CSS를 사용하여 div 또는 특정 태그의 배경에 Gradation 효과를 넣을 수 있다. background: #397fb3; /* For browsers that do not support gradients */ background: -webkit-linear-gradient(left, #139dba , #397fb3); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(right, #139dba, #397fb3); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(right, #139dba, #397fb3); /* For Firefox
- [[jQuery] 스크롤 따라다니는 사이드바(레이어) - stick kit](https://wallel.com/jquery-스크롤-따라다니는-사이드바레이어-stick-kit/) - https://github.com/leafo/sticky-kit 참고용
- [브라우저 버전, 종류 체크](https://wallel.com/브라우저-버전-종류-체크/) - 간단하게 스크립트를 삽입하는걸로 브라우저 버전을 체크, 에 class 를 추가할 수 있다. 크로스브라우징을 할 때 유용하다. 추가로 공식 홈페이지 내의 스크립트를 사용해 특정 위치에 현재 접속한 브라우저의 이름과 버전 등을 노출시킬 수도 있다. http://jquery.thewikies.com/browser/
- [[js] Linkify - 자동 링크 추가](https://wallel.com/linkify-자동-링크-추가/) - 글이나 댓글에 달린 주소에 자동으로 링크(a)를 걸어주는 JS 플러그인. ex) http://wallel.com -> http://wallel.com 공식 홈페이지를 접속해보면 어떻게 작동하는지 이해하기 더 쉬우니 참고해볼것. 홈페이지 - http://soapbox.github.io/linkifyjs/ GitHub - https://github.com/SoapBox/linkifyjs
- [Retina display 를 위한 js 플러그인](https://wallel.com/retina-display-를-위한-js-플러그인/) - 공식홈페이지 :: https://imulus.github.io/retinajs/ 스크립트를 include 하고 img 태그 뒤에 특정 명령어를 입력하면, Retina Display 일 때 해당 크기의 이미지를 불러온다. 자세한 설명은 공식 홈페이지를 참고.
- [Emmet Cheat Sheet](https://wallel.com/emmet-cheat-sheet/) - Emmet 단축키를 전부 볼 수 있는 Documentation https://docs.emmet.io/cheat-sheet/
- [[js] 금액 단위에 자동으로 콤마(,)를 붙여주는 함수](https://wallel.com/js-금액-단위에-자동으로-콤마를-붙여주는-함수/) - // 숫자 타입에서 쓸 수 있도록 format() 함수 추가 Number.prototype.format = function(){ if(this==0) return 0; var reg = /(^[+-]?\d+)(\d{3})/; var n = (this + ''); while (reg.test(n)) n = n.replace(reg, '$1' + ',' + '$2'); return n; }; // 문자열 타입에서 쓸 수 있도록 format() 함수 추가 String.prototype.format = function(){ var num = parseFloat(this); if(
- [로그인 페이지 URL 변경](https://wallel.com/로그인-페이지-url-변경/) - KBoard나 여타 플러그인에서는 권한이 없는 사용자를 로그인 페이지로 이동(Redirect)시킨다. 이때 이동되는 페이지는 워드프레스 기본 로그인 페이지가 된다. 이 기본 로그인 페이지가 아닌 프론트단에서 커스텀한 페이지로 이동시키려면 add_filter 기능을 사용하면 된다. 코드 function my_login_page( $login_url, $redirect, $force_reauth ){ return get_permalink(823); } add_filter( 'login_url', 'my_login_page', 10, 3 ); 2번째 줄의 return 값을 원하는 주소로 변경하여 사용하면 된다.
- [CSS 속성 선택자 정리 - CSS [attribute] Selector](https://wallel.com/css-속성-선택자-정리-css-attribute-selector/) - CSS 작업에 사용하면 유용한 요소인 속성 선택자를 정리해본다. 어지간한 모던 브라우저는 다 지원하고, Internet Explorer는 7부터 지원한다. 자세한 정보 :: w3schools.com - CSS Selector Reference [attribute] a[target] { color: red; } a태그에 target이라는 속성을 가진 요소를 선택한다. = link 선택함 = link 선택하지 않음 [attribute="value"] a[target="_blank"] { color: red; } a태그에 target="_blank"라는 속성을 가진 요소를 선택한다. ※
- [드래그 색상 변경하기](https://wallel.com/selection-드래그-색상-변경하기/) - 화면 드래그 색상을 변경해준다. IE9부터 지원하니 다양하게 활용할 수 있겠다. 코드 ::-moz-selection { color: #fff; background-color: #888; } ::selection { color: #fff; background-color: #888; }
- [php 에러 코드 불러오기](https://wallel.com/php-에러-코드-불러오기/) - PHP는 코드가 잘못되면 사이트 자체가 죽어버린다. (공포의 500에러) 이 때 어디가 잘못되었는지 보고싶다면 아래 코드를 사용하면 된다. 사이트 로딩시 제일 처음 불러와지는 파일에 넣어서 사용하거나, 의심되는 파일의 최상단에 넣어 사용하면 된다. 주석처리 해 두었다가 필요에 따라 잠시 풀어서 확인하면 편리하다. (물론 더 편한 방법은 있을것이다) 코드 error_reporting(E_ALL); ini_set("display_errors", 1); 참고 자료 http://www.php.net/manual/kr/errorfunc.configuration.php
- [[SSH] MySql 백업 명령어 (mysqldump)](https://wallel.com/ssh-mysql-백업-명령어-mysqldump/) - 사이트를 전체 백업하여 복제할 일이 있어 찾아보고 스크랩한다. 일반적인 방법 mysqldump -u[username] -p[password] [dbname] > [filename].sql 값 설명 [username] DB 사용자명 [password] DB 비밀번호 [dbname] DB 명 [filename] 생성할 파일 이름 실제 사용 가정: username = wallel, password = wallelpw, dbname = walleldb mysqldump -uwallel -pwallelpw walleldb > backupmysql.sql 비밀번호에 특수문자가 포함될 경우 예를들어 "wallel-db-password-1234@"와
- [현재 로그인 한 유저 정보 불러오는 함수](https://wallel.com/유저-정보-불러오는-함수/) - 현재 로그인 한 유저의 정보를 불러오는 방법이다. 원문 글 - Wordpress Codex Function Reference/wp get current user 예제 $current_user = wp_get_current_user(); /** * @example Safe usage: $current_user = wp_get_current_user(); * if ( !($current_user instanceof WP_User) ) * return; */ echo 'Username: '.$current_user->user_login.''; echo 'User email: '.$current_user->user_email.''; echo 'User first name: '.$current_user->user_firstname.''; echo 'User last name:
- ["사용자 정의하기"의 추가 CSS 입력 영역 제거하기](https://wallel.com/사용자-정의하기의-추가-css-입력-영역-제거하기/) - 워드프레스는 개발 능력이 없어도 테마를 손쉽게 수정할 수 있는 "사용자 정의"기능이 있다. (물론 테마에서 지원을 해줘야 작동한다) 잘 사용하면 굉장히 편리한 기능이지만 특정 상황에 따라 기능을 숨기거나 제거해야 할 경우가 있다. 여러 기능 중에 이 글에선 "추가 CSS" 입력 영역을 제거 해보겠다. functions.php 편집 사용중인 테마의 functions.php 파일을 편집기로 열어 다음 코드만 추가하면 된다. function
- [[js] 특정 주소에서 html 에 class 추가하기](https://wallel.com/js-특정-주소에서-html-에-class-추가하기/) - if ( window.location.pathname == '/' ) { var root = document.documentElement; root.className += ' index'; } wondow.location.pathname에 지정된 경로의 URL로 접속 할 경우 index라는 class를 html에 추가해준다. 즉, 현재 보고있는 주소가 http://wallel.com/ 일 경우 html class=" index"가 된다. 만약 http://wallel.com/188 에서 사용하려면 window.location.pathname == '/188' 이라고 하면 된다. index 앞의 스페이스바를 제거할 경우 html class="test index"이렇게 나와야
- [KBoard 첨부파일 url 및 파일명 불러오기](https://wallel.com/kboard-첨부파일-url-및-파일명-불러오기/) - KBoard는 파일 첨부시 무조건 다운로드가 되게 한다. 이미지든, 압축파일든, 그 밖의 무엇이든. 만약 이미지 파일을 첨부하고 그 이미지를 태그로 넣고싶다면 다음 코드를 사용하면 된다.
- [[js] Toggle Visibility - 토글 레이어](https://wallel.com/js-toggle-visibility-토글-레이어/) - 클릭해서 보여주고, 다시 클릭하면 숨기는게 가능한 간단하지만 유용한 자바스크립트 토글 소스. SCRIPT function toggle_visibility(id) { var e = document.getElementById(id); if(e.style.display == 'block') { e.style.display = 'none'; } else { e.style.display = 'block'; } } MARKUP Click here to toggle visibility of element #foo This is foo 참고자료 http://blog.movalog.com/a/javascript-toggle-visibility/
- [[jQuery] fadeIn, fadeOut 되는 위로가기 버튼](https://wallel.com/jquery-fadein-fadeout-되는-위로가기-버튼/) - 화면 스크롤시 특정 높이에서 Scroll to Top 버튼이 fade In 되는 스크립트이다. HTML 는 Font Awesome이다. 원하는 아이콘 또는 텍스트를 사용하면 된다. CSS .scrollUp { display: none; position: fixed; right: 10%; bottom: 80px; padding: 10px 11px; font-size: 13px; line-height: 100%; text-align: center; color: #fff; background-color: #222;
- [서버(ip) 체크해서 운영중인지 멈추었는지 출력](https://wallel.com/서버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 "정상"; } else { echo "닫힘"; } IP주소와 포트번호를 수정해서 사용하면 된다.
- [KBoard 게시판 카테고리 셀렉트박스가 아닌 가로로 출력하기](https://wallel.com/kboard-게시판-카테고리-셀렉트박스가-아닌-가로로-출력/) - 카테고리 선택이 셀렉트박스가 아닌 가로로 나열되어 있는걸 원한 클라이언트가 있어 이래 저래 짜집기 한 PHP 코드이다. 카테고리 1에 등록된 소스만 적용되며, 선택된 카테고리는 a 태그에 active 라는 클래스가 추가되게 하여 수정을 더욱 편리하게 했다. PHP
- [php 파일에서 shortcode 사용하기 - do_shortcode](https://wallel.com/php-파일에서-shortcode-사용하기-do_shortcode/) - 워드프레스 테마 작업 중 템플릿 파일을 마크업 할 때 shortcode를 사용해 위젯을 불러오거나 직접 만든 shortcode를 사용해야 하는 경우가 있다. 이럴 경우 do_shortcode로 간단하게 shortcode를 불러올 수 있다.
- [[jQuery] 특정 소스의 값 뽑아오기 (주소, 경로, 데이터 등등)](https://wallel.com/jquery-특정-소스의-값-뽑아오기-주소-경로-데이터-등등/) - jQuery의 attr() 속성을 사용하면, 특정 소스가 가진 값을 뽑아올 수 있다. 아래 예제를 참고해보자. jQuery(document).ready(function() { var a = jQuery('#original-image').attr("src"); jQuery("#replace-image").attr("src", a); }); original 이라는 이미지와 replace 라는 이미지가 있다. 변수 a 에 attr() 속성을 사용해 original 이미지의 경로(src) 를 담고, 다시 한번 attr() 속성을
- [플러그인 경로 알아내기](https://wallel.com/플러그인-경로-알아내기/) - 플러그인을 제작하거나 수정할 때 php 내에서 특정 파일을 include 하고 싶을 때 사용하면 좋다. plugin_dir_path( __DIR__ ) 은 플러그인의 기본 위치(경로)를 알려준다. ex) /.../wp-content/plugins/kboard/skin/wallel-order/ plugin_dir_path( __FILE__ ) 은 플러그인 폴더에서 현재 파일이 있는 위치(경로)를 알려준다. ex) /.../wp-content/plugins/kboard/skin/wallel-order/parts/ 참고 :: https://developer.wordpress.org/reference/functions/plugin_dir_path/
- [구버전 IE를 위한 background-color: rgba(); 꼼수](https://wallel.com/구버전-ie를-위한-background-color-rgba-꼼수/) - background-color: rgba(); 는 배경색만 투명도를 설정할 수 있는 아주 좋은 속성이다. 하지만 구형 Internet Explorer에서는 지원하지 않기 때문에 사용하기 위해선 다른 방법을 선택해야 한다. 사이트가 구형 IE를 지원해야 하는 경우 종종 사용하는 방법이다. 레이어 #layer { position: relative; width: 150px; height: 150px; } #layer .rgba { position: absolute; top: 0;
- [플러그인 설치시 ftp 정보 물어볼 때 추가할 php](https://wallel.com/플러그인-설치시-ftp-정보-물어볼-때-추가할-php/) - wp-config.php 파일 제일 하단에 define('FS_METHOD','direct'); 이 코드만 추가하면 된다. http://www.hongkiat.com/blog/update-wordpress-without-ftp/
- [워드프레스 - get_permalink, add_query_arg](https://wallel.com/워드프레스-페이지-링크-사용-및-응용-get_permalink-add_query_arg/) - 워드프레스 템플릿이나 특정 php 를 제작할 때 링크를 추가하는 경우 사용할 수 있는 방법이다. 기존의 방식을 사용해도 문제는 없으나, 주소가 변하기 때문에 사용자들의 혼돈을 야기할 수 있다. (물론 설정에 따라 /?p=1234 형식의 주소를 그대로 노출시킬 수 있다) get_permalink 함수를 사용해 링크를 입력하면 링크의 href 자체에 각 페이지들의 완전한 주소를 넣을 수 있게 된다. 기존
- [$_SERVER 함수](https://wallel.com/server-함수/) - 출처 :: http://www.x2chi.com/458 출처 사이트의 글을 그대로 긁어왔습니다. $_SERVER['DOCUMENT_ROOT'] = 현재 사이트가 위치한 서버상의 위치 = webappinclude $_SERVER['HTTP_ACCEPT_ENCODING'] = 인코딩 방식 = gzip, deflate $_SERVER['HTTP_ACCEPT_LANGUAGE'] = 언어 = ko $_SERVER['HTTP_USER_AGENT'] = 사이트 접속한 사용자 환경 = Mozilla4.0(compatible; MSIE 6.0; Windows NT 5.1; Q312461; .NET CLR 1.0.3705 $_SERVER['REMOTE_ADDR'] = 사이트 접속한 사용자 IP = xxx.xxx.xxx.xxx $_SERVER['SCRIPT_FILENAME']
- [[jQuery] .removeClass() 에 .delay() 효과 적용하기](https://wallel.com/jquery-removeclass-에-delay-효과-적용하기/) - jQuery 속성 중 class 를 지워주는 removeClass 라는게 있다. 하지만 이 속성은 document 가 준비되는 순간 또는 window 가 로드되는 순간 class 를 지워버린다. removeClass에 delay효과를 주기 위해선 다음과 같이 setTimeout을 함께 사용하면 된다. setTimeout(function(){ jQuery('html').removeClass('loading'); },1000); 위 소스를 사용하면 1초 후 에서 loading Class를 제거한다. 참고한곳 - https://forum.jquery.com/topic/delay-not-working-on-removeclass
- [Using The WordPress Enqueue Hook](https://wallel.com/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 WP admin function my_theme_scripts_function() { wp_enqueue_script( 'myscript', get_template_directory_uri() . '/js/myscript.js'); } add_action('wp_enqueue_scripts','my_theme_scripts_function'); get_stylesheet_directory_uri() - 자식테마 경로 (있을 경우) get_template_directory_uri() - 부모테마 경로 참고링크 1 :: http://www.wpexplorer.com/javascript-wordpress/ 참고링크 2
- [[js] html에 class 추가/제거 하는 토글 버튼](https://wallel.com/js-html-에-class-추가제거-하는-토글-버튼/) - Toggle var root 의 document.documentElement 는 엘리먼트를 의미한다. if 문을 돌려 만약에 root 에 selector 라는 class 가 있으면 그 클래시를 지워주고 없으면 selector 라는 class
- [괜찮은 플러그인 스크랩](https://wallel.com/괜찮은-플러그인-스크랩/) - Shortcodes Ultimatehttps://wordpress.org/plugins/shortcodes-ultimate/ 숏코드를 손쉽게 만들 수 있는 플러그인 Jetpack by WordPress.comhttps://wordpress.org/plugins/jetpack/screenshots/ 트래픽 최적화 등 여러 좋은 기능을 가진 플러그인 Contact Form 7https://wordpress.org/plugins/contact-form-7/ 컨텍폼 플러그인 Post Types Orderhttps://wordpress.org/plugins/post-types-order/ 글, 슬라이더, 등등 모든 목록을 원하는 순서대로 정렬할 수 있게 해주는 플러그인 Regenerate Thumbnails https://wordpress.org/plugins/regenerate-thumbnails/ 썸네일을 재생성 해주는 플러그인 Force Domain Redirect https://wordpress.org/plugins/force-domain-redirect/ 도메인 리다이렉트 해주는 플러그인. 설치만
- [php include](https://wallel.com/php-include/) - $wwwDir = explode('www', dirname(__FILE__))[0].'www/'; include($wwwDir.'file.php'); 소스 설명 include html 을 포함한 파일을 불러오기 위한 include include_once 함수파일을 한번만 가져오기 위한 include
- [서버 이전 후 도메인 연결이 이상할 때](https://wallel.com/서버-이전-후-도메인-연결이-이상할-때/) - 서버 이전 후 무언가 꼬여서 도메인이 이전 서버의 도메인으로 자꾸 이동한다면 다음 링크의 방법을 해봐야한다. php 편집 https://codex.wordpress.org/Changing_The_Site_URL wp-config.php 편집 과 functions.php 편집을 해야하고 wp-config.php 는 제일 하단에 소스 추가. functions.php 는 테마의 functions.php 파일을 서정하되 제일 상단에 소스를 추가해야한다.※ child 테마가 있다면 그곳의 functions.php 파일 수정해야함 plugin 추가 https://wordpress.org/plugins/domain-replace/ 이전한 서버에 위 플러그인을 추가/설치 하고 OLD
- [타이틀 불러오는 소스](https://wallel.com/타이틀-불러오는-소스/) - 사이에 넣으면 된다. 메인페이지일 경우 "타이틀 | 태그라인" 을 불러오고 그밖의 페이지는 "타이틀 | 페이지 제목 or 글 제목" 을 불러온다. 수정 kboard 사용시 kboard 의 hook 으로
- [첨부파일 개수 추가시 참고사항](https://wallel.com/첨부파일-개수-추가시-참고사항/) - $content->attach->{첨부파일 키}[0] 은 첨부파일 url 입니다. $content->attach->{첨부파일 키}[1] 은 첨부파일 파일명 입니다. http://www.cosmosfarm.com/threads/document/195
- [[js] 페이지 맨 위로 이동하는 버튼 (scroll to top)](https://wallel.com/js-페이지-맨-위로-이동하는-버튼-scroll-to-top/) - 1. 부드럽게 올리기 Go Top 2. 간단 1. Go Top 2. Go Top ※ 2-2 는 Firefox 에서 작동하지 않는다. 추가 정보 - http://wallel.com/241
- [[jQuery] 페이지 하단으로 이동하는 버튼](https://wallel.com/jquery-페이지-하단으로-이동하는-버튼/) - HTML 가자 jQuery $("#go-bottom").click(function(){ $('html, body').scrollTop( $(document).height() ); });
- [[js] Firefox 에서 javascript:scroll(0,0) 안될 때](https://wallel.com/js-firefox-에서-javascriptscroll00-안될-때/) - 이렇게 사용 Do you mean like this:To TopIt seems this should still be supported, per MDN: https://developer.mozilla.org/docs/Web/API/Window/scrollDoes it make any difference if you use:To Topor to separate your event handler from the HTML:To Top- https://support.mozilla.org/ko/questions/1051048
- [[jQuery] 스크립트 로드 순서](https://wallel.com/jquery-스크립트-로드-순서/) - jQuery(document).ready(function() { }); DOM 로드 완료 후 작동 jQuery(window).load(function() { }); 페이지 로드가 완전히 완료된 후 작동도움이 많이 되는 설명 - http://webdir.tistory.com/515
- [[jQuery] jQuery 기반 tabs 플러그인 모음](https://wallel.com/jquery-jquery-기반-tabs-플러그인-모음/) - jQuery EasyTabs https://os.alfajango.com/easytabs/가장 많이 쓰이는 것 같은 플러그인.브라우저 지원 : IE 7+, Firefox 4+, Chrome, Safari, Opera 11Tabslethttp://vdw.github.io/Tabslet/완전 깔끔한게 맘에드는 플러그인브라우저 지원 : IE 7+, Chrome, Firefox, Safari
- [부드럽게 나타나고 숨겨지는 사이드바](https://wallel.com/부드럽게-나타나고-숨겨지는-사이드바/) - 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 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; } html.open #sidebar { overflow-y: auto; -webkit-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); transform: translate3d(0,0,0); -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s;
- [특정 CSS, 최소 IE 버전 기록](https://wallel.com/특정-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-sizing - ie8 webkit, moz http://www.w3schools.com/cssref/css3_pr_box-sizing.asp display: inline-block - ie8 http://www.w3schools.com/cssref/pr_class_display.asp transition - ie10 webkit, moz, o http://www.w3schools.com/cssref/css3_pr_transition-property.asp display: table; - ie9 http://www.w3schools.com/jsref/prop_style_backgroundposition.asp
- [IE7, 8 에서 투명도(opacity) 사용에 필요한 소스 (IE 핵)](https://wallel.com/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 */ 순서가 달라지면 적용이 안된다 들었다. 거지같은 IE

## 페이지

- [무료 배포 파일 통합 라이센스](https://wallel.com/terms/free-software-license/) - 유로로 판매되고 있는 파일 외에 무료로 배포되고 있는 파일에 적용되는 통합 라이센스 입니다.이 라이센스는 파일을 내려받음과 동시에 적용됩니다. 라이센스 저작권이 표기되어 있는 파일의 경우 저작권 표기를 수정 또는 제거할 수 없습니다. 라이센스 표기를 수정하여 저작자가 아닌 다른 이와 함께 제작했다는 듯한 문구를 추가할 수 없습니다. 디자인을 수정하여 디자인 수정자 표기를 원하는 경우 저작자와 협의합니다. 저작자가 아닌
- [이용약관](https://wallel.com/terms/)

## 프로젝트

- [Raphael](https://wallel.com/project/raphael/) - 2단 형식의 스킨입니다. 자주 사용하지 않는 위젯은 하단으로 이동시키고 자주 사용하는 위젯은 우측에 설정하여 더 편하게 사용해보세요. 스킨 옵션을 통해 블로그 가로 길이, 본문/사이드바 너비, 사이드바와 본문 위치 변경을 손쉽게 하실 수 있습니다.
- [Square](https://wallel.com/project/square/) - 가장 기본이 되는 2단 스킨에 불필요한 기능은 제거하여 더 가볍게 제작했습니다. ※ 티스토리 반응형웹 스킨 공모전 대상 수상
- [GEO Source](https://wallel.com/project/geo-source/) - GeoSource는 전 세계 국가 정보를 쉽고 정확하게 활용할 수 있도록 만든 표준 국가 데이터 서비스입니다.ISO 코드, 통화 기호, 다국어 국가명 등 국제 서비스 구축에 필요한 핵심 데이터를 통합 제공하여, 개발자와 서비스 운영자가 국가 정보를 더 빠르고 일관되게 사용할 수 있도록 돕습니다.글로벌 서비스, 회원가입 국가 선택, 결제 및 지역화 기능 등 다양한 환경에서 신뢰할 수 있는
- [SASS Start Kit](https://wallel.com/project/sass-start-kit/) - 반복되는 스타일 초기 세팅을 단 한 번의 @use로 해결하는 SCSS 스타터 키트입니다. 프로젝트 시작 시 반복적으로 세팅하는 SCSS 초석을 빠르게 불러오기 위한 템플릿입니다. core.scss 한 파일만 포함하면 reset, typography, color 시스템과 자주 쓰는 믹스인이 한 번에 준비됩니다.
- [Navy Default](https://wallel.com/project/navy-default/) - 기본적인 KBoard 일반 게시판입니다. 편리한 확장설정을 제공하고 있습니다. 스크린샷과 데모 게시판을 확인해주세요. ※ Cosmosfarm 에서 판매중인 [ Powered By KBoard 삭제 ] 제품과 다른 라이센스가 적용됩니다. [ Powered By KBoard 삭제 ] 제품을 구매하여 사용하시는 분들은 스킨 우측 하단의 [ Powered by KBoard / Designed by wallel ] 에서 [ Powered by KBoard ] 가 제거되고 [

## 스터디

- [쉽게 구현해보는 자바 애플리케이션](https://wallel.com/study/쉽게-구현해보는-자바-애플리케이션/) - Java 기반의 애플리케이션을 요구사항에 맞게 구현하는 과정입니다. 이 과정에서 Java8 ~ 11의 특징인 Stream, Function Programming, Optional 등을 배우면서 비지니스 로직을 작성하고,Junit5를 배우면서 테스트 코드를 작성하여 비즈니스 로직 검증을 하고, 객체지향 프로그래밍을 학습하여 확장 가능하고 재사용 가능하게 구현합니다.
- [만들면서 배우는 실전 퍼블리싱](https://wallel.com/study/만들면서-배우는-실전-퍼블리싱/) - 마크업을 설계할 때 자주 헷갈리는 Semantic 태그와 문서화 구조의 구성, 막연하게 느껴지는 Grid와 Flex, jQuery 없이는 만들 수 없는 JavaScript 코드 등등... 웹 개발을 할 때 가장 기본이 되지만 늘 헷갈리는 퍼블리싱을 5주간 진행되는 온라인 세션을 통해 스터디 리더와 함께 매주 미션을 진행하며 관련 기술 소개, 코드 리뷰를 통해 스터디에서 배운 기술을 손에 익힐 수 있습니다.
- [[Java/Spring] 고양이 사진 검색 사이트 API 과제 풀어보기](https://wallel.com/study/java-spring-고양이-사진-검색-사이트-api-과제-풀어보기/) - 프로그래머스 과제테스트 연습에 있는 고양이 사진 검색 사이트에서 사용된 API를 직접 구현해보면서 Java/Spring을 학습해보는 코드리뷰 강의입니다.

## 포트폴리오

- [합천 댕김 여행사](https://wallel.com/portfolio/합천댕김-여행사/) - 여행사 홈페이지를 제작했습니다.
- [아이나 요가&필라테스 리뉴얼](https://wallel.com/portfolio/아이나-요가필라테스-리뉴얼/) - 프로젝트 개요 Next.js 14와 TypeScript를 기반으로 한 정적 웹사이트입니다. React Query로 상태를 관리하며 SCSS 모듈을 활용해 스타일을 구성했습니다. Vercel Analytics와 Speed Insights를 도입해 성능 지표를 수집합니다. Node.js 20 버전을 .nvmrc로 지정해 개발 환경을 통일했습니다. 주요 기술 스택 package.json에서 Next.js, React, Sass, React Query, Swiper 등을 사용합니다. ESLint와 Stylelint로 코드 품질을 관리하고, Vercel CLI를 포함해 배포에 활용합니다.
- [요가 수업 시간표 디자인](https://wallel.com/portfolio/요가-수업-시간표-디자인/) - Figma를 사용하여 아이나 요가&필라테스에서 사용할 시간표를 디자인 했습니다.
- [아이나 요가&필라테스](https://wallel.com/portfolio/아이나-요가필라테스/) - 요가&필라테스 센터 홈페이지를 만들고 유지보수 중입니다. GitHub Pages를 사용해 배포했으며 react-router가 적용되지 않는 것을 대응하기 위해 react-snap을 활용했습니다. SEO를 최적화 관련해서는 react-helmet을 사용해 각 페이지별 metadata를 정의했습니다. "dependencies": { "gh-pages": "^6.0.0", "react": "^18.2.0", "react-dom": "^18.2.0", "react-helmet-async": "^2.0.5", "react-query": "^3.39.3", "react-router-dom": "^6.23.1", "react-snap": "^1.23.0", }
- [사유학교](https://wallel.com/portfolio/사유학교/) - 사유학교 홈페이지를 제작했습니다.
- [무언가](https://wallel.com/portfolio/무언가/) - 축제 전문 업체인 '무언가'의 홈페이지를 리뉴얼하였습니다.
- [달작](https://wallel.com/portfolio/달작/) - 콘텐츠 에이전시 홈페이지를 개발했습니다.
- [월드펀딩](https://wallel.com/portfolio/월드펀딩/) - P2P 크라우드 펀딩 "월드펀딩"을 제작했습니다.재직했던 회사에서 제작한 자체 P2P 크라우드 펀딩 솔루션인 Fiscus를 사용했습니다.
- [HS펀딩](https://wallel.com/portfolio/hs펀딩/) - P2P 크라우드 펀딩 "HS펀딩"을 제작했습니다.재직했던 회사에서 제작한 자체 P2P 크라우드 펀딩 솔루션인 Fiscus를 사용했습니다.
- [한원건설](https://wallel.com/portfolio/한원건설/) - 건설사 웹사이트를 개발했습니다.
- [세이렌 의원](https://wallel.com/portfolio/세이렌-의원/) - 피부과 웹사이트를 개발했습니다.
- [지주](https://wallel.com/portfolio/지주/) - 해양산업을 전문으로 하는 기업의 웹사이트를 제작했습니다.
- [Barachiel](https://wallel.com/portfolio/barachiel/) - 티스토리 스킨을 개발했습니다.
- [디지털 브로슈어](https://wallel.com/portfolio/디지털-브로슈어/) - 디지털 매거진과 마찬가지로 팀을 이끌어 십여개의 디지털 브로슈어를 배포했습니다.
- [Minimal #1](https://wallel.com/portfolio/minimal-1/) - 사진을 사용하는 블로거를 위한 블로그 스킨을 제작했습니다.
- [디지털 매거진](https://wallel.com/portfolio/디지털-매거진/) - 최초 기획 시 모바일 전용 디지털 매거진을 개발하고Phase2 부터 반응형을 지원하여 PC, Tablet, Mobile을 모두 지원하게 개선했습니다.

## 카테고리

- [CSS](https://wallel.com/category/css/)
- [HTML](https://wallel.com/category/html/)
- [JavaScript](https://wallel.com/category/javascript/)
- [PHP](https://wallel.com/category/php/)
- [워드프레스](https://wallel.com/category/wordpress/)
- [KBoard](https://wallel.com/category/wordpress/kboard/)
- [WP스크랩](https://wallel.com/category/wordpress/wp-scrap/)
- [WP플러그인](https://wallel.com/category/wordpress/wp-plugins/)
- [티스토리](https://wallel.com/category/tistory/)
- [그밖의](https://wallel.com/category/etc/)
- [TS스크랩](https://wallel.com/category/tistory/ts-scrap/)
- [북마크](https://wallel.com/category/bookmark/)
- [우커머스](https://wallel.com/category/wordpress/우커머스/)
- [Sublime Text](https://wallel.com/category/editor/sublime-text/)
- [Visual Studio Code](https://wallel.com/category/editor/visual-studio-code/)
- [node_modules](https://wallel.com/category/node/node_modules/)
- [Node](https://wallel.com/category/node/)
- [편집기](https://wallel.com/category/editor/)
- [Git](https://wallel.com/category/git/)
- [AI](https://wallel.com/category/ai/)

## 태그

- [HTML](https://wallel.com/tag/html/)
- [onclick](https://wallel.com/tag/onclick/)
- [모바일](https://wallel.com/tag/모바일/)
- [CSS](https://wallel.com/tag/css/)
- [Transition](https://wallel.com/tag/transition/)
- [javascript](https://wallel.com/tag/javascript/)
- [scroll to top of page](https://wallel.com/tag/scroll-to-top-of-page/)
- [@fsockopen](https://wallel.com/tag/fsockopen/)
- [PHP](https://wallel.com/tag/php/)
- [Server](https://wallel.com/tag/server/)
- [checkbox](https://wallel.com/tag/checkbox/)
- [checked](https://wallel.com/tag/checked/)
- [disabled](https://wallel.com/tag/disabled/)
- [input](https://wallel.com/tag/input/)
- [클립보드](https://wallel.com/tag/클립보드/)
- [selection](https://wallel.com/tag/selection/)
- [드래그](https://wallel.com/tag/드래그/)
- [드래그 색](https://wallel.com/tag/드래그-색/)
- [CSS3](https://wallel.com/tag/css3/)
- [토글 레이어](https://wallel.com/tag/토글-레이어/)
- [Transform](https://wallel.com/tag/transform/)
- [translate3d](https://wallel.com/tag/translate3d/)
- [addClass](https://wallel.com/tag/addclass/)
- [javscript](https://wallel.com/tag/javscript/)
- [JQuery](https://wallel.com/tag/jquery/)
- [scrollTop](https://wallel.com/tag/scrolltop/)
- [firefox](https://wallel.com/tag/firefox/)
- [javascript scroll](https://wallel.com/tag/javascript-scroll/)
- [불여우](https://wallel.com/tag/불여우/)
- [파이어폭스](https://wallel.com/tag/파이어폭스/)
- [opacity](https://wallel.com/tag/opacity/)
- [background-color](https://wallel.com/tag/background-color/)
- [rgba](https://wallel.com/tag/rgba/)
- [구버전 IE](https://wallel.com/tag/구버전-ie/)
- [className](https://wallel.com/tag/classname/)
- [indexOf](https://wallel.com/tag/indexof/)
- [replaceClass](https://wallel.com/tag/replaceclass/)
- [Hook](https://wallel.com/tag/hook/)
- [Wordpress](https://wallel.com/tag/wordpress/)
- [href="#"](https://wallel.com/tag/href/)
- [링크 동작 방지](https://wallel.com/tag/링크-동작-방지/)
- [이벤트 무시](https://wallel.com/tag/이벤트-무시/)
- [strpos](https://wallel.com/tag/strpos/)
- [Background](https://wallel.com/tag/background/)
- [gradient](https://wallel.com/tag/gradient/)
- [삼항식](https://wallel.com/tag/삼항식/)
- [document.ready](https://wallel.com/tag/document-ready/)
- [window.load](https://wallel.com/tag/window-load/)
- [스크랩](https://wallel.com/tag/스크랩/)
- [워드프레스](https://wallel.com/tag/워드프레스/)
- [플러그인](https://wallel.com/tag/플러그인/)
- [Include](https://wallel.com/tag/include/)
- [첨부파일 개수 늘리기](https://wallel.com/tag/첨부파일-개수-늘리기/)
- [체크박스](https://wallel.com/tag/체크박스/)
- [도메인 변경](https://wallel.com/tag/도메인-변경/)
- [도메인 연결](https://wallel.com/tag/도메인-연결/)
- [서버 이전](https://wallel.com/tag/서버-이전/)
- [Google](https://wallel.com/tag/google/)
- [Loader](https://wallel.com/tag/loader/)
- [webfont](https://wallel.com/tag/webfont/)
- [random class](https://wallel.com/tag/random-class/)
- [랜덤 class](https://wallel.com/tag/랜덤-class/)
- [offset](https://wallel.com/tag/offset/)
- [scroll](https://wallel.com/tag/scroll/)
- [Delay](https://wallel.com/tag/delay/)
- [notworking](https://wallel.com/tag/notworking/)
- [removeClass](https://wallel.com/tag/removeclass/)
- [go to top](https://wallel.com/tag/go-to-top/)
- [scroll to top](https://wallel.com/tag/scroll-to-top/)
- [맨위로](https://wallel.com/tag/맨위로/)
- [Fixed](https://wallel.com/tag/fixed/)
- [on scroll](https://wallel.com/tag/on-scroll/)
- [sidevar](https://wallel.com/tag/sidevar/)
- [sitcky kit](https://wallel.com/tag/sitcky-kit/)
- [errorcode](https://wallel.com/tag/errorcode/)
- [접속한 브라우저 버전 종류 체크](https://wallel.com/tag/접속한-브라우저-버전-종류-체크/)
- [format](https://wallel.com/tag/format/)
- [Money](https://wallel.com/tag/money/)
- [금액 컴마](https://wallel.com/tag/금액-컴마/)
- [자동 a 태그 연결](https://wallel.com/tag/자동-a-태그-연결/)
- [pagetitle](https://wallel.com/tag/pagetitle/)
- [tagline](https://wallel.com/tag/tagline/)
- [TITLE](https://wallel.com/tag/title/)
- [get currentuserinfo](https://wallel.com/tag/get-currentuserinfo/)
- [유저 정보](https://wallel.com/tag/유저-정보/)
- [smooth scroll to top](https://wallel.com/tag/smooth-scroll-to-top/)
- [부드럽게 올라가는 스크롤바](https://wallel.com/tag/부드럽게-올라가는-스크롤바/)
- [최상단으로](https://wallel.com/tag/최상단으로/)
- [ftp 자동 연결](https://wallel.com/tag/ftp-자동-연결/)
- [wp-config.php](https://wallel.com/tag/wp-config-php/)
- [Mac](https://wallel.com/tag/mac/)
- [retina](https://wallel.com/tag/retina/)
- [레티나](https://wallel.com/tag/레티나/)
- [맥](https://wallel.com/tag/맥/)
- [Shortcode](https://wallel.com/tag/shortcode/)
- [숏코드](https://wallel.com/tag/숏코드/)
- [tabs](https://wallel.com/tag/tabs/)
- [제이쿼리](https://wallel.com/tag/제이쿼리/)
- [탭](https://wallel.com/tag/탭/)
- [parameter](https://wallel.com/tag/parameter/)
- [Permalink](https://wallel.com/tag/permalink/)
- [파라미터](https://wallel.com/tag/파라미터/)
- [페이지 링크](https://wallel.com/tag/페이지-링크/)
- [option](https://wallel.com/tag/option/)
- [select](https://wallel.com/tag/select/)
- [selectbox](https://wallel.com/tag/selectbox/)
- [옵션 선택](https://wallel.com/tag/옵션-선택/)
- [html entities](https://wallel.com/tag/html-entities/)
- [특수문자 코드표](https://wallel.com/tag/특수문자-코드표/)
- [kboard](https://wallel.com/tag/kboard/)
- [가로나열](https://wallel.com/tag/가로나열/)
- [카테고리](https://wallel.com/tag/카테고리/)
- [HTML5](https://wallel.com/tag/html5/)
- [http 상태 코드](https://wallel.com/tag/http-상태-코드/)
- [응답 코드](https://wallel.com/tag/응답-코드/)
- [HTTP](https://wallel.com/tag/http/)
- [add_query_arg](https://wallel.com/tag/add_query_arg/)
- [get_permalink](https://wallel.com/tag/get_permalink/)
- [사망식인줄](https://wallel.com/tag/사망식인줄/)
- [첨부파일](https://wallel.com/tag/첨부파일/)
- [파일 url](https://wallel.com/tag/파일-url/)
- [파일명](https://wallel.com/tag/파일명/)
- [kboard file url](https://wallel.com/tag/kboard-file-url/)
- [구형 브라우저](https://wallel.com/tag/구형-브라우저/)
- [아 좀 없어져라](https://wallel.com/tag/아-좀-없어져라/)
- [remove arrow](https://wallel.com/tag/remove-arrow/)
- [화살표 지우기](https://wallel.com/tag/화살표-지우기/)
- [화살표 숨기기](https://wallel.com/tag/화살표-숨기기/)
- [number](https://wallel.com/tag/number/)
- [inlcude](https://wallel.com/tag/inlcude/)
- [plugins](https://wallel.com/tag/plugins/)
- [dir](https://wallel.com/tag/dir/)
- [file](https://wallel.com/tag/file/)
- [path](https://wallel.com/tag/path/)
- [파일 경로](https://wallel.com/tag/파일-경로/)
- [attr](https://wallel.com/tag/attr/)
- [데이터 뽑아오기](https://wallel.com/tag/데이터-뽑아오기/)
- [값 뽑아오기](https://wallel.com/tag/값-뽑아오기/)
- [이미지 주소 변경](https://wallel.com/tag/이미지-주소-변경/)
- [do_shortcode](https://wallel.com/tag/do_shortcode/)
- [쇼트코드](https://wallel.com/tag/쇼트코드/)
- [mac select box](https://wallel.com/tag/mac-select-box/)
- [reset css](https://wallel.com/tag/reset-css/)
- [게시판](https://wallel.com/tag/게시판/)
- [케이보드](https://wallel.com/tag/케이보드/)
- [php 코드](https://wallel.com/tag/php-코드/)
- [스킨 제작](https://wallel.com/tag/스킨-제작/)
- [관리자만](https://wallel.com/tag/관리자만/)
- [어드민바](https://wallel.com/tag/어드민바/)
- [admin bar](https://wallel.com/tag/admin-bar/)
- [current_user_can](https://wallel.com/tag/current_user_can/)
- [show_admin_bar](https://wallel.com/tag/show_admin_bar/)
- [hide admin bar](https://wallel.com/tag/hide-admin-bar/)
- [입력필드](https://wallel.com/tag/입력필드/)
- [옵션필드](https://wallel.com/tag/옵션필드/)
- [활용](https://wallel.com/tag/활용/)
- [셀렉트박스](https://wallel.com/tag/셀렉트박스/)
- [redirect](https://wallel.com/tag/redirect/)
- [selectors](https://wallel.com/tag/selectors/)
- [reference](https://wallel.com/tag/reference/)
- [선택자](https://wallel.com/tag/선택자/)
- [속성](https://wallel.com/tag/속성/)
- [댓글 작성자명](https://wallel.com/tag/댓글-작성자명/)
- [사용자 정의하기](https://wallel.com/tag/사용자-정의하기/)
- [추가 CSS](https://wallel.com/tag/추가-css/)
- [remove_section](https://wallel.com/tag/remove_section/)
- [Customize Manager](https://wallel.com/tag/customize-manager/)
- [add_filter](https://wallel.com/tag/add_filter/)
- [로그인 페이지 변경](https://wallel.com/tag/로그인-페이지-변경/)
- [dropshadows](https://wallel.com/tag/dropshadows/)
- [photoshop](https://wallel.com/tag/photoshop/)
- [text-shadow](https://wallel.com/tag/text-shadow/)
- [box-shadow](https://wallel.com/tag/box-shadow/)
- [필수 선택](https://wallel.com/tag/필수-선택/)
- [라디오버튼](https://wallel.com/tag/라디오버튼/)
- [관리자 페이지 접근 제한](https://wallel.com/tag/관리자-페이지-접근-제한/)
- [관리자만 접근 가능](https://wallel.com/tag/관리자만-접근-가능/)
- [사용자](https://wallel.com/tag/사용자/)
- [user](https://wallel.com/tag/user/)
- [column 추가](https://wallel.com/tag/column-추가/)
- [사용자 컬럼 추가](https://wallel.com/tag/사용자-컬럼-추가/)
- [custom user columns](https://wallel.com/tag/custom-user-columns/)
- [user panel](https://wallel.com/tag/user-panel/)
- [remove_meta_box](https://wallel.com/tag/remove_meta_box/)
- [기본 위젯 제거](https://wallel.com/tag/기본-위젯-제거/)
- [환영합니다!](https://wallel.com/tag/환영합니다/)
- [구텐베르그](https://wallel.com/tag/구텐베르그/)
- [알림판 제거](https://wallel.com/tag/알림판-제거/)
- [사라져랏](https://wallel.com/tag/사라져랏/)
- [https](https://wallel.com/tag/https/)
- [301](https://wallel.com/tag/301/)
- [ssl](https://wallel.com/tag/ssl/)
- [보안서버인증서](https://wallel.com/tag/보안서버인증서/)
- [lorem ipsum](https://wallel.com/tag/lorem-ipsum/)
- [lipsum](https://wallel.com/tag/lipsum/)
- [한글 입숨](https://wallel.com/tag/한글-입숨/)
- [립숨](https://wallel.com/tag/립숨/)
- [아무말 생성기](https://wallel.com/tag/아무말-생성기/)
- [우커머스](https://wallel.com/tag/우커머스/)
- [주소제거](https://wallel.com/tag/주소제거/)
- [청구지주소](https://wallel.com/tag/청구지주소/)
- [결제](https://wallel.com/tag/결제/)
- [재고관리](https://wallel.com/tag/재고관리/)
- [SKU 제거](https://wallel.com/tag/sku-제거/)
- [제고관리 비활성화](https://wallel.com/tag/제고관리-비활성화/)
- [삼항 연산자](https://wallel.com/tag/삼항-연산자/)
- [단축키 추가](https://wallel.com/tag/단축키-추가/)
- [커스텀 단축키](https://wallel.com/tag/커스텀-단축키/)
- [key bindings](https://wallel.com/tag/key-bindings/)
- [command](https://wallel.com/tag/command/)
- [vscode](https://wallel.com/tag/vscode/)
- [filezilla](https://wallel.com/tag/filezilla/)
- [xampp](https://wallel.com/tag/xampp/)
- [자체서버](https://wallel.com/tag/자체서버/)
- [로컬서버](https://wallel.com/tag/로컬서버/)
- [input file](https://wallel.com/tag/input-file/)
- [파일첨부 버튼 꾸미기](https://wallel.com/tag/파일첨부-버튼-꾸미기/)
- [isNaN](https://wallel.com/tag/isnan/)
- [not a number](https://wallel.com/tag/not-a-number/)
- [htaccess](https://wallel.com/tag/htaccess/)
- [url encoding](https://wallel.com/tag/url-encoding/)
- [encoding](https://wallel.com/tag/encoding/)
- [one drive](https://wallel.com/tag/one-drive/)
- [원드라이브](https://wallel.com/tag/원드라이브/)
- [파일탐색기](https://wallel.com/tag/파일탐색기/)
- [바로가기 제거](https://wallel.com/tag/바로가기-제거/)
- [빌더](https://wallel.com/tag/빌더/)
- [웹사이트 만들기](https://wallel.com/tag/웹사이트-만들기/)
- [홈페이지 만들기](https://wallel.com/tag/홈페이지-만들기/)
- [에디터](https://wallel.com/tag/에디터/)
- [추천 확장프로그램](https://wallel.com/tag/추천-확장프로그램/)
- [확장프로그램](https://wallel.com/tag/확장프로그램/)
- [clipboard](https://wallel.com/tag/clipboard/)
- [ignore](https://wallel.com/tag/ignore/)
- [gitignore](https://wallel.com/tag/gitignore/)
- [부트스트랩](https://wallel.com/tag/부트스트랩/)
- [IE](https://wallel.com/tag/ie/)
- [크로스브라우징](https://wallel.com/tag/크로스브라우징/)
- [Internet Explorer](https://wallel.com/tag/internet-explorer/)
- [accordion](https://wallel.com/tag/accordion/)
- [menu](https://wallel.com/tag/menu/)
- [아코디언](https://wallel.com/tag/아코디언/)
- [아코디언 메뉴](https://wallel.com/tag/아코디언-메뉴/)
- [fadeIn](https://wallel.com/tag/fadein/)
- [fadeOut](https://wallel.com/tag/fadeout/)
- [Effect](https://wallel.com/tag/effect/)
- [CSS Keyframes](https://wallel.com/tag/css-keyframes/)
- [애니메이션](https://wallel.com/tag/애니메이션/)
- [animation](https://wallel.com/tag/animation/)
- [node](https://wallel.com/tag/node/)
- [media query](https://wallel.com/tag/media-query/)
- [OTP](https://wallel.com/tag/otp/)
- [브라우저](https://wallel.com/tag/브라우저/)
- [크롬](https://wallel.com/tag/크롬/)
- [Authenticator](https://wallel.com/tag/authenticator/)
- [크롬 확장프로그램](https://wallel.com/tag/크롬-확장프로그램/)
- [font awesome](https://wallel.com/tag/font-awesome/)
- [material icons](https://wallel.com/tag/material-icons/)
- [icon font](https://wallel.com/tag/icon-font/)
- [icomoon](https://wallel.com/tag/icomoon/)
- [아이콘 폰트](https://wallel.com/tag/아이콘-폰트/)
- [github](https://wallel.com/tag/github/)
- [github pages](https://wallel.com/tag/github-pages/)
- [custom domain](https://wallel.com/tag/custom-domain/)
- [개인 도메인](https://wallel.com/tag/개인-도메인/)
- [깃헙 페이지](https://wallel.com/tag/깃헙-페이지/)
- [open graph](https://wallel.com/tag/open-graph/)
- [meta tag](https://wallel.com/tag/meta-tag/)
- [SEO](https://wallel.com/tag/seo/)
- [검색엔진 최적화](https://wallel.com/tag/검색엔진-최적화/)
- [메타 태그](https://wallel.com/tag/메타-태그/)
- [오픈 그래프](https://wallel.com/tag/오픈-그래프/)
- [alias](https://wallel.com/tag/alias/)
- [node version change](https://wallel.com/tag/node-version-change/)
- [노드 버전 벼경](https://wallel.com/tag/노드-버전-벼경/)
- [nvm](https://wallel.com/tag/nvm/)
- [git](https://wallel.com/tag/git/)
- [remote change](https://wallel.com/tag/remote-change/)
- [저장소 변경](https://wallel.com/tag/저장소-변경/)
- [stylelint](https://wallel.com/tag/stylelint/)
- [스타일린트](https://wallel.com/tag/스타일린트/)
- [css 규칙](https://wallel.com/tag/css-규칙/)
- [코드 품질 향상](https://wallel.com/tag/코드-품질-향상/)
- [lint](https://wallel.com/tag/lint/)
- [AGENTS.md](https://wallel.com/tag/agents-md/)
- [Codex](https://wallel.com/tag/codex/)
- [ChatGPT](https://wallel.com/tag/chatgpt/)

## 프로젝트 카테고리

- [Tistory](https://wallel.com/project-type/tistory/)
- [Wordpress](https://wallel.com/project-type/wordpress/)
- [KBoard](https://wallel.com/project-type/kboard/)
- [기타](https://wallel.com/project-type/기타/)
- [AI](https://wallel.com/project-type/ai/)
- [Service](https://wallel.com/project-type/service/)

## 스터디 카테고리

- [프론트엔드](https://wallel.com/study-type/frontend/)
- [백엔드](https://wallel.com/study-type/backend/)

## 포트폴리오 카테고리

- [개발](https://wallel.com/portfolio-type/develop/)
- [디자인](https://wallel.com/portfolio-type/design/)
- [워드프레스](https://wallel.com/portfolio-type/wordpress/)
- [티스토리](https://wallel.com/portfolio-type/tistory/)
- [Vue.js](https://wallel.com/portfolio-type/vuejs/)
- [React](https://wallel.com/portfolio-type/react/)
- [웹디자인](https://wallel.com/portfolio-type/webdesign/)
- [인쇄물](https://wallel.com/portfolio-type/print/)

## 프로젝트 태그

- [2단](https://wallel.com/project-tag/2단/)
- [일반 게시판](https://wallel.com/project-tag/일반-게시판/)
- [SASS](https://wallel.com/project-tag/sass/)
- [SCSS](https://wallel.com/project-tag/scss/)
- [Starter Kit](https://wallel.com/project-tag/starter-kit/)
- [스타터 키드](https://wallel.com/project-tag/스타터-키드/)
- [스타일](https://wallel.com/project-tag/스타일/)
- [CSS](https://wallel.com/project-tag/css/)
- [AI](https://wallel.com/project-tag/ai/)
- [Figma](https://wallel.com/project-tag/figma/)
- [Figma Make](https://wallel.com/project-tag/figma-make/)

## 스터디 태그

- [Java](https://wallel.com/study-tag/java/)
- [JavaScript](https://wallel.com/study-tag/javascript/)
- [HTML5](https://wallel.com/study-tag/html5/)
- [CSS3](https://wallel.com/study-tag/css3/)
- [SASS(SCSS)](https://wallel.com/study-tag/sassscss/)
- [코드리뷰](https://wallel.com/study-tag/코드리뷰/)

## 포트폴리오 태그

- [Vuejs](https://wallel.com/portfolio-tag/vuejs/)
- [SASS](https://wallel.com/portfolio-tag/sass/)
- [Swiper](https://wallel.com/portfolio-tag/swiper/)
- [HTML5](https://wallel.com/portfolio-tag/html5/)
- [CSS3](https://wallel.com/portfolio-tag/css3/)
- [SVG Animation](https://wallel.com/portfolio-tag/svg-animation/)
- [Wordpress](https://wallel.com/portfolio-tag/wordpress/)
- [PHP](https://wallel.com/portfolio-tag/php/)
- [Masonry UI](https://wallel.com/portfolio-tag/masonry-ui/)
- [Tistory](https://wallel.com/portfolio-tag/tistory/)
- [Slick](https://wallel.com/portfolio-tag/slick/)
- [CSS Animation](https://wallel.com/portfolio-tag/css-animation/)
- [jQuery](https://wallel.com/portfolio-tag/jquery/)
- [Lazyload](https://wallel.com/portfolio-tag/lazyload/)
- [Instagram API](https://wallel.com/portfolio-tag/instagram-api/)
- [React](https://wallel.com/portfolio-tag/react/)
- [Module CSS](https://wallel.com/portfolio-tag/module-css/)
- [Notion API](https://wallel.com/portfolio-tag/notion-api/)
- [SEO](https://wallel.com/portfolio-tag/seo/)
- [React Query](https://wallel.com/portfolio-tag/react-query/)
- [React Snap](https://wallel.com/portfolio-tag/react-snap/)
- [GitHub Pages](https://wallel.com/portfolio-tag/github-pages/)
- [React Helmet](https://wallel.com/portfolio-tag/react-helmet/)
- [Next.js](https://wallel.com/portfolio-tag/next-js/)
- [Vercel](https://wallel.com/portfolio-tag/vercel/)
- [TypeScript](https://wallel.com/portfolio-tag/typescript/)
- [ESLint](https://wallel.com/portfolio-tag/eslint/)
- [Stylelint](https://wallel.com/portfolio-tag/stylelint/)
- [figma](https://wallel.com/portfolio-tag/figma/)