인프런 커뮤니티 질문&답변
작성한 질문수
버튼 컴포넌트 제작시 패딩 값 질문
해결된 질문
작성
·
23
0
안녕하세요 강사님, 현업 중 궁금한 점이 생겨 질문 드립니다.
spacing은 항상 4 혹은 8의 배수 로 진행한다면,
버튼 컴포넌트 생성시에도 동일하게 적용이 되는지 궁금합니다.
강사님의 강의를 접하기전에는, 프론트엔드 개발자 분이 무조건 짝수로 맞춰달라는 요청에
패딩을 짝수로 맞췄습니다.
그런데.... 본문에만 적용해야할 행간을
버튼 컴포넌트 폰트에도 동일하게 적용하여 결국엔 버튼 컴포넌트의 최종 크기가 짝수가 아니게 되어버렸습니다. ㅜㅜ
결국 개발자 분이 전부 수습을 하셨고, 이런 계기로 강사님의 강의를 듣게 되었는데요.
제 이야기의 문제점은
1. 버튼 컴포넌트 폰트에 행간 적용
2. 버튼 컴포넌트 패딩 값에 짝수 적용
이라고 생각되어 지는데,
버튼 컴포넌트 전체 너비와 높이가 짝수가 된다면 패딩 값은 홀수로 지정해도 되는것인지 궁금합니다. ㅜㅜ
답변 1
0
안녕하세요, 이은종님! 질문 주셔서 감사합니다 ☺
패딩값이 홀수여도 괜찮습니다.
말씀하셨듯이 패딩은 상하/좌우에 홀수를 주어도 전체의 값이 짝수가 될 수 있죠.
버튼 컴포넌트의 경우 값이 자연수라면 보편적인 디스플레이에서 픽셀이 깨지지 않기 때문에 꼭 4의 배수나 8의 배수가 아니어도 괜찮습니다.
1. 버튼 컴포넌트 폰트에 행간 적용 👉 행간 값은 되도록 짝수를 추천드립니다.
대부분의 디자인 시스템에서 폰트의 행간 값을 px로 변환할 시 짝수가 되도록 맞춥니다.
이렇게 행간을 짝수로 맞춰놓으면 전체적으로 짝수 레이아웃을 유지할 수 있습니다.
[예시 이미지] https://atlassian.design/foundations/typography
2. 버튼 컴포넌트 패딩 값에 짝수 적용 👉 홀수 사용해도 됩니다. 자연수라면 괜찮습니다.