DOCUMENTS

Writing
  • account_tree
  • bug_report

논리적 속성과 값

CSS는 일반적으로 사용하는 물리적 속성과 예외적으로 사용할 수 있는 논리적 속성이 존재한다. 논리적 속성은 CSS3에서 추가된 새로운 속성들과 밀접한 관련을 가지고 있다.

논리적 속성을 이야기하기 전에 물리적 속성을 이야기해 보자.

웹에서의 콘텐츠의 흐름은 좌에서 우로, 위에서 아래로의 방향을 갖는다. 이러한 기본 흐름을 토대로 콘텐츠를 구성하는 각 요소들에게 간격(margin)과 여백(padding)을 주거나 왼쪽(left), 상단(top), 오른쪽(right), 아래쪽(bottom) 위치를 설정한다.

하지만 콘텐츠의 흐름을 바꾼다면 이야기는 달라진다. 웹 콘텐츠에 사용되는 언어에 따라서 텍스트 흐름이 우에서 좌로, 위에서 아래로 흐를 수도 있다. 

다음 아래의 테스트 도구는 이러한 논리적 처리를 잘 보여주고 있다. grid 속성은 텍스트 흐름에 따라 레이아웃 배치를 변경해 준다.

블록 차원(block dimension), 인라인 차원(inline dimension)

콘텐츠가 화면에 배치되는 모습을 다음 아래와 같이 block(row), inline(column) 축으로 설명할 수 있다.

하지만 글쓰기 방향이 바뀐다면 위와 같은 축은 적절치 않다. 즉 세로 쓰기 방식으로 바뀐다면 이 두개의 축은 아래와 같이 서로 바뀌게 된다.

CSS3의 Grid Layout System은 논리적인 콘텐츠 흐름을 레이아웃 처리에 사용될 수 있도록 설계되었다.

논리적 흐름에 따른 속성의 필요성

논리적 관점에서 본다면 widthheight 속성은 맞지 않다. 그래서 block-sizeinline-size 속성을 사용한다. 또한 max-block-size, min-block-size, max-inline-size, min-inline-size 속성을 사용한다.

즉, 콘텐츠의 흐름이 좌에서 우로 채워지는 경우라면 block-sizeheight를 의미하며 inline-sizewidth를 의미한다. 반대로 콘텐츠의 흐름이 수직이라면 block-sizewidth를 의미하며 inline-sizeheight를 의미한다.

또한 물리적인 흐름에 따라 방향을 가지고 있는 속성들은 아래 일부 속성처럼 논리적 흐름에 맞는 속성으로 대체될 수 있다.

물리적 속성논리적 속성
border-topborder-block-start
border-top-sizeborder-block-start-size
border-top-styleborder-block-start-style
border-top-colorborder-block-start-color
border-bottomborder-block-end
border-bottom-sizeborder-block-end-size
border-bottom-styleborder-block-end-style
border-bottom-colorborder-block-end-color
border-leftborder-inline-start
border-left-sizeborder-inline-start-size
border-left-styleborder-inline-start-style
border-left-colorborder-inline-start-color
border-rightborder-inline-end
border-right-sizeborder-inline-end-size
border-right-styleborder-inline-end-style
border-right-colorborder-inline-end-color

다음 아래의 테스트 도구를 통해 분석해 보면 논리적 처리와 물리적 처리의 차이를 확인할 수 있다.