merge: box-sizing 전역 리셋
globals.scss 충돌은 양쪽이 같은 자리에 서로 다른 기초 규칙을 넣어 생겼다 — hub의 폼 조작기 `font: inherit`과 이쪽의 `box-sizing` 리셋이다. 배타적이지 않으므로 둘 다 살렸고, 기초부터 읽히도록 box-sizing을 앞에 뒀다.
@db6732791cee7c7380e21a59283080627fcbf095
--- app/globals.scss
+++ app/globals.scss
... | ... | @@ -55,6 +55,15 @@ |
| 55 | 55 |
--app-font-sans: "Pretendard"; |
| 56 | 56 |
} |
| 57 | 57 |
|
| 58 |
+// 테두리·안쪽 여백을 폭에 포함해 센다. 시안이 그 기준으로 그려져 있고(Figma stroke는 안쪽), |
|
| 59 |
+// 없으면 `inline-size: 100%`에 패딩이 더해져 자식이 부모보다 넓어진다 — 사이드바 항목 폭이 |
|
| 60 |
+// 시안보다 15px 넓던 원인이 이것이었다. @fox 컴포넌트는 각자 선언하고 있어 영향이 없다. |
|
| 61 |
+*, |
|
| 62 |
+*::before, |
|
| 63 |
+*::after {
|
|
| 64 |
+ box-sizing: border-box; |
|
| 65 |
+} |
|
| 66 |
+ |
|
| 58 | 67 |
// 폼 조작기는 CSS 명세상 `font`를 상속받지 않아, 아무도 지정하지 않으면 브라우저 기본값 |
| 59 | 68 |
// (macOS 크롬 기준 Arial 13.33px)이 이긴다. 그래서 제목·본문은 Pretendard인데 그 옆 버튼만 |
| 60 | 69 |
// 다른 서체로 나오는 일이 생긴다. 여기서 한 번 되돌린다. |
Add a comment
Delete comment
Once you delete this comment, you won't be able to recover it. Are you sure you want to delete this comment?