치트 시트와 함께 CSS 논리적 특성에 대한 완전한 가이드

이 기사에서는 CSS 논리적 특성으로 뛰어들 것입니다. 우리는 그들이 무엇인지, 어떻게 일하는지, 그리고 그들이 유용한 것을 살펴볼 것입니다. 또한 편리한 치트 시트를 제공하여 CSS 논리적 특성을 물리적 등가물과 쉽게 비교할 수 있습니다. 논리적 특성을 직접 사용하지 않도록 선택하더라도 점점 더 많은 웹 사이트와 온라인 데모의 코드에 나타나기 시작하므로 익숙해지는 것이 좋습니다. 예를 들어, 를 만날 수 있습니다

CSS 논리적 특성에 익숙하지 않으면 아마도 당신에게 큰 의미는 없을 것입니다. 당신이 읽으면, 당신은 곧 논리적 인 속성 닌자가 될 것입니다!

우리의 편리한 논리적 특성 pdf 치트 시트를 다운로드하십시오 키 테이크 아웃

CSS 논리적 특성은 컴퓨터 화면의 물리적 치수 대신 텍스트 방향에 따라 폭, 높이, 패딩, 마진 및 테두리와 같은 특성을 선언하는 새로운 방법을 제공합니다. 논리적 특성은 텍스트 방향의 변경에 적응할 수 있으므로 여러 언어 버전을 가진 웹 사이트에 특히 유용합니다. 또한 미디어 또는 컨테이너 쿼리로 인한 텍스트 방향 변경에 대한 적응성과 같은 단일 웹 사이트에 대한 장점을 제공합니다. CSS 논리적 특성에는 크기, 마진, 패딩, 삽입 (위치 요소), 테두리, 테두리 반경, 부동 및 청소, 텍스트 정렬, 크기 조정, 오버플로 및 크롤리브 하이버에 대한 변형이 포함됩니다. 이러한 각 속성은 텍스트 방향에 적응하는 논리적 동등성을 가지고 있습니다. 텍스트 방향은 HTML과 CSS에 지정할 수 있습니다. HTML에서는 DIR 속성을 사용하여 설정할 수 있으며 CSS에서는 방향 속성을 사용하여 설정할 수 있습니다. 수직 텍스트의 경우 CSS의 쓰기 모드 속성을 사용할 수 있습니다.

CSS 논리적 특성에 대한 브라우저 지원은 2020 년대 초반에 빠르게 발전했으며 현재 주요 브라우저에서 강력하게 지원됩니다. 그러나 이전 브라우저의 경우 논리적 및 물리적 특성을 모두 선언해야 할 수도 있습니다.

