🎨 디자인·CSS
색상·그림자·종횡비 등 디자인/CSS 실전 팁
가이드 목록 (총 10편)
웹 접근성 명도 대비 기준 비교 — AA 4.5:1·AAA 7:1·UI 3:1과 Tailwind 팔레트 실측표
WCAG 2.2의 대비 기준 세 갈래(본문 4.5:1·큰 글씨 3:1·AAA 7:1)를 표로 비교하고, Tailwind v4 기본 팔레트의 흰 배경·다크 배경 대비비를 직접 계산해 실었다. 라이트에서 통과한 색이 다크에서 떨어지는 이유까지 정리했다.
CSS Flexbox vs Grid, 언제 뭘 쓸까? 상황별 선택 기준 비교
Flexbox는 1차원, Grid는 2차원 레이아웃 도구다. 네비바·카드목록·페이지골격 등 상황별로 뭘 써야 하는지 비교표와 중첩 패턴으로 정리했다.
CSS 단위 px·rem·em·%·vw 차이와 선택 기준 — 2026 반응형 가이드
px·rem·em·%·vw/vh가 각각 무엇을 기준으로 계산되는지 비교표로 정리하고, 1rem=16px 같은 환산 예시와 상황별 추천 단위까지 한 번에 안내합니다.
CSS box-shadow 레퍼런스: 고도별 그림자 레시피 표와 다중 그림자 실전
box-shadow의 네 가지 길이값을 분해하고, 카드·버튼·모달까지 바로 쓰는 고도별 그림자 레시피 표를 정리했습니다. 다중 그림자·inset·성능 주의점과 다크모드 대응까지 다룹니다.
이미지 종횡비(Aspect Ratio) 이해하기 - 16:9, 4:3, 1:1 언제 쓰는지
같은 사진이라도 16:9와 1:1로 자르면 전혀 다른 인상이 됩니다. 종횡비가 무엇이고 어떤 상황에 어떤 비율을 써야 자연스러운지, 디자인·사진·영상 실무에서 가장 자주 만나는 비율을 정리했습니다.
CSS Box Shadow 마스터하기 - 자연스러운 깊이감 만드는 그림자 가이드
단순히 검은색 그림자를 깔면 카드가 떠 보이지 않고 답답해 보입니다. 그림자가 만들어지는 원리, 4가지 파라미터의 역할, 자연스러운 깊이감을 만드는 다중 레이어 기법을 정리했습니다.
광고
HEX·RGB·HSL 차이와 색상 선택 팁 - 디자이너·개발자를 위한 색 코드 가이드
같은 색이라도 HEX, RGB, HSL은 다른 정보를 담습니다. 각 표기법의 구조와 강점, 디자인 실무에서 어떤 상황에 어떤 코드를 쓰면 좋은지, 색 선택할 때 자주 하는 실수까지 정리했습니다.
이미지 압축·포맷 변환 - WebP·AVIF 도입과 SEO 효과
웹 이미지는 페이지 속도와 SEO에 큰 영향을 줘요. WebP·AVIF 포맷의 장단점과 변환 도구를 정리했습니다.
Figma 단축키 정리 - 디자이너 작업 속도 두 배
Figma는 협업 디자인 도구의 표준이 됐어요. 자주 쓰이는 단축키를 외우면 작업 속도가 두 배 빨라집니다.
HEX·RGB·HSL 색상 코드 변환 - 어떤 형식을 언제 쓸까?
디자인과 개발에서 색상은 HEX, RGB, HSL 세 가지 형식이 가장 자주 쓰여요. 각 형식의 장단점과 사용처를 정리했습니다.
총 10개 글
광고