CSS의 논리적 속성

CSS에서 논리적 속성을 사용하면 개발자는 물리적 레이아웃이 아닌 웹 페이지의 논리적 구조를 기반으로 스타일을 정의할 수 있습니다. 이는 텍스트 방향이나 콘텐츠 흐름에 따라 CSS를 적용할 수 있음을 의미합니다.

주로 논리적 속성을 사용하여 HTML 요소의 여백, 패딩 및 테두리를 설정합니다. 여백, 패딩 및 테두리 속성의 다양한 변형이 포함되어 있습니다.

논리적 속성은 블록 수준 및 인라인 차원을 기반으로 정의할 수 있습니다.

• 블록 차원 − 블록 차원은 콘텐츠 흐름의 수직 방향을 나타냅니다. 예를 들어 영어 텍스트 방향은 왼쪽에서 오른쪽이므로 블록 차원은 요소의 위쪽과 아래쪽을 처리합니다.

• 인라인 치수

  - 인라인 치수는 콘텐츠 또는 텍스트 방향과 동일한 방향을 나타냅니다. 영어의 경우 왼쪽과 오른쪽은 인라인 크기입니다.

CSS에서 일반적으로 사용되는 몇 가지 논리적 속성을 살펴보겠습니다.

• Border-block

  − 위쪽 및 아래쪽 테두리를 설정합니다.

• Border-inline

  − 왼쪽 및 오른쪽 테두리를 설정합니다.

• Border-block-start

  − 위쪽 테두리를 설정합니다.

• Border-block-end

  − 아래쪽 테두리를 설정합니다.

• Margin-inline

  − 왼쪽 및 오른쪽 여백을 설정합니다.

• Padding-inline

  − 왼쪽 및 오른쪽 패딩을 설정합니다.

• Padding-inline-start

  − 왼쪽 패딩을 설정합니다.

• Margin-inline-end

  − 바닥 패딩을 설정합니다.

• Border-inline-end-width

  − 오른쪽 테두리의 너비를 설정합니다.

• Border-block-start-style

  − 위쪽 테두리의 스타일을 설정합니다.

위 속성에서 사용자는 상단과 하단에 'block'을, 왼쪽과 오른쪽에 'inline'을 사용해야 하고, 왼쪽과 상단에 'start'를, 오른쪽과 하단에 'end'를 사용해야 한다는 것을 알 수 있습니다.

일반 CSS 속성 대신 논리 속성을 사용해야 하는 이유는 무엇인가요?

위 속성의 기능을 살펴보면서 가장 먼저 떠오르는 질문은 일반 CSS 속성을 사용하여 동일한 스타일을 구현할 수 있는지 여부와 논리적 속성을 사용해야 하는 이유입니다. 귀하의 답변은 다음과 같습니다.

때때로 HTML 요소의 왼쪽 및 오른쪽 여백을 설정해야 할 때가 있습니다. margin 속성의 '0 auto' 값을 사용하거나 각각 margin-left 및 margin-right의 CSS 속성을 사용하여 이를 수행할 수 있습니다. '0 auto'를 사용할 때 이전에 적용한 상단 및 하단 여백 값도 변경됩니다. 따라서 'margin-inline' CSS 속성을 사용하는 것이 좋습니다.

으아악

문법

사용자는 아래 구문에 따라 CSS에서 논리적 속성을 사용할 수 있습니다.

으아악

위 구문에서는 다른 CSS 속성과 마찬가지로 논리적 속성을 사용합니다.

예제 1(여백 및 패딩 논리 속성)

아래 예에서는 두 개의 div 요소를 만들고 그 안에 텍스트를 추가했습니다. CSS에서는 "padding-block-start", "padding-inline-start" 및 "margin-block-end" 논리적 CSS 속성을 사용하여 첫 번째 div의 위쪽 및 왼쪽 패딩과 아래쪽 여백을 설정했습니다.

또한 'margin-inline-end' 논리적 CSS 속성을 사용하여 div 요소에 오른쪽 패딩을 추가했습니다.

으아악

예 2

아래 예에서는 테두리와 관련된 논리적 CSS 속성을 보여주었습니다. 'border-block-start'를 사용하여 위쪽 테두리를 적용하고 'border-block-end'를 사용하여 아래쪽 테두리를 적용했습니다. 왼쪽 테두리를 적용하려면 'border-inline-start'를 사용하고 오른쪽 테두리를 적용하려면 'border-inline-end'를 사용했습니다.

출력에서 사용자는 div 요소의 다양한 측면에 대한 다양한 테두리를 관찰할 수 있습니다.

으아악

예 3

은 다음과 같이 번역됩니다.

예 3

아래 예에서는 flexbox에 margin 및 padding과 관련된 CSS 논리 속성을 적용했습니다. 여기서는 컨테이너 div 요소 내부에 3개의 div 요소를 생성한 후 'padding-inline'을 사용하여 올바르게 적용했습니다. 컨테이너 div 요소에 왼쪽 패딩을 추가했습니다.

으아악

사용자는 CSS에서 논리적 속성을 사용하는 방법을 배웠습니다. 대부분의 논리적 속성은 여백, 안쪽 여백 및 테두리와 관련됩니다. 그러나 오버플로와 관련된 일부 논리적 속성도 존재하며 인터넷에서 개발자가 참조할 수 있습니다. 논리적 속성으로 작업할 때 사용자는 "블록" 및 "인라인" 차원은 물론 "시작" 및 "끝" 방향에도 집중해야 합니다.

위 내용은 CSS의 논리적 속성의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!