🎨 디자인·CSS

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

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

약 4분 소요

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

약 4분 소요

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

약 4분 소요

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

약 3분 소요

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

약 3분 소요

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

약 3분 소요

총 6개 글