툴박스 가이드
개발자 도구·디자인·생활 계산·텍스트·보안까지 — 일상 도구 가이드
🎨디자인·CSS
웹 접근성 명도 대비 기준 비교 — AA 4.5:1·AAA 7:1·UI 3:1과 Tailwind 팔레트 실측표
WCAG 2.2의 대비 기준 세 갈래(본문 4.5:1·큰 글씨 3:1·AAA 7:1)를 표로 비교하고, Tailwind v4 기본 팔레트의 흰 배경·다크 배경 대비비를 직접 계산해 실었다. 라이트에서 통과한 색이 다크에서 떨어지는 이유까지 정리했다.
약 9분 소요
✏️텍스트·문서
특수문자 입력·복사 완전 가이드: 윈도우·맥 단축키와 기호별 유니코드표
화살표·별표·저작권·통화 기호를 못 찾아 헤매는 이유는 유니코드를 몰라서다. 윈도우 자음+한자키·Alt코드, 맥 옵션키, 그리고 복사해 바로 쓰는 기호별 유니코드표를 한 번에 정리했다.
약 8분 소요
✏️텍스트·문서
한글 깨짐 완전 해결: UTF-8·EUC-KR·CP949 인코딩 원인과 복구법
엑셀 CSV에서 '占쏙옙', 웹페이지에서 '가나'처럼 한글이 깨지는 원인을 인코딩 지문으로 역추적하고, 상황별 진단표와 복구 5단계, 개발자 체크리스트까지 정리했습니다.
약 10분 소요
🧮생활 계산
부가세·할인율·인상률 헷갈리는 퍼센트 계산 총정리 (공식·예시 7가지)
할인가 역산, 부가세 분리, 인상률처럼 실생활에서 자주 틀리는 퍼센트 계산을 공식과 실제 숫자 예시로 정리했습니다. %p와 %의 차이, 중복 할인 함정까지 우선순위로 짚어드립니다.
약 5분 소요
🎨디자인·CSS
CSS Flexbox vs Grid, 언제 뭘 쓸까? 상황별 선택 기준 비교
Flexbox는 1차원, Grid는 2차원 레이아웃 도구다. 네비바·카드목록·페이지골격 등 상황별로 뭘 써야 하는지 비교표와 중첩 패턴으로 정리했다.
약 6분 소요
💻개발자 도구
JWT 토큰 구조 파헤치기: 헤더·페이로드·서명 디코딩 3단계
API 헤더에 보이는 긴 JWT 문자열, 어떻게 읽을까? 점으로 나뉜 세 부분의 구조와 Base64url 디코딩, 서명 검증 원리를 직접 손으로 뜯어보며 3단계로 익힌다.
약 6분 소요
광고
🎨디자인·CSS
CSS 단위 px·rem·em·%·vw 차이와 선택 기준 — 2026 반응형 가이드
px·rem·em·%·vw/vh가 각각 무엇을 기준으로 계산되는지 비교표로 정리하고, 1rem=16px 같은 환산 예시와 상황별 추천 단위까지 한 번에 안내합니다.
약 6분 소요
💻개발자 도구
설치 없이 브라우저로 끝내는 개발자 무료 웹 도구 7선 — 우선순위와 보안 체크리스트
IDE 없이 브라우저 탭 하나로 끝내는 개발자 무료 웹 도구 7가지를 사용 빈도 순으로 정리했습니다. JSON 포맷·정규식·인코딩·타임스탬프 변환과 데이터 전송 보안 체크리스트까지 담았습니다.
약 6분 소요
🎨디자인·CSS
CSS box-shadow 레퍼런스: 고도별 그림자 레시피 표와 다중 그림자 실전
box-shadow의 네 가지 길이값을 분해하고, 카드·버튼·모달까지 바로 쓰는 고도별 그림자 레시피 표를 정리했습니다. 다중 그림자·inset·성능 주의점과 다크모드 대응까지 다룹니다.
약 6분 소요
✏️텍스트·문서
원고지 매수 계산 공식(÷200)과 공백 기준·타자 수 세기 상황별 Q&A
원고지 매수는 글자 수를 200으로 나눠 올림하면 됩니다. 공백 포함·제외 차이, 학교·공모전·SNS별 분량 환산표, 타자 수 측정까지 실제 검색 상황별 질문에 답합니다.
약 5분 소요
💻개발자 도구
정규표현식(Regex) 입문: 개발자가 자주 쓰는 패턴 완전 정리
이메일·전화번호·URL 검증부터 로그 파싱까지, 실무에서 매일 쓰는 정규표현식 패턴을 한 번에 정리합니다. 메타문자 기초와 자주 틀리는 함정까지 예제로 다룹니다.
약 6분 소요
🧮생활 계산
주년 계산기 활용법 — 날수형(100일) vs 주년형(N주년) 비교와 결혼기념일 이름표
연애 100·1000일 같은 날수형과 결혼·입사 N주년 주년형을 비교하고, 시작일 계산 기준·윤년 함정·결혼기념일 이름표(목혼·은혼·금혼)까지 정리했습니다.
약 5분 소요
총 53개 글 · 1/5 페이지