디스플레이 속성 자세히 알아보기: 디스플레이의 두 가지 가치

플렉스 또는 그리드 레이아웃은 display: flex 또는 display: grid 를 선언하는 것으로 시작됩니다. 이러한 레이아웃 방법은 CSS display 속성의 값입니다. 우리는 이 속성 자체에 대해 별로 이야기하지 않는 경향이 있습니다. 대신 flex 또는 grid 의 값에 집중합니다. 그러나 display에 대해 이해해야 할 몇 가지 흥미로운 것들이 있으며 display 를 정의하는 방법에 대해 이해해야 사용하는 동안 훨씬 더 쉽게 사용할 수 있습니다. 레이아웃용 CSS.

짧은 시리즈의 첫 번째 기사인 이 기사에서는 레벨 3 사양에서 display 값이 정의되는 방식을 살펴보겠습니다. 이것은 CSS의 이전 버전에서 display 를 정의한 방법에 대한 변경 사항입니다. CSS를 오랫동안 사용해 온 사람들에게는 처음에는 이상하게 보일 수 있지만 이러한 변경은 요소의 display 값을 변경할 때 어떤 일이 일어나는지 설명하는 데 정말 도움이 된다고 생각합니다.

블록 및 인라인 요소

CSS를 처음 접하는 사람들에게 가장 먼저 가르치는 것 중 하나는 블록 및 인라인 요소의 개념입니다. 페이지의 일부 요소는 display: block 이며 이로 인해 특정 기능이 있음을 설명합니다. 인라인 방향으로 늘어서 가능한 한 많은 공간을 차지합니다. 그들은 새로운 라인을 깨뜨립니다. 너비, 높이, 여백 및 패딩을 제공할 수 있으며 이러한 속성은 페이지의 다른 요소를 해당 요소에서 밀어냅니다.

또한 일부 요소가 display: inline 이라는 것도 알고 있습니다. 인라인 요소는 문장의 단어와 같습니다. 그들은 새 줄로 나누지 않고 대신 그 사이에 공백 문자를 예약합니다. 여백과 패딩을 추가하면 이것이 표시되지만 다른 요소를 밀어내지는 않습니다.

블록 및 인라인 요소의 동작은 CSS의 기본이며 적절하게 마크업된 HTML 문서는 기본적으로 읽을 수 있다는 사실입니다. 이 레이아웃을 "블록 및 인라인 레이아웃" 또는 "일반 흐름"이라고 하는 이유는 다른 작업을 수행하지 않는 경우 요소가 스스로 배치되는 방식이기 때문입니다.

display 의 내부 및 외부 값

우리는 블록 및 인라인 요소를 이해하지만 항목을 display: grid ? 이것은 완전히 다른 것입니까? display: grid 를 지정한 구성 요소를 보면 레이아웃의 상위 요소 측면에서 block level 요소처럼 작동합니다. 요소가 늘어나서 인라인 차원에서 사용 가능한 만큼 많은 공간을 차지하며 새 줄에서 시작됩니다. 레이아웃의 나머지 부분과 함께 작동하는 방식의 관점에서 block 요소처럼 작동합니다. 우리는 display: block 이라고 말하지 않았습니다.

우리가 가지고 있음이 밝혀졌습니다. 디스플레이 사양의 레벨 3에서 display 값은 두 개의 키워드로 정의됩니다. 이 키워드는 inline 또는 block 이 될 display의 외부 값을 정의하므로 요소가 다른 요소와 함께 레이아웃에서 작동하는 방식을 정의합니다. 또한 요소의 내부 값 또는 해당 요소의 직계 자식이 동작하는 방식을 정의합니다.

이것은 display: grid 라고 말할 때 실제로 말하는 것은 display: block grid 임을 의미합니다. 블록 수준 그리드 컨테이너를 요청하고 있습니다. 모든 블록 속성을 가질 요소 — 높이와 너비, 여백 및 패딩을 지정할 수 있으며 컨테이너를 채우도록 확장됩니다. 그러나 해당 컨테이너의 자식에는 grid 의 내부 값이 지정되어 그리드 항목이 됩니다. 이러한 그리드 항목이 작동하는 방식은 CSS 그리드 사양에 정의되어 있습니다. display 사양은 이것이 우리가 사용하려는 레이아웃 방법임을 브라우저에 알릴 수 있는 방법을 제공합니다.

