CSS 팟캐스트 - 012: 논리적 속성
가장 일반적인 사용자 인터페이스 패턴은 인라인 지원 아이콘이 있는 텍스트 라벨입니다.
아이콘은 텍스트 왼쪽에 있으며 두 아이콘 사이에 작은 간격이 있으며 아이콘의 margin-right에 의해 제공됩니다.
그러나 문제가 있습니다. 텍스트 방향이 왼쪽에서 오른쪽일 때만 작동하기 때문입니다.
텍스트 방향이 오른쪽에서 왼쪽으로(아랍어와 같은 언어에서는 읽는 방식)로 변경되면 아이콘이 텍스트 위에 표시됩니다.
CSS에서 이를 어떻게 설명하나요? 논리 속성을 사용하면 이러한 상황을 해결할 수 있습니다. 그 밖에도 여러 가지 장점이 있지만 국제화가 자동으로 무료로 지원됩니다. 복원력이 우수하고 포괄적인 프런트엔드를 구축하는 데 도움이 됩니다.
용어
상단, 오른쪽, 하단, 왼쪽의 물리적 속성은 표시 영역의 물리적 크기를 나타냅니다. 지도 위의 나침반이라고 생각하면 됩니다. 반면 논리 속성은 콘텐츠 흐름과 관련되어 있는 상자의 가장자리를 나타냅니다. 따라서 텍스트 방향이나 쓰기 모드가 변경되면 텍스트 방향이 변경될 수 있습니다. 이는 방향 스타일에서 크게 달라진 것이며 인터페이스 스타일을 지정할 때 훨씬 더 유연한 기능을 제공합니다.
차단 흐름
블록 흐름은 콘텐츠 블록이 배치되는 방향입니다. 예를 들어 단락이 두 개인 경우 블록 흐름은 두 번째 단락이 진행되는 위치입니다. 영어 문서에서는 블록 흐름이 위에서 아래로 진행됩니다. 텍스트를 위에서 아래로 서로 이어지는 단락의 맥락에서 이를 생각해 보세요.
인라인 흐름
인라인 흐름은 텍스트가 문장에서 흐르는 방식입니다.
영어 문서에서 인라인 흐름은 왼쪽에서 오른쪽입니다.
웹페이지의 문서 언어를 아랍어 (<html lang="ar">)로 변경하면 인라인 흐름이 오른쪽에서 왼쪽이 됩니다.
텍스트는 문서의 쓰기 모드에 따라 결정된 방향으로 흐릅니다.
writing-mode 속성을 사용하여 텍스트가 배치되는 방향을 변경할 수 있습니다.
전체 문서 또는 개별 요소에 적용할 수 있습니다.
상대적 흐름
이전에는 CSS에서 측면 방향을 기준으로 여백과 같은 속성만 적용할 수 있었습니다.
예를 들어 margin-top은 요소의 실제 상단에 적용됩니다.
논리 속성이 있으면 margin-top가 margin-block-start가 됩니다.
즉, 언어 및 텍스트 방향과 상관없이 블록 흐름에는 적절한 여백 규칙이 있습니다.
사이즈
요소가 특정 너비나 높이를 초과하지 않도록 하려면 다음과 같이 규칙을 작성합니다.
.my-element {
max-width: 150px;
max-height: 100px;
}
흐름에 상대적인 값은 max-inline-size 및 max-block-size입니다.
min-height 및 min-width 대신 min-block-size 및 min-inline-size를 사용할 수도 있습니다.
논리 속성을 사용하면 최대 너비 및 높이 규칙이 다음과 같이 표시됩니다.
.my-element {
max-inline-size: 150px;
max-block-size: 100px;
}
시작과 끝
상단, 오른쪽, 하단, 왼쪽과 같은 방향을 사용하는 대신 시작과 끝을 사용하세요. 이를 통해 block-start, inline-end, block-end, inline-start를 사용할 수 있습니다. 이를 통해 쓰기 모드 변경에 반응하는 CSS 속성을 적용할 수 있습니다.
예를 들어 텍스트를 오른쪽으로 정렬하려면 다음 CSS를 사용할 수 있습니다.
p {
text-align: right;
}
물리적 권리가 아닌 읽기 방향의 시작에 맞추는 것이 목표라면 이 방법은 도움이 되지 않습니다.
논리 값을 사용하면 텍스트 방향에 매핑되는 더 유용한 start 및 end 값이 있습니다.
이제 텍스트 정렬 규칙은 다음과 같습니다.
p {
text-align: end;
}
간격 및 위치
margin, padding, inset의 논리 속성을 사용하면 요소를 배치하고 쓰기 모드에서 이러한 요소가 서로 상호작용하는 방식을 더 쉽고 효율적으로 결정할 수 있습니다.
여백 및 패딩과 관련된 속성은 여전히 경로에 직접 매핑되지만 중요한 차이점은 쓰기 모드가 변경되면 함께 변경된다는 점입니다.
.my-element {
padding-top: 2em;
padding-bottom: 2em;
margin-left: 2em;
position: relative;
top: 0.2em;
}
그러면 padding가 있는 수직 내부 공간이 추가되고 margin를 사용하여 왼쪽에서 바깥쪽으로 밀어냅니다.
top 속성도 아래쪽으로 이동합니다.
이 경우 논리적 속성이 있으면 다음과 같이 표시됩니다.
.my-element {
padding-block-start: 2em;
padding-block-end: 2em;
margin-inline-start: 2em;
position: relative;
inset-block-start: 0.2em;
}
이렇게 하면 padding를 사용하여 공간 내부에 인라인이 추가되고 margin로 인라인 시작에서 푸시됩니다.
inset-block 속성은 블록 시작에서 안쪽으로 이동합니다.
inset-block 속성은 논리 속성을 포함하는 유일한 약식 옵션은 아닙니다.
여백 및 패딩 속성의 약식 버전을 사용하여 이 규칙을 더 압축할 수 있습니다.
.my-element {
padding-block: 2em;
margin-inline: 2em 0;
position: relative;
inset-block: 0.2em 0;
}
테두리
논리적 속성을 사용하여 border 및 border-radius를 추가할 수도 있습니다.
하단과 오른쪽에 오른쪽 반경과 함께 테두리를 추가하려면 다음과 같이 규칙을 작성할 수 있습니다.
.my-element {
border-bottom: 1px solid red;
border-right: 1px solid red;
border-bottom-right-radius: 1em;
}
또는 다음과 같은 논리 속성을 사용할 수 있습니다.
.my-element {
border-block-end: 1px solid red;
border-inline-end: 1px solid red;
border-end-end-radius: 1em;
}
border-end-end-radius의 end-end는 블록 끝 및 인라인 끝입니다.
단위
논리 속성에는 vi와 vb라는 두 개의 새로운 단위가 있습니다.
vi 단위는 인라인 방향으로 표시 영역 크기의 1% 입니다.
비논리 속성 값은 vw입니다.
vb 단위는 블록 방향에서 표시 영역의 1% 입니다.
비논리 속성 값은 vh입니다.
이 단위는 항상 읽기 방향으로 매핑됩니다.
예를 들어 요소가 표시 영역의 사용 가능한 인라인 공간의 80% 를 차지하도록 하려는 경우, 쓰기 모드가 세로 모드일 때 vi 단위를 사용하면 해당 크기가 위에서 아래로 자동 전환됩니다.
실용적으로 논리적 속성 사용
논리 속성과 쓰기 모드는 국제화만을 위한 것이 아닙니다. 이를 통해 더욱 다양한 사용자 인터페이스를 만들 수 있습니다.
X축과 Y축에 라벨이 있는 차트가 있는 경우 Y 라벨의 텍스트를 세로로 읽도록 할 수 있습니다.
데모의 Y축 라벨의 writing-mode가 vertical-rl이므로 두 라벨에 동일한 margin 값을 사용할 수 있습니다.
블록 시작이 Y축의 오른쪽과 X축의 상단에 있으므로 margin-block-start 값이 두 라벨에 모두 적용됩니다.
블록 시작 부분에 빨간색 테두리가 있어서 잘 볼 수 있습니다.
아이콘 문제 해결
이제 논리적 속성을 다루었으므로 이 지식은 처음에 시작한 설계 문제에 적용할 수 있습니다.
p {
display: inline-flex;
align-items: center;
}
p svg {
width: 1.2em;
height: 1.2em;
margin-right: 0.5em;
flex: none;
}
여백은 아이콘 요소의 오른쪽에 적용되었습니다.
아이콘과 텍스트 사이의 간격이 모든 읽기 방향을 지원하려면 margin-inline-end 속성을 대신 사용해야 합니다.
p {
display: inline-flex;
align-items: center;
}
p svg {
width: 1.2em;
height: 1.2em;
margin-inline-end: 0.5em;
flex: none;
}
이제 읽기 방향과 관계없이 아이콘이 자체적으로 배치되고 적절한 간격이 지정됩니다.
학습 내용 확인하기
논리 속성에 관한 지식 테스트
손으로 글자를 적을 때 손목이 움직이고 있는 논리 축은 어느 것입니까?
inlineblock논리 속성의 이점을 누릴 수 있는 모든 항목 선택
flex-start, block-end, inline-startblock-start 및 inline입니다.inline-size 및 max-block-size입니다.border-end-end-radius.단어의 논리적 측면에 밑줄이 그어진 것은 무엇인가요?