CSS 논리적 속성과 값 이해하기

과거 CSS는 물리적인 축과 방향에 종속적이었다. 다시 말해 왼쪽, 오른쪽, 위, 아래 위치를 사용해 요소의 물리적 위치를 설정했다. 요소를 왼쪽(left) 또는 오른쪽(right)으로 띄우거나(float) 위(top), 아래(bottom), 왼쪽(left), 오른쪽(right) 오프셋^offset 위치를 사용했고, margin-top과 padding-left를 사용해 마진^margin, 패딩^padding, 경계선^border 등을 설정하기도 했다. 이러한 물리적 속성과 값은 위에서 아래로, 왼쪽에서 오른쪽 수평 방향으로 쓰기 모드^{writing mode}인 경우와 방향이 설정된 환경에서만 작업할 때는 잘 작동하는 듯 보였다.(’쓰기 모드^{writing mode}’란 간단히 말해 텍스트의 표현 방향을 의미한다. 한국어는 왼쪽에서 오른쪽으로 수평 방향으로 채워나가는 언어이지만, 설정이나 언어에 따라 오른쪽에서 왼쪽으로 또는 위에서 아래로 채워나가는 것도 가능하다. — 역자)

하지만 수직 방향 쓰기 모드에서는 사정이 조금 다르다. 전체 레이아웃이나 일부 요소에 문제가 생길 수 있다. 이 글에서는 CSS에서 쓰기 모드 지원이 어떻게 달라졌는지 설명한다. 그러면서 플렉스박스^Flexbox나 그리드^Grid에서 독자들이 헷갈릴 만한 부분도 정리하겠다.

처음 CSS Grid를 사용해 작업하고 사람들에게 이 새로운 명세를 설명하면서 grid-area 속성을 사용하면 네 종류의 속성을 한 줄로 축약할 수 있다는 걸 깨달았다. 아래의 세 가지 예제는 모두 같은 위치를 표현한다. 첫 번째 예제는 이름이 긴 속성을 사용했고, 두 번째 예제는 각 축의 시작과 끝을 설정했으며, 세 번째에서는 grid-area를 사용했다.

grid-area에서 줄의 순서는 아래와 같다.

• grid-row-start
• grid-column-start
• grid-row-end
• grid-column-end

이 값을 보고 처음 떠오른 질문은(아마 내 발표를 들은 청중도 같은 생각을 했을 것이다) “왜 이 값은 다른 CSS 속성처럼 우리에게 익숙한 위, 오른쪽, 아래, 왼쪽 순서를 따르지 않는 걸까?”였다. (‘다른 CSS 속성’의 예로 margin이나 padding 속성을 떠올려보면 이해하기 쉽다. — 역주)

사실 이 값은 위, 왼쪽, 아래, 오른쪽의 역순으로 표현되었다. CSS 작업 그룹이 문제를 일부러 일으키는 걸까?

그리드 속성의 값은 우리가 지금까지 해왔던 가정을 따르지 않는다. 웹에 있는 콘텐츠는 화면상 물리적 평면에 대응하고, 문장 첫 번째 단어는 항상 상자의 왼쪽 상단에 위치한다는 바로 그 가정 말이다. 만약 기존에 사용하던 축약형을 전혀 몰랐다면 grid-area에서 줄의 순서를 표현하는 방식이 꽤 합리적으로 느껴질 것이다. 시작하는 기준선 2개를 먼저 작성한 후 끝나는 기준선 2개를 나중에 표현하기 때문이다.

다시 말해 문서의 쓰기 모드를 수직 방향으로 바꾸더라도 블록은 여전히 문서의 쓰기 모드에 상대적인 위치로 표현된다. 화면의 물리적 속성에 묶이지 않는다. 이 문제는 아래 예제에서 레이아웃 또는 요소의 쓰기 모드^writing-mode 속성을 바꾸면 확인할 수 있다.

See the Pen Grid and Writing Modes by Rachel Andrew (@rachelandrew) on CodePen.

CSS 그리드와 플렉스박스에서는 우리가 절대 좌표를 설정할 때 사용하는 위, 오른쪽, 아래, 왼쪽과 같은 물리적 차원^dimension에 그리드를 대응시키지 않는다.
위에서 언급한 쓰기 모드의 동작을 보면 왜 CSS 그리드와 플렉스박스가 시작start과 끝end 기준선을 참조하는지 알 수 있다. 위 예제에서 첫 번째 박스는 grid-area와 줄 기반 위치^{line-based positioning}를 사용해서 배치되었다.

이를 긴 형태로 표현하면 다음과 같다.

블록과 인라인 차원

