블로그
도구를 제대로 쓰기 위한 배경지식과 실무 팁.
실무자의 팁
- 실무자의 팝업 제작법 — dialog 요소와 안 알려진 함정들
팝업은 사이드메뉴보다 챙길 것이 많습니다. dialog 요소가 대신 해주는 것과 안 해주는 것, 바깥 클릭으로 닫기, 팝업 위에 팝업, 모바일 키보드까지 실제로 걸리는 문제를 정리했습니다.
- 실무자의 사이드메뉴 제작법 — 만드는 법부터 모바일 대응까지
사이드메뉴는 여닫는 코드가 전부가 아닙니다. 기본 구조부터 시작해 남는 부분 터치로 닫기, 뒤로가기 버튼 처리, 배경 스크롤 잠금까지 모바일에서 실제로 챙겨야 하는 것들을 쓰는 코드와 함께 정리했습니다.
CSS
- CSS 그라디언트 실전 — 이미지 없이 만드는 것들
줄무늬, 그라디언트 테두리, 사진 위 글자 오버레이, 글자 그라디언트를 만드는 방법과 그라디언트에 트랜지션이 걸리지 않는 문제까지 정리합니다.
- CSS 그라디언트 기초 — 각도와 색 정지점을 정확히 읽는 법
linear·radial·conic 그라디언트의 각도 기준과 색 정지점 규칙, 두 색 사이가 탁해지는 이유까지 예제로 정리합니다.
- rem 실전 — 스케일 만들기와 흔한 함정 세 가지
rem으로 타이포·간격 스케일을 잡는 방법과, 미디어쿼리·line-height처럼 rem이 오히려 함정이 되는 곳, 그리고 em을 일부러 쓰는 자리를 정리합니다.
- px와 rem 기초 — 차이와 어디에 무엇을 쓸지
px, em, rem이 각각 무엇을 기준으로 삼는 단위인지, 페이지 확대와 글자 크기 설정이 어떻게 다른지, 실무에서 어디에 무엇을 쓸지 정리합니다.
- box-shadow 실전 — 겹쳐 쌓기와 고도 시스템, 다크 모드 대응
그림자 한 겹이 가짜처럼 보이는 이유와 2~3겹으로 쌓는 레시피, 고도 단계를 CSS 변수로 정리하는 법, 다크 모드에서 그림자가 사라질 때의 대안을 정리합니다.
- box-shadow 기초 — 다섯 개 값이 각각 하는 일
box-shadow의 X, Y, blur, spread, 색상이 각각 무엇을 바꾸는지 하나씩 분리해서 보고, 그림자 색을 회색이 아니라 반투명 검정으로 써야 하는 이유를 정리합니다.
- CSS clamp() 정리 — 계산 원리부터 실전 패턴, 흔한 실수까지
clamp() 함수가 받는 세 값의 의미와 브라우저의 계산 방식, 선호값 숫자가 어디서 나오는지 정리하고, 제목·여백·레이아웃에 적용하는 패턴과 접근성을 해치는 흔한 실수까지 한 편에 다룹니다.
색상
- HEX·RGB·HSL·OKLCH 기초 — 같은 색을 네 가지로 적는 이유
색 표기법이 넷이나 되는 이유와 각각이 무엇을 축으로 삼는지, HSL의 밝기가 눈에 보이는 밝기와 다른 까닭, OKLCH가 무엇을 고치려 나왔는지 정리합니다.
- 색 대비 실무 — 흔한 실패와 통과시키는 법
연한 회색 본문, 컬러 버튼 위 흰 글자 등 대비가 자주 무너지는 곳과, 브랜드색을 유지하며 기준을 통과시키는 방법을 정리합니다.
- 색 대비비 기초 — 정의와 WCAG 기준 읽는 법
대비비가 무엇을 재는 값인지, 4.5:1·3:1 숫자가 어디서 나왔는지, AA와 AAA·큰 텍스트 예외를 예제 하나로 정리합니다.
이미지
- 웹 이미지 실전 — 크기·품질·로딩을 정하는 순서
실제로 필요한 픽셀 수를 재는 법, srcset으로 화면에 맞는 파일만 내려받기, 품질 값을 용량으로 정하는 법, 이미지 때문에 화면이 튀는 것을 막는 방법을 정리합니다.
- 웹 이미지 포맷 고르기 — PNG·JPG·WebP·AVIF는 무엇이 다른가
각 이미지 포맷이 어떻게 압축하는지, 그래서 무엇에 강하고 무엇에 약한지 정리하고 실무에서 고르는 순서를 제시합니다.
마크업
- 카톡·슬랙 링크 미리보기가 안 뜰 때 — 원인과 점검 순서
링크를 공유했는데 카드가 안 나오거나 예전 정보가 그대로일 때, 원인을 자주 있는 순서대로 짚고 플랫폼별 캐시 갱신법을 정리합니다.
- SEO에 중요한 메타태그와 Open Graph 태그
검색결과에 쓰이는 메타태그와 SNS 공유 카드에 쓰이는 Open Graph 태그, 두 가지의 정의와 작성법을 예제 하나로 정리합니다.
생산성
- 네이밍 컨벤션 실전 — 이름이 경계에서 깨지는 곳
API의 snake_case를 어디서 바꿀지, userID 같은 약어가 왕복 변환에서 망가지는 이유, 파일명 대소문자 때문에 로컬은 되고 배포는 404가 나는 문제를 정리합니다.
- 네이밍 컨벤션 기초 — 여섯 표기법과 어디에 무엇을 쓰나
camelCase, PascalCase, snake_case, kebab-case, CONSTANT_CASE, dot.case가 각각 무엇이고 어느 자리에 쓰는 표기법인지, 그리고 data-* 속성에서 대소문자가 사라지는 함정까지 정리합니다.