논리적 특성은 무엇입니까? 논리적 특성은 폭과 높이, 패딩, 마진, 테두리, 테두리 반경, 위치, 부동, 텍스트 정렬 및 오버플로와 같은 속성을 선언하는 새로운 방법을 제공합니다. 전통적으로, 이러한 특성은 컴퓨터 화면의 물리적 차원 (왼쪽, 오른쪽, 상단 및 하단과 관련하여 선언되었습니다. 논리적 특성은 대신 텍스트 방향 . 일부 언어는 영어와 같은 왼쪽에서 오른쪽으로 실행됩니다. 다른 사람들은 아랍어처럼 오른쪽에서 왼쪽으로 달려갑니다. 다른 사람들은 때때로 일본어와 같은 위에서 아래로 달려갑니다. 많은 웹 사이트에는 영어, 아랍어 및 중국어로 된 BBC 뉴스 사이트 또는 영어, 아랍어 및 중국어의 Al Jazeera 사이트와 같은 여러 언어로 여러 버전이 있습니다. 텍스트 방향에 연결된 스타일을 갖는 것은 텍스트 방향의 변경에 적응하여 모든 사이트의 사이트에 적용 할 수 있기 때문에 여러 가지 장점을 제공합니다.

텍스트 방향 이해

논리적 특성의 목적을 더 잘 파악하려면 텍스트 방향에 대한 몇 가지 사항을 실제로 이해해야합니다. 우리는 html과 css 모두에서 텍스트 방향을 지정할 수 있습니다. html은 텍스트가 페이지에서 왼쪽에서 오른쪽으로 실행되는지 여부 (dir = "ltr"), 오른쪽에서 왼쪽 (dir = "rtl") 또는 브라우저가 자신의 마음을 구성 해야하는지 여부를 지정합니다. 사용중인 언어를 기준으로 (DIR = "AUTO"). DIR 속성은 전체 문서 (전체 문서가 동일한 언어를 사용하는 경우 표준) 또는 개별 요소에 적용될 수 있습니다. HTML에서 DIR 속성을 사용하는 대신 CSS에서 방향 속성을 사용할 수 있습니다. 왼쪽에서 오른쪽 텍스트를 지정하려면 방향을 사용하십시오 : LTR 및 오른쪽에서 왼쪽 텍스트를 사용하려면 방향을 사용하십시오 : RTL.

HTML 또는 CSS에서 텍스트 방향을 설정하든 간에는 문제가되지 않지만 HTML에서 DIR 속성을 사용하는 것이 좋습니다. 시트. <..> 우리는 또한 CSS를 사용하여 텍스트가 위에서 아래로 실행되는 것을 지정할 수도 있습니다. 왼쪽에서 오른쪽으로 실행되는 수직 텍스트의 경우 Writing-Mode : Vertical-LR 및 오른쪽에서 왼쪽으로 실행되는 수직 텍스트의 경우 Writing-Mode를 사용합니다. (수직 텍스트에는 DIR 옵션이 없습니다.)

이 기사에서는 물리적 및 논리적 CSS 속성의 효과를 비교하는 일련의 데모를 살펴 보겠습니다. 이 데모는 이모티콘으로 구성된 단락을 사용하여 텍스트 방향을 설명합니다. 아래 펜에는 이모티콘 문장이 들어있는 4 개의 상자가 있습니다. 첫 번째는 dir = "ltr"(브라우저 기본값)로, 두 번째는 dir = "rtl", 세 번째는 작문 모드 : 세로 LR, 네 번째 ~ 쓰기 모드 : vertical-rl로 설정됩니다.

펜을 참조하십시오 논리적 특성 : sitepoint의 텍스트 방향 (@sitepoint) Codepen에서.

이 데모에서는 텍스트 방향 설정이 단락의 문자 순서에 어떤 영향을 미치는지 알 수 있습니다.

제쳐두 : 위의 데모에서 행이 어떻게 잘 정렬되는지 보시겠습니까? CSS 그리드의 새로운 하위 그리드 값 덕분입니다. 우리는 최근의 빠른 팁에서 하위 그리드로 행을 정렬하는 방법을 다루었습니다. CSS의 블록 및 인라인 이해 CSS가 커지고 발달함에 따라, 왼쪽, 오른쪽, 화면에서 위아래로, 내용의 흐름에 초점이 적습니다. 예를 들어 Flexbox의 메인 및 크로스 축에 익숙 할 수 있습니다. 예를 들어, 그리드 내용의 방향과 마찬가지로 텍스트가 흐르는 방향에 따라 다릅니다. CSS 블록 및 인라인 속성은 텍스트 방향에 따라 결정됩니다. 아래 이미지에서 블록 및 인라인 방향은 텍스트 방향에 따라 다릅니다. 왼쪽에서 오른쪽으로 실행되는 단락의 경우, 이와 같이 인라인 방향은 왼쪽/오른쪽이며 블록 방향은 위/아래입니다. 논리적 특성은 블록 및 인라인 치수 측면에서 설정되며 텍스트 방향이 변경 될 때 자동으로 스왑됩니다. 이것은 물리적 특성보다 훨씬 더 적응력이 있습니다 인라인 시작과 끝은 블록 방향으로 시작하고 끝나는대로 텍스트가 시작되고 끝나는 위치에 따라 결정됩니다.

는 다국어 사이트에 대해서만 논리적 특성입니다 논리적 특성은 모든 웹 사이트에 유용합니다. 단일 언어 웹 사이트가 논리적 특성을 사용함으로써 혜택을 볼 수있는 많은 상황이 있습니다.

예를 들어 미디어 또는 컨테이너 쿼리를 사용하는 동안 요소의 텍스트 방향을 변경할 수 있습니다. 왼쪽 빨간색 테두리가있는 제목을 상상해보십시오. 작은 화면에서 제목은 다음 단락보다 수평 일 수 있습니다. 넓은 화면에서는 제목을 수직으로 표시하도록 설정할 수 있습니다. 아래 이미지는 제목에서 Border-Left : 5px Solid Red를 사용하면 어떻게 될지를 보여줍니다.

일단 제목이 세로로 표시되면 왼쪽 테두리가 왼쪽에 남아 있습니다. 논리적 특성을 사용하여, 우리는 대신 방향이 어떤 방향으로 가리키고 있더라도 아래 그림의 결과를 생성하더라도 제목의 인라인 시작 (테두리-인라인 시작)에 붉은 테두리가 나타나도록 지정할 수 있습니다.

(Codepen에서 이것의 실시간 데모를 확인할 수 있습니다.)

이것은 논리적 특성으로 우리의 레이아웃이 다른 시나리오에 대한 추가 CSS를 추가하지 않고도 변경에 더 적응할 수있는 방법을 보여줍니다. 이 외에도 논리적 특성은 CSS 코딩을 여러 언어로 작업하든 아니든 모든 사람에게 더 효율적으로 만드는 데 도움이되는 여러 가지 유용한 속기를 제공한다는 것을 알 수 있습니다.

크기 (너비 및 높이 치수)

물리적 화면을 기반으로하는 너비와 높이 대신 논리적 특성은 인라인 크기와 블록 크기를 사용합니다. 너비와 높이를 설정하는 데 어떤 사용을 사용할 것인지 결정하려면 텍스트가 어떤 방향으로 들어갈 지 알아야합니다. 아래 데모에서 첫 번째 행의 단락에는 80px의 블록 크기가 주어졌습니다. 각각의 경우, 80px는 블록 방향으로 설정됩니다. 이것을 두 번째 줄의 단락과 비교하는데, 각각은 높이로 설정되어 있습니다 : 80px. 각각의 경우, 높이는 화면과 관련하여 설정됩니다.

펜을 참조하십시오 논리적 특성 : sitepoint의 크기 (너비 및 높이) (@sitepoint) Codepen에서.

기타 크기 속성에는 다음이 포함됩니다

최대 인라인 크기 min-inline-size

최대 블록 크기 min-block-size

모든 크기 옵션에 대한 치트 시트와 브라우저 지원 정보와 함께 각 텍스트 방향으로 사용하는 방법을 참조하십시오.

마진 논리적 특성을 사용하여 마진은 마진 인라인 및 마진 블록의 변형으로 설정됩니다. 왼쪽에서 오른쪽으로 언어의 경우, 마진 인라인-시작 : 40px는 텍스트 시작시 (화면 왼쪽)에 마진을 적용합니다. 오른쪽에서 왼쪽 언어에 적용되면 해당 마진이 화면 오른쪽에 나타납니다. 수직 텍스트의 경우 아래 데모와 같이 마진이 상단에 나타납니다. 아래 데모의 두 번째 행의 각 단락에 적용되는 마진 왼쪽 : 40px와 첫 번째 줄에서 각 단락에 적용되는 마진 인라인 시작의 효과를 비교하십시오.

펜을 참조하십시오 논리적 특성 : sitepoint에 의한 마진 (@sitepoint) Codepen에서.

다른 마진 속성에는 다음이 포함됩니다

마진 인라인-엔드 마진-차단 시작 마진-블록 엔드 마진 인라인

마진-블록
마진 인라인은 마진 왼쪽 및 마진 오른쪽의 속기로 사용될 수 있으며, 이는 많은 상황에서 매우 편리합니다 (마진 인라인 : auto. 모든 마진 옵션 및 브라우저 지원 정보에 대한 치트 시트를 참조하십시오.
• 패딩 논리적 특성을 사용하여 패딩은 패딩 인라인 및 패딩 블록의 변형으로 설정됩니다. 왼쪽에서 오른쪽 언어의 경우 패딩 블록 스타트 : 40px는 텍스트 상단 (화면 상단)에 패딩을 적용합니다. 오른쪽에서 왼쪽 언어에 적용되면 그 패딩은 화면 상단에도 나타납니다. 수직 텍스트의 경우 패딩이 수평 방향에 따라 왼쪽 또는 오른쪽에 나타납니다. 아래 데모의 두 번째 줄에 각 단락에 적용되는 패딩 탑 : 40px와 첫 번째 행에서 패딩 블록 스타트의 효과를 비교하십시오.

  펜을 참조하십시오 논리적 특성 : sitepoint에 의한 패딩 (@sitepoint) Codepen에서.

  다른 패딩 속성에는 다음이 포함됩니다

  패딩-인라인 시작 패딩 인라인-엔드 패딩-블록 엔드

  패딩 인라인 패딩-블록
  패딩 인라인은 왼쪽 패딩 및 패딩 오른쪽에 속기로 사용될 수 있습니다.

  브라우저 지원 세부 사항과 함께 각 텍스트 방향의 모든 패딩 옵션에 대한 치트 시트를 참조하십시오. 삽입물 (위치 요소) 매우 편리한 삽입 속성을 발견 했습니까? 포지셔닝 요소 (예 : 위치 : 절대)에 사용됩니다. 예를 들어, 삽입 : 0은 상단의 속기입니다 : 0; 오른쪽 : 0; 하단 : 0; 왼쪽 : 0;. 이모티콘 데모에서 이것을 시도해 봅시다. 함유 된 div는 위치로 설정됩니다 : 상대 및 단락은 위치로 설정됩니다 : 절대. 첫 번째 행의 단락은 삽입 블록 엔드 : 30px로 설정되며 두 번째 행에있는 것은 물리적으로 하단으로 설정됩니다.

  펜을 참조하십시오 논리적 특성 : sitepoint에 의해 삽입 (@sitepoint) Codepen에서.
  삽입에 대한 다른 속성에는 다음이 포함됩니다
  • 삽입-블록 스타트 삽입-블록 inset-inline-start 삽입 내일 엔드
  삽입 된 라인
  는 편리한 속기 삽입 블록 및 삽입 된 인라인에 유의하십시오. (삽입-블록 : 20px는 삽입과 같습니다 : 20px 자동. 간단한 데모 참조)
  • .
  삽입 속성의 전체 목록과 치트 시트에서 텍스트 방향으로 작동하는 방법을보십시오. 경계 우리는 테두리 : 5px solid red와 같은 경계 속기가있는 요소 주위에 테두리를 설정할 수 있습니다. 그러나 우리가 단지 요소의 특정 측면
  • 를 스타일링하고 싶다면, 우리는 갑자기 경계선, 국경 바닥, 국경 왼쪽 및 국경 권리를 다루고 있습니다. > 경계는 너비 (테두리의 두께), 스타일 (단단한, 점선 등) 및 색상의 세 가지 값을 포함하기 때문에 조금 더 관여합니다. 우리가 국경-인라인-시작 : 5px 솔리드 레드를 단락에 적용 할 때 어떤 일이 일어나는지 보자.

    펜을 참조하십시오 논리적 특성 : SitePoint (@SitePoint)에 의한 국경 Codepen에서.

    국경에 대한 다른 논리적 속성은 다음과 같습니다

    국경-인라인-엔드

    국경-차단 시작 국경-차단-엔드

    국경-인라인 경계-차단

    국경-인라인은 국경의 멋진 속기입니다. 왼쪽에서 오른쪽으로 왼쪽과 경계선, 경계선 및 경계 바닥에 대한 경계 블록. 우리는 단일 값 만 목표로 국경 논리적 특성으로 더 드릴 수 있습니다. 너비에 대해 우리는 이것들을 가지고 있습니다 :
    국경-차단 스타트 width 국경-차단-엔드 윈드 국경-차단 width 국경-인라인 스타트 width 국경-인라인-엔드 윈트 국경-인라인 width
    스타일의 경우 우리는 이것들을 가지고 있습니다 :
    • 국경-차단 스타트 스타일 국경-차단-엔드 스타일 국경-차단 스타일 국경-인라인 스타일 스타일 국경-인라인-엔드 스타일 국경-인라인 스타일
    • 색상의 경우 우리는 이것들을 가지고 있습니다 :
    국경-차단 스타트 컬러 국경-차단-엔드-컬러
    • 국경-차단 색상 국경-인라인 스타트 컬러 국경-인라인-엔드-컬러 국경-인라인-컬러
    각 텍스트 방향에 적용 할 때 이러한 특성의 모든 조합 및 순열에 대해 치트 시트를 확인하십시오. 경계 반경
    • 우리는 테두리-라디우스 속성을 가진 요소의 모든 모서리에 테두리 반경을 설정할 수 있습니다. 물리적 특성으로 개별 모서리를 목표로하는 경우 먼저 요소의 상단 또는 하단에 있는지, 그리고 요소의 왼쪽 또는 오른쪽에 있는지 고려합니다. 따라서 왼쪽 상단 코너는 경계선 왼쪽 라디우스로 지정됩니다 상단/하단 왼쪽/오른쪽 대신 논리적 특성으로 테두리 반경을 설정할 때 Block [start/end] -inline [start-end].
    에 대해 생각해야합니다. 즉, 특정 코너에 대한 올바른 속성을 선택하려면 요소의 블록 방향의 시작 또는 끝에 있는지 여부와 요소의 인라인 방향의 시작 또는 끝에 있는지 여부를 스스로에게 물어봐야합니다. 중간의 옵션 :

    <span>p {
    </span>  <span>margin-block-start: 1em;
    </span><span>}
    </span>

    다음 데모의 첫 번째 행에서, 우리는 블록의 시작시 경계 반경 20px를 설정하고 Border Start-Start-Radius와 함께 인라인 텍스트 방향을 설정합니다. 두 번째 줄에서 테두리-왼쪽-라디우스와 비교하십시오.
    펜을 참조하십시오 논리적 특성 : sitepoint에 의한 테두리 반경 (@sitepoint) Codepen에서.

    여기에는 특별한 속기가 없으므로 두 모서리를 돌고 싶다면 다음과 같은 일을해야합니다.

    오 잘! (여기의 데모를 참조하십시오.)

    모든 테두리 반경 옵션 및 브라우저 지원 정보에 대한 치트 시트를 참조하십시오. 국경 반경 논리적 특성이 브라우저에서 지원되는 데 시간이 더 걸렸지 만 현대식 브라우저에서는 지원이 좋습니다. 떠 다니고 청소

    float and clear에 대한 논리적 특성은 요소를 부유하고 지우는 방법에 대한 새로운 옵션을 제공합니다. 논리적 특성 이전에 유일한 옵션은 플로트 : 왼쪽 및 플로트 : 오른쪽, 명확한 : 왼쪽 및 명확성이었습니다. 오른쪽. 텍스트가 수직 인 경우 텍스트와 같은 방향으로 떠 다니는 옵션이 없었습니다.

    -start-start-
    -end-start-
    -start-end-
    -end-end-
    

    논리적 특성을 사용하면 인라인 시작 및 인라인 엔드 덕분에 텍스트의 인라인 흐름과 관련하여 플로팅 및 청소가 특별히 수행 될 수 있습니다. 아래 데모에서, 스팬 요소는 두 번째 행에 남은 물리적 값과 비교하여 논리적 값이 인라인-시작하여 플로팅됩니다.

    펜을 참조하십시오 논리적 특성 : sitepoint (@sitepoint)에 의해 float Codepen에서.

    인라인 시작 및 인라인 엔드 값도 투명 속성에도 적용됩니다. (여기에 Codepen 데모가 있습니다.)

    명확한 대안을위한 논리적 대안이 필요하지 않습니다. 텍스트 정렬 우리는 이미 왼쪽, 오른쪽, 중앙 및 정당화와 같은 텍스트 정렬 값을 가지고 있습니다. 이제 두 가지 논리적 값이 추가되었습니다 : 시작과 끝. 어떤 방향으로 들어가더라도 인라인 축을 따라 텍스트를 정렬하는 데 사용될 수 있습니다. 아래 데모에서 첫 번째 행의 단락은 텍스트-정렬 : end로 설정되었습니다. 보시다시피, 이모티콘은 모두 인라인 축의 맨 끝으로 밀려납니다.

    펜을 참조하십시오 논리적 특성 : sitepoint의 텍스트 정렬 (@SitePoint) Codepen에서.

    치트 시트는 다양한 텍스트 방향으로 작동하기 위해 시작 및 종료 값을 적용하는 방법을 보여줍니다. 크기 조정 크기 조정 속성은 특정 요소를 지정된 방향으로 크기를 조정할 수 있으며 이제는 인라인 및 블록 옵션이 있습니다. 아래 데모는 크기 조정의 차이점 : 인라인과 크기 조정 : 수평. (드래그 할 수있는 각 상자의 오른쪽 하단에 작은 크기 조정 핸들이 있습니다.)

    펜을 참조하십시오 논리적 특성 : SitePoint에 의해 크기 조정 (@SitePoint) Codepen에서.

    (위의 데모에서는 오른쪽에서 왼쪽 상자의 크기 조정이 약간 거칠다. 오버플로 오버플로 X 및 오버플로의 물리적 특성은 이제 오버플로 인라인 및 오버플로 블록의 논리적 보완을 갖습니다.

    글을 쓰는 시점 (2024 년 4 월) 에이 새로운 속성에 대한 지원은 거의 없음에 유의하십시오. 탁월한 행동 탁월한 호텔 속성은 오버플리링 요소가 어떻게 스크롤하는지를 세분화하는 새로운 속성입니다. 우리는 여기서 그것을 탐구하지는 않지만 mdn에 대해 더 많이 읽을 수 있습니다.
    이러한 특성의 논리적 버전과 물리적이라는 말로 충분합니다. 예를 들어, 왼쪽에서 오른쪽에서 오른쪽에있는 탁월한 언어의 엑스트라 스크롤-하이버 X는 Dackscroll-behavior-inline 등으로 대체 될 수 있습니다. (예제의 전체 목록은 치트 시트를 참조하십시오.)

    브라우저 지원 CSS 논리적 특성에 대한 브라우저 지원 2020 년대 초반에 빠르게 진행되었으며 논리적 특성은 이제 주요 브라우저에서 강력하게 지원됩니다. 논리적 특성은 물리적 상대와 동일한 가중치를 가지고 있으므로 이전 브라우저의 경험에 대해 걱정하면 다음과 같은 두 가지 값을 선언 할 수 있습니다.

    이전 브라우저는 첫 번째 선언을 사용하고 최신 브라우저는 두 번째 브라우저를 사용합니다. 그러나 스타일 시트 전체에서 이와 같은 코드를 복제하는 것은 지루할 것입니다. 따라서 오래된 브라우저에 대해 걱정한다면 지금은 논리적 특성을 쉽게 이동할 수 있습니다.

    . Caniuse에는 논리적 특성 지원에 대한 개요가 있으며 치트 시트의 각 섹션에는 특정 속성을 지원하는 링크도 있습니다.

    결론 이 기사에서는 현재 사용 가능한 모든 논리적 속성을 거의

    거의

    에 다루었습니다. (추가로 가고 싶다면 캡션 측 및 크기 격리에 대한 논리적 특성을 확인할 수도 있습니다.) 다른 것이 없다면, 논리적 특성이 무엇인지, 사용 방법을 이해할 가치가 있습니다. 최소한 웹 전체에 나타나는 새로운 CSS 논리 속성 코드를 이해하게 될 것입니다. 논리적 특성은 다국어 사이트에서 작업하지 않더라도 혜택을 제공합니다. Margin-inline과 같은 다양한 속기는 매우 유용하며 키트에 넣을 수있는 좋은 도구입니다. 이 기사를 통해 바로 읽은 경우 논리적 특성이 나타나는 곳마다 인식 할 수 있어야합니다. (그 블록과 인라인 키워드를 찾으십시오!) CSS에서 가끔 사용할 수있을만큼 확신합니다. 우리의 편리한 논리적 특성 pdf 치트 시트를 다운로드하는 것을 잊지 마십시오.

위 내용은 치트 시트와 함께 CSS 논리적 특성에 대한 완전한 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!