작은기린우리

디자인에서 여백, svg 아이콘 등의 크기를 8의 배수로 사용하는 이유(24px, 32px 등)

UI 디자인의 8-Point Grid System과 SVG 아이콘 가이드1. 8-Point Grid System 개요정의디자인 요소의 크기와 간격을 8의 배수로 설정하는 디자인 원칙기본 수치8px: 기본 단위16px: 2배수24px: 3배수32px: 4배수40px: 5배수48px: 6배수2. SVG 아이콘 크기 표준기본 크기24px: 기본 UI 아이콘 (8×3)32px: 강조된 아이콘 (8×4)선택 이유해상도 최적화레티나 디스플레이 대응선명한 렌더링접근성터치 영역 확보가시성 보장3. 여백 시스템//기본 여백.component { /* 기본 여백 */ padding: 8px; margin: 8px; /* 컴포넌트 간격 */ gap: 16px; /* 섹션 구분 */ margin-bottom: 2..

이렇게 각각 다른 SVG 요소들을 기준 라인을 맞춰서 정렬하고 싶었다. 또한 호버시 변경되는 이미지도 기준선을 따라 정렬해줘서 자연스럽게 변하도록 하고 싶었다.때문에 해결법을 찾아보던 중에 SVG 자체를 조작해서 기준점으로 SVG의 좌표를 옮기는 것이 가장 간단해보였다.잉크 스케이프를 사용했다.1. 문서 속성(Shift+Ctrl+D)로 들어가서 뷰박스의 크기를 통일해준다.2. 객체를 선택하고 높이와 좌표 등을 확인한다.하단의 좌표는 Y+Height이기 때문에 150+550= 700이 하단의 좌표가 된다.3. 전체 객체의 좌표를 통일한다.그렇다면 하단의 Y 좌표가 700이 되도록 통일하면 될 것이다.그렇다면 이 경우엔 H+Y가 700이 되도록 Y를 조절해주면 된다.700-569.154 = 130.84..