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