| − |
여백은 내용이 놓이지 않은 공간을 통해 요소 사이의 관계를 조정하는 수단이다. [[문단]] 안의 글줄 사이와 문단 사이와 큰 구획 사이는 서로 다른 간격을 필요로 한다. 간격에 차이를 주면 어디까지가 한 덩어리이고 어디서 다음 내용이 시작되는지 구별하기 쉬워진다. 화면 가장자리와 본문 사이의 거리도 내용을 읽는 조건에 영향을 준다. [[새로운 질서]]는 여백이 비어 있어도 화면의 스크롤이나 책의 쪽수를 차지한다고 짚는다. 따라서 여백의 크기는 단순히 넉넉한 인상을 주는 데서 그치지 않고 독자의 이동과 읽기에 관계한다. |
| + |
여백은 내용이 놓이지 않은 공간을 통해 요소 사이의 관계를 조정하는 수단이다. [[문단]] 안의 글줄 사이와 문단 사이와 큰 구획 사이는 서로 다른 간격을 필요로 한다. 간격에 차이를 주면 어디까지가 한 덩어리이고 어디서 다음 내용이 시작되는지 구별하기 쉬워진다. 화면 가장자리와 본문 사이의 거리도 내용을 읽는 조건에 영향을 준다. [[새로운 질서]]는 여백이 비어 있어도 화면의 스크롤이나 책의 쪽수를 차지한다고 짚는다. 따라서 여백의 크기는 독자가 내용을 읽고 이동하는 방식에 영향을 준다. |
|
[[박스 모델]]의 `margin`과 `padding`은 여백을 다루지만 서로 다른 위치에 적용된다. 줄 높이는 한 문단 안에서 글줄 사이의 간격을 조정하고 본문 너비는 한 줄에 머무는 글의 양을 바꾼다. 이런 값들은 각각 따로 보기보다 제목과 문단과 구획이 만드는 전체 관계 안에서 살펴야 한다. 좁은 화면에서는 바깥 공간을 줄이고 넓은 화면에서는 본문의 최대 너비를 제한하는 식으로 조정할 수 있다. 목표는 모든 화면에서 같은 숫자를 유지하는 것보다 내용의 구분과 읽는 순서를 유지하는 데 있다. 여백을 설계하는 일은 [[디자인]]의 장식을 더하기 전에 문서에 읽을 수 있는 리듬을 주는 일이다. |
|
- 좁은 화면과 넓은 화면에서 다음 문단의 시작을 찾기 쉬운지 살핀다. 널찍해 보인다는 감상과 구분이 쉬워졌다는 관찰을 따로 적는다. 빨리 읽힌다는 이유만으로 좋은 간격이라고 결정하지는 않는다. [[일부러 머무는 줄 사이]]가 필요한 글이라면 멈출 자리도 함께 살펴보고 싶다. |
|
- [[간격 비교의 작은 표]]에는 좋아하는 쪽만 표시하지 말고 헷갈린 곳도 남긴다. 수치는 다음 글에서도 시험할 출발점이지 모든 문서의 정답은 아니다. |
| + |
|
| + |
## 기타 등등 |
| + |
|
| + |
- 일반적인 가로쓰기에서 `padding-top: 10%`의 기준은 부모 높이가 아니라 포함 블록의 너비다. 위쪽 간격을 정했는데 창의 가로 폭에 따라 간격이 바뀌는 데에는 이유가 있다. [출처](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Sizing) |
| + |
- 위아래의 `margin`은 조건에 따라 서로 더해지지 않고 하나로 합쳐진다. 플렉스와 그리드 컨테이너에서는 이런 마진 상쇄가 일어나지 않아, 같은 값도 배치 방식에 따라 다르게 보일 수 있다. [출처](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Margin_collapsing) |
|
#개념 #타이포그래피 |