🎨 디자인·CSS

색상·그림자·종횡비 등 디자인/CSS 실전 팁

WCAG 2.2의 대비 기준 세 갈래(본문 4.5:1·큰 글씨 3:1·AAA 7:1)를 표로 비교하고, Tailwind v4 기본 팔레트의 흰 배경·다크 배경 대비비를 직접 계산해 실었다. 라이트에서 통과한 색이 다크에서 떨어지는 이유까지 정리했다.

약 9분 소요

Flexbox는 1차원, Grid는 2차원 레이아웃 도구다. 네비바·카드목록·페이지골격 등 상황별로 뭘 써야 하는지 비교표와 중첩 패턴으로 정리했다.

약 6분 소요

px·rem·em·%·vw/vh가 각각 무엇을 기준으로 계산되는지 비교표로 정리하고, 1rem=16px 같은 환산 예시와 상황별 추천 단위까지 한 번에 안내합니다.

약 6분 소요

box-shadow의 네 가지 길이값을 분해하고, 카드·버튼·모달까지 바로 쓰는 고도별 그림자 레시피 표를 정리했습니다. 다중 그림자·inset·성능 주의점과 다크모드 대응까지 다룹니다.

약 6분 소요

같은 사진이라도 16:9와 1:1로 자르면 전혀 다른 인상이 됩니다. 종횡비가 무엇이고 어떤 상황에 어떤 비율을 써야 자연스러운지, 디자인·사진·영상 실무에서 가장 자주 만나는 비율을 정리했습니다.

약 4분 소요

단순히 검은색 그림자를 깔면 카드가 떠 보이지 않고 답답해 보입니다. 그림자가 만들어지는 원리, 4가지 파라미터의 역할, 자연스러운 깊이감을 만드는 다중 레이어 기법을 정리했습니다.

약 4분 소요

같은 색이라도 HEX, RGB, HSL은 다른 정보를 담습니다. 각 표기법의 구조와 강점, 디자인 실무에서 어떤 상황에 어떤 코드를 쓰면 좋은지, 색 선택할 때 자주 하는 실수까지 정리했습니다.

약 4분 소요

웹 이미지는 페이지 속도와 SEO에 큰 영향을 줘요. WebP·AVIF 포맷의 장단점과 변환 도구를 정리했습니다.

약 3분 소요

Figma는 협업 디자인 도구의 표준이 됐어요. 자주 쓰이는 단축키를 외우면 작업 속도가 두 배 빨라집니다.

약 3분 소요

디자인과 개발에서 색상은 HEX, RGB, HSL 세 가지 형식이 가장 자주 쓰여요. 각 형식의 장단점과 사용처를 정리했습니다.

약 3분 소요

총 10개 글