display 에 대한 이러한 사고 방식은 매우 유용하다고 생각합니다. 다양한 레이아웃 방법으로 수행하는 작업을 직접 설명합니다. display: inline flex 를 지정한다면 어떻게 될까요? 인라인 요소로 작동하는 상자와 플렉스 항목인 자식이 있기를 바랍니다.

이 새로운 방식으로 display 에 대해 생각함으로써 깔끔하게 설명된 몇 가지 다른 사항이 있으며, 이 기사의 나머지 부분에서 이들 중 일부를 살펴보겠습니다.

우리는 항상 정상적인 흐름으로 돌아가고 있습니다

이러한 내부 및 외부 표시 속성에 대해 생각할 때 표시 값을 전혀 어지럽히지 않으면 어떤 일이 발생하는지 고려하는 것이 도움이 될 수 있습니다. HTML을 작성하고 브라우저에서 보면 블록 및 인라인 레이아웃 또는 일반 흐름이 표시됩니다. 요소는 block 또는 inline 요소로 표시됩니다.

아래 예제에는 div display: flex (직계 자식 두 개)가 이제 flex 항목이 되어 미디어 개체로 변환한 일부 마크업이 포함되어 있으므로 이미지가 콘텐츠와 함께 행에 표시됩니다. 그런데 내용을 보면 다시 정상적인 흐름으로 표시되는 제목과 단락이 있습니다. 미디어 개체의 직계 자식은 플렉스 항목이 되었습니다. flex 항목의 display 값을 변경하지 않는 한 자식은 정상적인 흐름으로 돌아갑니다. 테두리가 부모의 가장자리까지 확장된다는 사실에서 알 수 있듯이 플렉스 컨테이너 자체는 블록 상자입니다.

이 프로세스로 작업하면 페이지의 요소가 이 읽기 쉬운 일반 흐름 레이아웃으로 배치된다는 사실에 맞서 싸우고 모든 것을 배치하려고 하는 것보다 CSS가 훨씬 쉽습니다. 또한 화면 판독기나 문서를 탭하는 사람이 수행하는 것과 정확히 같은 문서 순서로 작업할 때 접근성 문제에 빠질 가능성이 적습니다.

flow-root 및 inline-block 설명

inline-block 의 가치는 CSS를 한동안 사용해 온 많은 사람들에게도 친숙할 것입니다. 이 값은 inline 요소에서 일부 블록 동작을 가져오는 방법입니다. 예를 들어, inline-block 요소는 너비와 높이를 가질 수 있습니다. display: inline-block 이 있는 요소는 BFC(Block F formatting C content)를 생성한다는 점에서 흥미로운 방식으로 작동합니다.

BFC는 레이아웃 측면에서 몇 가지 유용한 작업을 수행합니다. 예를 들어 부동 소수점이 포함되어 있습니다. 블록 서식 컨텍스트에 대해 더 자세히 읽으려면 이전 기사 "CSS 레이아웃 및 블록 서식 컨텍스트 이해"를 참조하십시오. 따라서 display: inline-block 이라고 말하면 BFC도 설정하는 인라인 상자를 제공합니다.

위에서 언급한 블록 형식 컨텍스트에 대한 기사를 읽으면 BFC를 명시적으로 생성하는 display의 새로운 값이 있음을 알게 될 것입니다. 이것은 flow-root 의 값입니다. 이 값은 인라인 요소가 아닌 블록에 BFC를 만듭니다.

• display: inline-block 은 인라인 상자에 BFC를 제공합니다.
• display: flow-root 는 블록 상자에 BFC를 제공합니다.

당신은 아마도 이것이 약간 혼란스럽다고 생각할 것입니다. 왜 여기에 두 개의 완전히 다른 키워드가 있고 이전에 이야기했던 2값 구문은 어떻게 되었습니까? 이것은 내가 display 에 대해 설명해야 할 다음 항목으로 깔끔하게 이어집니다. 즉, CSS에는 display 속성 측면에서 처리해야 하는 이력이 있다는 사실입니다.

디스플레이의 기존 가치

CSS2 사양은 display 속성에 대해 다음 값을 자세히 설명합니다.

• inline
• block
• inline-block
• list-item
• none
• table
• inline-table

