버튼 컴포넌트 제작시 패딩 값 질문
안녕하세요 강사님, 현업 중 궁금한 점이 생겨 질문 드립니다.
spacing은 항상 4 혹은 8의 배수 로 진행한다면,
버튼 컴포넌트 생성시에도 동일하게 적용이 되는지 궁금합니다.
강사님의 강의를 접하기전에는, 프론트엔드 개발자 분이 무조건 짝수로 맞춰달라는 요청에
패딩을 짝수로 맞췄습니다.
그런데.... 본문에만 적용해야할 행간을
버튼 컴포넌트 폰트에도 동일하게 적용하여 결국엔 버튼 컴포넌트의 최종 크기가 짝수가 아니게 되어버렸습니다. ㅜㅜ
결국 개발자 분이 전부 수습을 하셨고, 이런 계기로 강사님의 강의를 듣게 되었는데요.
제 이야기의 문제점은
1. 버튼 컴포넌트 폰트에 행간 적용
2. 버튼 컴포넌트 패딩 값에 짝수 적용
이라고 생각되어 지는데,
버튼 컴포넌트 전체 너비와 높이가 짝수가 된다면 패딩 값은 홀수로 지정해도 되는것인지 궁금합니다. ㅜㅜ
Answer 1
0
안녕하세요, 이은종님! 질문 주셔서 감사합니다 ☺
패딩값이 홀수여도 괜찮습니다.
말씀하셨듯이 패딩은 상하/좌우에 홀수를 주어도 전체의 값이 짝수가 될 수 있죠.
버튼 컴포넌트의 경우 값이 자연수라면 보편적인 디스플레이에서 픽셀이 깨지지 않기 때문에 꼭 4의 배수나 8의 배수가 아니어도 괜찮습니다.
1. 버튼 컴포넌트 폰트에 행간 적용 👉 행간 값은 되도록 짝수를 추천드립니다.
대부분의 디자인 시스템에서 폰트의 행간 값을 px로 변환할 시 짝수가 되도록 맞춥니다.
이렇게 행간을 짝수로 맞춰놓으면 전체적으로 짝수 레이아웃을 유지할 수 있습니다.
[예시 이미지] https://atlassian.design/foundations/typography
2. 버튼 컴포넌트 패딩 값에 짝수 적용 👉 홀수 사용해도 됩니다. 자연수라면 괜찮습니다.
인스턴스스왑
0
14
2
borderTransparent를 라이트/다크모드에 이중등록
0
19
1
해결되었습니다.
0
17
1
채팅 UI 추가 속성 설정 질문
0
23
1
배리어블 Value에 관해 질문있습니다.
0
33
0
Body>font weight 에서 semibold에 짝대기가 생기는 이유?
0
37
1
Navigation Mobile 토글 베리어블이 안됩니당
1
31
2
실습파일
0
21
2
Typography 모드 적용시 표현된 값과 우측에 표시되는 값다름
0
31
1
안녕하세요.
0
21
1
신규 업데이트 내용
0
29
2
뉴스페이퍼 싱글템플릿 디자인 관련 상담 요청
0
26
2
예제 파일 오류
0
31
1
디자인 시스템에 그룹명을 숨길 수도 있나요?
0
45
2
디자인 시스템 네이밍에 관한 질문드립니다.
0
53
2
예시파일 불일치
0
39
2
강의자료 요청드립니다.
0
54
3
테이블 만들기 질문
0
54
1
강의 자료 요청드리고 싶어요~
0
54
2
next step?
1
71
1
폰트 업로드 단계에 설치해야할 플러그인이 현재 없습니다
0
49
2
해당 강의 PDF는 어디에 있나요?
1
55
2
플러터(Flutter) 개발 환경에서 svg 깨짐 현상 해결 방법 문의
0
278
2
색상 파레트 제작 시, 색상 배합 방법 문의
0
117
1