블록과 인라인 차원^dimension이라는 개념은 새로운 레이아웃 방식을 이해하는 데 중요하다. 두 용어는 최신 CSS를 다룰 때 계속 마주하게 될 것이다. 블록과 인라인 차원은 그리드 레이아웃을 다룰 때 늘 사용하고 있으므로 그리드 레이아웃이라는 문맥을 중심으로 이 두 축을 이해하는 편이 좋다. 그래서 이 글에서는 그리드를 예로 들어 두 개념을 설명하고자 한다.

블록 차원은 페이지에서 블록이 어떤 순서로 배치될 것인지 결정한다. 평범한 글이 있는 문단 여러 개가 있다고 생각해보자. 한 문단은 다른 문단 아래에 배치되는데, 이때 각 문단은 블록 차원을 따라 배치된다. 이 때문에 레이아웃에서는 이를 블록 축^{Block Axis}이라 부른다.

CSS 그리드 레이아웃에서는 블록 축을 행 축^{row axis}이라고도 부른다. 그래서 블록 축에는 grid-row-start와 grid-row-end라는 속성이 있다.

인라인 축은 블록 축에 직교하며 이는 문장이 배치되는 방향과 같다. 예를 들어 영문 콘텐츠라면 왼쪽에서 오른쪽으로 인라인 축이 동작한다. 그리드 레이아웃에서는 인라인 축을 열 축^{column axis}이라고 부르며 grid-column-start와 grid-column-end라는 속성을 통해 설정한다.

예제에서 쓰기 모드를 vertical-lr로 바꾸면 이제 글은 수직 방향으로 표현된다. 다시 말해 블록 축은 왼쪽에서 오른쪽으로 동작하고, 인라인 축은 위에서 아래로 동작한다.

따라서 블록 차원은 일반적인 문서의 흐름에 따라 텍스트 문단 블록이 배치되는 방향을 의미하고, 인라인 차원은 문장이 흘러가는 방향을 의미한다.

논리적 속성^{logical property}

블록과 인라인 차원, 시작과 끝 기준선에 익숙해지고 나면 CSS에서 사용하는 물리적 차원이 어색하게 느껴질 것이다. 하지만 기존의 물리적 속성을 논리적 속성으로 정의한 명세도 있다. 아직은 첫 번째 표준 초안 상태인 ‘CSS 논리적 속성과 값^{CSS Logical Properties and Values}’ 명세가 그것이다. 현재는 파이어폭스 브라우저만 이러한 속성을 제대로 지원하고 있지만, 이 속성이 동작하는 방식을 살펴봄으로써 새로운 CSS에 관해 배울 기회가 될 수 있다.

각 절에는 이해를 돕기 위해 CodePen에 올려둔 예제를 포함했다. 파이어폭스를 사용해서 이러한 속성이 어떻게 동작하는지 살펴보기 바란다.

논리적 차원

논리적 속성은 블록과 인라인 차원에 시작^start과 끝^end 속성을 정의한다. 높이와 너비 속성 대신 block-size와 inline-size를 사용한다. 물론 max-block-size, min-block-size, max-inline-size, min-inline-size 등도 설정할 수 있다. 영어와 같이 수평 방향, 상하 순으로 채워지는 언어를 작업할 때라면 block-size는 화면에서 블록의 물리적인 높이(height)를 설정하고 inline-size는 물리적인 너비(width)를 설정한다. 수직으로 표현되는 언어를 작업할 때는 block-size가 너비를 설정하고 inline-size가 높이를 설정한다.

실제 동작하는 데모는 아래에서 볼 수 있다. 나는 블록의 block-size를 150픽셀로 설정하고 inline-size는 250픽셀로 설정했다. 쓰기 모드^writing-mode 속성을 변경해서 레이아웃이 어떻게 달라지는지 살펴보자.

See the Pen Block and Inline Size Demo by Rachel Andrew (@rachelandrew) on CodePen.

논리적 경계선

같은 방식으로 다음과 같은 속성을 사용해 경계선^{border도 설정할 수 있다. 경계선을 설정하는 물리적인 속성은 다음과 같다.}

• border-top
• border-top-size
• border-top-style
• border-top-color
• border-right
• border-right-size
• border-right-style
• border-right-color
• border-bottom
• border-bottom-size
• border-bottom-style
• border-bottom-color
• border-left
• border-left-size
• border-left-style
• border-left-color

이에 대응하는 논리적인 속성은 다음과 같다. 조금 더 길어 보이는 면은 있다.

• border-block-start
• border-block-start-size
• border-block-start-style
• border-block-start-color
• border-inline-start
• border-inline-start-size
• border-inline-start-style
• border-inline-start-color
• border-block-end
• border-block-end-size
• border-block-end-style
• border-block-end-color
• border-inline-end
• border-inline-end-size
• border-inline-end-style
• border-inline-end-color

다음 예제는 2개의 블록을 표현한다. 첫 번째 블록은 논리적 속성을 사용해서 border-block-start-color를 녹색으로 표현하고 border-inline-end-style을 점선으로 그렸다. 두 번째 블록은 물리적 속성을 사용해서 border-top-color와 border-right를 사용해 동일한 효과를 주었다. 이제 쓰기 모드를 변경하여 두 블록이 어떻게 표현되는지 확인해보자.