또한 이 문서에서 다루지 않는 table-cell 과 같은 다양한 테이블 내부 속성이 정의되었습니다.

그런 다음 플렉스 및 그리드 레이아웃을 지원하기 위해 다음과 같은 표시 값을 추가했습니다.

• grid
• inline-grid
• flex
• inline-flex

참고 : 이 사양은 Ruby 사양에서 읽을 수 있는 Ruby Text를 지원하기 위해 ruby ​​및 inline-ruby 도 정의합니다.

이러한 방식으로 CSS 레이아웃을 설명하기 위해 사양이 업데이트되기 전에 정의된 display 속성에 대한 모든 단일 값입니다. CSS에서 매우 중요한 것은 우리가 웹을 깨는 일을 하지 않는다는 사실입니다. 우리는 단순히 물건을 바꿀 수 없습니다 . 우리는 갑자기 모든 사람이 이 새로운 2값 구문을 사용해야 한다고 결정할 수 없으므로 단일 값 구문을 사용하여 구축된 모든 웹사이트는 개발자가 돌아가서 수정하지 않는 한 중단될 것입니다!

이 문제에 대해 생각하는 동안 미래를 내다보기 위해 수정 구슬 없이 디자인된 것과 같이 많은 경우 실수가 적은 CSS 디자인의 이 실수 목록을 즐길 수 있습니다! 그러나 사실은 웹을 끊을 수 없기 때문에 현재 브라우저가 표시를 위해 단일 값 세트를 지원하고 사양이 표시를 위해 두 값으로 이동하는 상황이 있습니다.

이 문제를 해결하는 방법은 이러한 단일 값을 모두 포함하는 표시할 레거시 및 짧은 값을 지정하는 것입니다. 이는 단일 값과 새로운 두 키워드 값 사이에 매핑을 정의할 수 있음을 의미합니다. 다음 값 테이블을 제공합니다.

이것이 어떻게 작동하는지 설명하기 위해 그리드 컨테이너에 대해 생각할 수 있습니다. 2값 세계에서 다음을 사용하여 블록 수준 그리드 컨테이너를 만듭니다.

 .container { display: block grid; }

그러나 legacy 키워드는 다음이 동일한 작업을 수행함을 의미합니다.

 .container { display: grid; }

대신 인라인 그리드 컨테이너를 원하면 2값 세계에서 다음을 사용합니다.

 .container { display: inline grid; }

레거시 값을 사용하는 경우:

 .container { display: inline-grid; }

이제 이 대화가 시작된 곳으로 돌아가서 display: inline-block 을 볼 수 있습니다. 표를 보면 이것이 2값 세계에서 display: inline flow-root 로 정의되어 있음을 알 수 있습니다. 이제 display: flow-root 와 일치합니다. 두 값 세계에서는 display: block flow-root 됩니다. 이러한 것들이 어떻게 정의되는지에 대한 약간의 정리 및 설명. 원한다면 CSS 리팩토링.

2값 구문에 대한 브라우저 지원

아직까지는 브라우저가 display 속성에 대해 2값 구문을 지원하지 않습니다. Firefox의 구현 버그는 여기에서 찾을 수 있습니다. 구현 시 기본적으로 레거시 값을 두 값 버전으로 별칭 지정하는 작업이 포함됩니다. 따라서 코드에서 이러한 두 값 버전을 실제로 사용할 수 있게 되기까지는 꽤 오랜 시간이 걸릴 것입니다. 그러나 그것은 실제로 이 기사의 요점이 아닙니다. 대신, 2가치 모델에 비추어 디스플레이의 값을 보는 것이 현재 진행 중인 많은 부분을 설명하는 데 도움이 된다고 생각합니다.

CSS에서 상자의 레이아웃을 정의할 때 레이아웃 의 다른 모든 상자와 관련하여 이 상자가 어떻게 동작하는지 에 따라 이 상자에 어떤 일이 발생하는지 정의합니다. 또한 해당 상자의 자식 이 어떻게 동작하는지 정의합니다. 레거시 키워드가 해당 값에 매핑되므로 값을 두 개의 개별 항목으로 명시적으로 선언하기 훨씬 전에 이러한 방식으로 생각할 수 있으며 display 값을 변경할 때 어떤 일이 발생하는지 이해하는 데 도움이 됩니다.