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을 사용하는 것이 안전합니다.
상자 안에 공간을 만들려면 다음을 사용하세요.
상자 외부에 공간을 만들려면 다음을 사용하세요.
상자 사이에 공간을 만들려면 다음을 사용하세요.