CSS 팟캐스트 - 013: 띄어쓰기
를 통해 개인정보처리방침을 정의할 수 있습니다.
세 개의 상자로 이루어진 컬렉션이 있다고 가정해 보겠습니다. 서로 쌓여 있고 그 사이에 공간을 원합니다. CSS에서 이를 구현할 수 있는 방법은 몇 가지인가요?
margin
속성이 필요한 것을 제공할 수도 있습니다.
하지만 원하지 않는 공백이 추가될 수도 있습니다.
예를 들어 각 요소 사이의 공백만 타겟팅하려면 어떻게 해야 할까요?
이 경우에는 gap
와 같은 것이 더 적합할 수 있습니다.
UI 내에서 간격을 조정하는 방법에는 여러 가지가 있습니다.
저마다의 강점과 주의사항이 있습니다
HTML 간격
HTML 자체는 요소에 간격을 지정하는 몇 가지 메서드를 제공합니다.
<br>
및 <hr>
요소를 사용하면 블록 방향으로 요소의 간격을 둘 수 있습니다.
라틴 기반 언어를 사용하는 경우
위에서 아래로입니다.
<br>
요소를 사용하는 경우
줄바꿈이 만들어지고
워드 프로세서에서 엔터 키를 누르는 것과 같습니다.
<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
) - 3가지 값: 첫 번째 값은
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;
}
언뜻 보기에는
단락이 제목에서 5em
간격이 될 것이라고 생각하면 괜찮을 것입니다.
2rem
와 3rem
를 합하면 5rem
로 계산되기 때문입니다.
하지만 세로 여백이 축소되므로 이 공간은 실제로는 3rem
입니다.
여백 접기는 인접한 두 요소 중 가장 큰 값을 선택하는 방식으로 작동합니다.
맞닿은 쪽에 세로 여백이 설정되어 있습니다.
h1
의 하단과 p
의 상단이 만납니다.
따라서 h1
의 하단 여백과 p
의 상단 여백 중 가장 큰 값이 선택됩니다.
h1
의 하단 여백이 3.5rem
이면
둘 사이의 공간은 3rem
보다 크기 때문에 3.5rem
이 됩니다.
블록 여백만 접히고 인라인 (가로) 여백은 접히지 않습니다.
여백 접기는 빈 요소에도 도움이 됩니다.
위쪽과 아래쪽 여백이 20px
인 단락이 있는 경우
이렇게 하면 40px
이(가) 아닌 20px
의 스페이스만 만들어집니다.
하지만 이 요소 내부에 아무것이나 추가하면
padding
를 포함하면 여백이 더 이상 자체적으로 축소되지 않고 콘텐츠가 있는 상자로 처리됩니다.
이해도 확인
마진 축소에 대한 지식 테스트
두 요소가 서로 겹쳐 쌓인 경우 상단 여백이 20픽셀인 경우 그리고 하단 여백 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
포지셔닝
레이아웃 모듈에서도 다룹니다.
static
가 아닌 position
값을 설정하는 경우
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을 사용하는 것이 안전합니다.
상자 내부에 공간을 만들려면 다음을 사용합니다.
상자 외부에 공간을 만들려면 다음을 사용합니다.
상자 사이에 공간을 만들려면 다음을 사용합니다.