버튼 컴포넌트 제작시 패딩 값 질문
안녕하세요 강사님, 현업 중 궁금한 점이 생겨 질문 드립니다.
spacing은 항상 4 혹은 8의 배수 로 진행한다면,
버튼 컴포넌트 생성시에도 동일하게 적용이 되는지 궁금합니다.
강사님의 강의를 접하기전에는, 프론트엔드 개발자 분이 무조건 짝수로 맞춰달라는 요청에
패딩을 짝수로 맞췄습니다.
그런데.... 본문에만 적용해야할 행간을
버튼 컴포넌트 폰트에도 동일하게 적용하여 결국엔 버튼 컴포넌트의 최종 크기가 짝수가 아니게 되어버렸습니다. ㅜㅜ
결국 개발자 분이 전부 수습을 하셨고, 이런 계기로 강사님의 강의를 듣게 되었는데요.
제 이야기의 문제점은
1. 버튼 컴포넌트 폰트에 행간 적용
2. 버튼 컴포넌트 패딩 값에 짝수 적용
이라고 생각되어 지는데,
버튼 컴포넌트 전체 너비와 높이가 짝수가 된다면 패딩 값은 홀수로 지정해도 되는것인지 궁금합니다. ㅜㅜ
답변 1
0
안녕하세요, 이은종님! 질문 주셔서 감사합니다 ☺
패딩값이 홀수여도 괜찮습니다.
말씀하셨듯이 패딩은 상하/좌우에 홀수를 주어도 전체의 값이 짝수가 될 수 있죠.
버튼 컴포넌트의 경우 값이 자연수라면 보편적인 디스플레이에서 픽셀이 깨지지 않기 때문에 꼭 4의 배수나 8의 배수가 아니어도 괜찮습니다.
1. 버튼 컴포넌트 폰트에 행간 적용 👉 행간 값은 되도록 짝수를 추천드립니다.
대부분의 디자인 시스템에서 폰트의 행간 값을 px로 변환할 시 짝수가 되도록 맞춥니다.
이렇게 행간을 짝수로 맞춰놓으면 전체적으로 짝수 레이아웃을 유지할 수 있습니다.
[예시 이미지] https://atlassian.design/foundations/typography
2. 버튼 컴포넌트 패딩 값에 짝수 적용 👉 홀수 사용해도 됩니다. 자연수라면 괜찮습니다.
섹션4. 컴포넌트의 종류 영상 관련 문의 드립니다.
0
5
0
모바일 로고 이미지가 날아갔어요...
0
16
2
B2B 어드민 페이지에서 모바일 화면 만들때 궁금한 부분이 있습니다.
0
50
2
모드를 활용한 반응형 디자인 구현하기에서 등록한 베리어블이 보이지 않습니다.
0
74
4
1- 피그마 기본 프레임 예제
1
47
2
컴포넌트 파일에 파운데이션 라이브러리 연결 안되는 문제
0
112
6
섹션3. 스타일가이드 다운받고 난후
0
57
2
강의 파일 다운로드
0
62
2
헤더에서 empty column이 삭제가 안되고, 헤더 레이아웃을 동영상처럼 선택하는 옵션이 안나오는데 어떻게 하나요?
0
47
1
강의자료 요청드립니다.
0
56
2
강의영상 어떻게 제작하셨을까요..?
0
51
2
아이콘 컬러 자동 변경
0
74
2
해당 플러그인을 설치했는데 추가 지원 안될 수 있다고 다른 플러그인을 깔아보라는데 어떻게 해야하나여?
0
68
2
영상을 이어 붙이는 방법을 알고 싶어요.
0
76
1
auto layout 뎁스를 많이 넣는 이유?
0
78
2
수업자료
0
66
1
"run_nvidia_gpu.bat" 실행후
0
79
1
자료집 관련
0
69
2
캐릭터가 135도를 돌아요
0
66
1
5,6,7,8 내용이 없어요
0
68
1
푸터에 있는 카테고리 폰트 컬러 어떻게 바꾸나요?
0
68
1
수업 자료 문의
0
67
1
플러터(Flutter) 개발 환경에서 svg 깨짐 현상 해결 방법 문의
0
391
2
색상 파레트 제작 시, 색상 배합 방법 문의
0
181
1