CSS 팟캐스트 - 013: Spacing
세 개의 상자로 된 컬렉션이 서로 겹쳐져 있고 그 사이에 공간이 필요하다고 가정해 보겠습니다. CSS에서는 이 작업을 몇 가지 방법으로 고려할 수 있을까요?
margin 속성은 필요한 것을 제공할 수도 있지만 원하지 않는 공백을 추가할 수도 있습니다.
예를 들어 이러한 각 요소 사이의 공간만 타겟팅하려면 어떻게 해야 할까요?
이 경우에는 gap 같은 형식이 더 적합할 수 있습니다.
UI 내의 간격을 조정하는 방법에는 여러 가지가 있으며 각각 고유한 장점과 주의사항이 있습니다.
HTML 간격
HTML 자체는 요소 간격을 지정하는 몇 가지 메서드를 제공합니다.
<br> 및 <hr> 요소를 사용하면 요소를 블록 방향의 간격을 둘 수 있습니다. 즉, 라틴어 기반 언어에서는 위에서 아래로 진행됩니다.
<br> 요소를 사용하면 워드 프로세서에서 Enter 키를 누르는 것처럼 줄바꿈이 생성됩니다.
<hr>는 양쪽에 공간이 있는 가로선을 만듭니다(margin이라고 함).
HTML 항목은 HTML 요소를 사용하는 것 외에 공간을 만들 수 있습니다.
HTML 개체는 브라우저에 의해 문자 항목으로 대체되는 예약된 문자열입니다.
예를 들어 HTML 파일에 ©을 입력하면 © 문자로 변환됩니다.
항목은 인라인 공백을 제공하는 줄바꿈 없는 공백 문자로 변환됩니다.
하지만 이 캐릭터의 브레이킹 체인지 없는 측면은 두 요소를 함께 결합하므로 이상한 동작이 나타날 수 있으므로 주의해야 합니다.
마진
요소 외부에 공백을 추가하려면 margin 속성을 사용합니다.
여백은 요소 주위에 쿠션을 추가하는 것과 같습니다.
margin 속성은 margin-top, margin-right, margin-bottom, margin-left의 약칭입니다.
margin 약식은 상단, 오른쪽, 하단, 왼쪽 등 특정 순서로 속성을 적용합니다.
문제가 있는 TRouBLe를 기억할 수 있습니다.
margin 약칭은 1개, 2개 또는 3개의 값과 함께 사용할 수도 있습니다.
네 번째 값을 추가하면 각각의 개별 면을 설정할 수 있습니다.
다음과 같이 적용됩니다.
- 모든 변에 하나의 값이 적용됩니다. (
margin: 20px). - 두 값: 첫 번째 값이 상단과 하단에 적용되고 두 번째 값이 왼쪽과 오른쪽에 적용됩니다.
(
margin: 20px 40px) - 세 개의 값: 첫 번째 값은
top, 두 번째 값은left및right, 세 번째 값은bottom입니다. (margin: 20px 40px 30px).
여백은 길이, 백분율 또는 자동 값(예: 1em 또는 20%)으로 정의할 수 있습니다.
백분율을 사용하는 경우 값은 요소가 포함된 블록의 너비에 따라 계산됩니다.
즉, 요소의 포함된 블록의 너비가 250px이고 요소의 margin 값이 20%이면 요소의 각 변의 계산된 여백은 50px입니다.
여백으로 auto 값을 사용할 수도 있습니다.
크기가 제한된 블록 수준 요소의 경우 auto 여백은 적용되는 방향에서 사용 가능한 공간을 차지합니다.
좋은 예는 항목이 서로 푸시되는 flexbox 모듈의 모듈입니다.
auto 여백의 또 다른 좋은 예는 최대 너비가 있는 가로로 가운데 지정된 래퍼입니다.
이러한 종류의 래퍼는 웹사이트에서 일관된 가운데 열을 만드는 데 자주 사용됩니다.
.wrapper {
max-width: 400px;
margin: 0 auto;
}
여기서 여백은 상단과 하단 (블록) 쪽에서 삭제되고 auto는 왼쪽과 오른쪽 (인라인) 사이의 공간을 공유합니다.
마이너스 여백
음수 값을 여백으로 사용할 수도 있습니다. 인접한 동위 요소 사이에 공간을 추가하는 대신 동위 요소 사이의 공간을 줄입니다. 사용 가능한 공간보다 큰 음수 값을 선언하면 요소가 겹칠 수 있습니다.
여백 접기
여백 축소는 까다로운 개념이지만 인터페이스를 빌드할 때 매우 흔히 마주하게 됩니다. 제목과 단락의 두 가지 요소에 세로 여백이 있다고 가정해 보겠습니다.
<article>
<h1>My heading with teal margin</h1>
<p>A paragraph of text that has blue margin on it, following the heading with margin.</p>
</article>
h1 {
margin-bottom: 2rem;
}
p {
margin-top: 3rem;
}
언뜻 보기에는 2rem과 3rem의 합계가 5rem로 계산되기 때문에 단락과 제목 사이의 간격이 5em일 것이라고 생각할 수 있습니다.
그러나 세로 여백이 접히므로 이 공간은 실제로 3rem입니다.
여백 접기는 인접한 측면에 세로 여백이 설정된 인접한 요소 두 개 중 가장 큰 값을 선택하여 작동합니다.
h1의 하단이 p의 상단과 만났으므로 h1의 하단 여백과 p의 상단 여백 중 가장 큰 값이 선택됩니다.
h1의 하단 여백이 3.5rem인 경우 둘 사이의 공간은 3.5rem가 됩니다. 3rem보다 크기 때문입니다.
인라인 (가로) 여백이 아닌 여백만 접기만 차단
여백 축소는 빈 요소에도 도움이 됩니다.
상단 및 하단 여백이 20px인 단락이 있으면 40px가 아닌 20px의 공백만 만듭니다.
이 요소의 내부에 padding를 포함하여 무엇이든 추가되는 경우 여백이 더 이상 자체적으로 접히지 않으며 콘텐츠가 있는 상자로 처리됩니다.
학습 내용 확인하기
여백 축소에 관한 지식 테스트
겹쳐서 쌓인 두 요소의 상단 여백이 20px이고 하단 여백이 30px인 경우 두 요소 사이에 얼마나 많은 공간이 있나요?
여백 접기 방지
position: absolute를 사용하여 요소를 절대 위치로 배치하면 여백이 더 이상 접히지 않습니다.
float 속성을 사용하는 경우에도 여백이 접히지 않습니다.
블록 여백이 있는 두 요소 사이에 여백이 없는 요소가 있는 경우, 블록 여백이 있는 두 요소가 더 이상 인접한 동위 요소가 아니므로 동위 요소일 뿐이므로 여백도 축소되지 않습니다.
레이아웃 강의에서는 Flexbox 및 그리드 컨테이너는 블록 컨테이너와 매우 유사하지만 하위 요소를 매우 다르게 처리한다는 것을 배웠습니다. 여백 축소가 여기에 해당합니다.
강의의 원래 예를 가져와서 열 방향으로 Flexbox를 적용하면 접히지 않고 여백이 결합됩니다. 이렇게 하면 Flexbox 및 그리드 컨테이너가 설계된 레이아웃 작업의 예측 가능성을 제공할 수 있습니다.
여백 및 여백 축소는 이해하기 까다로울 수 있지만 작동 방식을 자세히 이해하는 것이 매우 유용하므로 이 자세한 설명을 적극 권장합니다.
패딩
margin와 같이 상자 외부에 공간을 만드는 대신 padding 속성은 상자 내부에 단열과 같은 공간을 만듭니다.
사용 중인 박스 모델(박스 모델 강의에서 다룸)에 따라 padding도 요소의 전체 크기에 영향을 줄 수 있습니다.
padding 속성은 padding-top, padding-right, padding-bottom, padding-left의 약칭입니다.
margin와 마찬가지로 padding에도 padding-block-start, padding-inline-end, padding-block-end, padding-inline-start와 같은 논리 속성이 있습니다.
포지셔닝
레이아웃 모듈에서도 다룹니다. position 값을 static이 아닌 다른 값으로 설정하는 경우 top, right, bottom, left 속성을 사용하여 요소의 간격을 맞출 수 있습니다.
이러한 방향 값이 작동하는 방식에는 몇 가지 차이점이 있습니다.
position: relative가 있는 요소는 이 값을 설정하더라도 문서 흐름에서 그 위치를 유지합니다. 또한 요소의 위치를 기준으로 합니다.position: absolute가 있는 요소는 상대적인 상위 요소의 위치를 기준으로 방향 값을 설정합니다.position: fixed가 있는 요소는 표시 영역을 기준으로 방향 값의 기반이 됩니다.position: sticky가 있는 요소는 도킹/멈춘 상태일 때만 방향 값을 적용합니다.
논리 속성 모듈에서는 쓰기 모드를 준수하는 방향 값을 설정할 수 있는 inset-block 및 inset-inline 속성에 관해 알아봅니다.
두 속성 모두 start 및 end 값을 결합한 약식 표현이며 따라서 start 및 end에 설정되는 하나의 값 또는 두 개의 개별 값을 허용합니다.
그리드 및 Flexbox
마지막으로 그리드와 Flexbox에서 모두 gap 속성을 사용하여 하위 요소 사이에 공간을 만들 수 있습니다.
gap 속성은 row-gap 및 column-gap의 약자로, 하나 또는 두 개의 값(길이 또는 백분율일 수 있음)을 허용합니다.
unset, initial, inherit와 같은 키워드도 사용할 수 있습니다.
값을 하나만 정의하면 동일한 gap이 행과 열에 모두 적용되지만 두 값을 모두 정의하면 첫 번째 값은 row-gap이고 두 번째 값은 column-gap입니다.
Flexbox와 그리드를 모두 사용하면 그리드 모듈과 flexbox 모듈에서 다루는 배포 및 정렬 기능을 사용하여 공간을 만들 수도 있습니다.
일관된 간격 만들기
전략을 선택하고 이를 고수하여 흐름과 리듬이 적절한 사용자 인터페이스를 만드는 데 도움을 주는 것이 좋습니다. 이를 위한 좋은 방법은 간격에 대해 일관된 측정을 사용하는 것입니다.
예를 들어 요소 사이의 모든 간격(여백이라고 함)에 관한 일관된 측정값으로 20px를 사용하도록 약정하여 모든 레이아웃의 모양과 느낌이 일관되게 유지되도록 할 수 있습니다.
흐름 콘텐츠 사이의 세로 간격으로 1em를 사용할 수도 있습니다. 이렇게 하면 요소의 font-size에 따라 일관된 간격을 확보할 수 있습니다.
무엇을 선택하든 이러한 값을 변수 (또는 CSS 맞춤 속성)로 저장하여 해당 값을 토큰화하고 일관성을 좀 더 쉽게 만들어야 합니다.
:root {
--gutter: 20px;
--spacing: 1em;
}
h1 {
margin-left: var(--gutter);
margin-top: var(--spacing);
}
이와 같은 맞춤 속성을 사용하면 속성을 한 번만 정의한 다음 CSS 전체에서 사용할 수 있습니다. 값이 요소 내에서 로컬로 업데이트되거나 전역적으로 업데이트되면 값이 계단식을 통해 전달되고 업데이트된 값이 반영됩니다.
학습 내용 확인하기
띄어쓰기에 관한 지식 테스트
다음과 같은 경우 간격에 HTML을 사용하는 것이 안전합니다.
상자 안에 공간을 만들려면 다음을 사용하세요.
상자 외부에 공간을 만들려면 다음을 사용하세요.
상자 사이에 공간을 만들려면 다음을 사용하세요.