See the Pen Logical Borders by Rachel Andrew (@rachelandrew) on CodePen.

마진과 패딩

마진(margin)과 패딩(padding)은 경계선 속성과 비슷한 물리적 속성 이름을 가지고 있다.

• margin-top
• margin-left
• margin-bottom
• margin-right
• padding-top
• padding-right
• padding-bottom
• padding-left

이에 대응하는 논리적인 속성은 다음과 같다.

• margin-block-start
• margin-inline-start
• margin-inline-start
• margin-inline-end
• padding-block-start
• padding-inline-start
• padding-inline-start
• padding-inline-end

다음 예제의 첫 번째 블록에는 padding-block-start를 설정하고, 두 번째 블록에는 padding-top을 설정했다. 쓰기 모드를 변경하여 블록과 인라인 축이 전환되면 두 블록이 각각 어떻게 표현되는지 알아보자.

See the Pen Logical Properties – Padding by Rachel Andrew (@rachelandrew) on CodePen.

위치 오프셋

물리적 속성은 position 속성과 함께 요소의 위치를 설정할 때도 사용된다. position: absolute처럼 position 속성에 기본값인 static 이외의 값을 설정하면 여러 위치 속성을 사용하여 요소의 위치를 바꿀 수 있다. 이때 위치는 뷰포트(viewport)를 기준으로 할 수도 있고 새로운 위치 컨텍스트를 만든 부모 요소를 기준으로 설정할 수도 있다.

물리적인 위치 속성은 다음과 같다.

• top
• right
• bottom
• left

이에 대응하는 논리적인 속성은 다음과 같다.

• offset-block-start
• offset-inline-start
• offset-block-end
• offset-inline-end

아래 예제에서 이 값을 확인해보자. 외곽선이 그려진 상자에는 position: relative를 설정했고 작은 보라색 정사각형에는 position: absolute를 설정했다. 물리적 속성 예제에서 정사각형의 위치는 top: 50px과 right: 20px로 설정했고, 논리적 속성 예제에서는 offset-block-start: 50px과 offset-inline-end: 20px로 설정했다.

See the Pen Logical Offsets by Rachel Andrew (@rachelandrew) on CodePen.

논리적 값^{logical value}

물리적인 차원은 요소를 띄우거나(float) 이를 제거할 때(clear)도 사용된다. float이나 clear 속성에는 left나 right 값 대신 다음과 같이 논리적인 값을 사용할 수도 있다.

• inline-start
• inline-end

See the Pen Floating with Logical Values by Rachel Andrew (@rachelandrew) on CodePen.

 
데모에서는 보라색 블록에 float 속성을 적용하면서 논리적인 값 inline-start를 사용했다. 마진에도 논리적인 속성을 사용했는데, 덕분에 블록과 블록을 감싸고 있는 콘텐츠 사이에 항상 공백이 나타난다. 드롭다운 메뉴에서 vertical-rl을 선택하면 물리적인 속성 예제에서는 -end와 같은 논리적인 속성이 적용되지 않아서 마진이 블록의 오른쪽에 나타나는 것을 볼 수 있다.

text-align에도 start와 end 값을 사용할 수 있다. 쓰기 모드가 수평 방향이든 수직 방향이든 상관없이 start 값을 설정하면 텍스트가 인라인 축의 시작 부분으로 정렬되고, end 값을 설정하면 인라인 축의 끌 방향으로 설정된다.

오늘부터 사용하는 논리적인 속성과 값

앞서 말했듯이 논리적인 속성과 값의 브라우저 지원은 아직 부족하다. 하지만 오늘부터 이 값을 사용해보고 싶다면 논리적인 속성과 값을 사용해 CSS를 작성하고 PostCSS 플러그인을 통해 논리적인 속성을 그에 대응하는 물리적 값으로 바꿔주는 방법도 있다. 조너선 닐^{Jonathan Neal}이 제작한 PostCSS 플러그인은 이 글에서 설명한 모든 논리적인 속성과 값을 지원한다.

크롬 버그 페이지를 지켜보고 에지 브라우저 개발자 피드백 사이트에서 관련 이슈에 투표함으로써 브라우저 제조사들이 이러한 속성을 더 빨리 지원하도록 재촉할 수도 있다.

이 속성을 당장 사용하지는 않더라도 작동 방식을 이해해두면 새로운 레이아웃 제작 방식을 사용할 때 매우 중요한 지식이 될 것이다. 시작 또는 끝 기준선을 사용해 그리드나 플렉스 레이아웃을 표현하고 블록과 인라인 차원을 명심한다면 레이아웃의 작동 방식을 이해하기가 훨씬 수월해질 것이다.