CSS3 Module part-1 - by. UXKM

요약 설명

CSS3 모듈 part1 에서는 CSS3 모듈의 속성 중
- CSS positioned layout module Level 3
- CSS background and border module Level 3
- CSS overflow module Level 3
 에 대한 내용을 다루고 있습니다.

CSS3는 새롭게 정의된 기능과 함께 이전 버전의 CSS 기능까지도 함께 포함하고 있는 모듈(module)이라는 것으로 구성됩니다.
CSS 초급에서 정의된 속성들 외에 CSS 모듈 레벨 3에 정의된 속성들에 대해 간략하게 설명합니다.
브라우저별로 지원 안 되는 부분이 많습니다.

CSS3 Module 요약

CSS3에서 새롭게 추가되거나 변경된 대표적인 기능

  1. 선택자(Selectors) Level 3
  2. 미디어 쿼리(Media Queries) Level 3
  3. 색(Color) Level 3
  4. 네임스페이스(Namespaces)

CSS3를 구성하고 있는 주요 모듈

  1. 선택자(Selectors)
  2. 박스 모델(Box Model)
  3. 배경(Backgrounds)
  4. 이미지(Image Values and Replaced Content)
  5. 텍스트 효과(Text Effects)
  6. 2D 변형(Transformations)
  7. 3D 변형(Transformations)
  8. 애니메이션(Animations)
  9. 다중 칼럼(Multiple Column) 레이아웃
  10. 사용자 인터페이스(User Interface)

3.6.1. CSS positioned layout module Level 3

position: sticky 속성

safari 브라우저를 위한 webkit 접두어가 필요합니다.

Sticky positioning 속성을 적용한 박스는 평소에 문서 안에서 position: static 상태와 같이 일반적인 흐름에 따르지만
스크롤 위치가 임계점에 이르면 position: fixed와 같이 박스를 화면에 고정할 수 있는 속성입니다.

아직 Working Draft 단계이며, IE 11 브라우저와 안드로이드 4.x 이하 버전에서 지원하지 않습니다.
최신 명세를 지원하는 브라우저에서는 이 속성이 동작하지만 지원 안 한 브라우저에서는 position: static 상태만 표시하기 때문에 어색하지 않게 표시할 수 있는 속성입니다.

sticky 박스의 특징

  1. sticky 박스는 top, right, bottom, left 속성이 필수입니다.
  2. fixed 박스는 뷰포트에 고정하지만 sticky 박스는 scroll 박스에 고정합니다. 즉, scroll 박스가 offset 기준입니다.
  3. 뷰포트와 scroll 박스가 동일한 것처럼 보이는 경우도 있겠지만 뷰포트는 하나뿐이고 scroll 박스는 문서 안에서 더 많이 생성할 수 있습니다.
  4. sticky 박스를 scroll 박스에 고정하는 임계점은 스크롤 위치가 결정합니다. sticky 박스 자신과 부모의 위치와 크기도 임계점에 영향을 미칩니다.
  5. sticky 박스의 부모 박스가 scroll 박스를 벗어나면 sticky 박스는 다시 일반적인 흐름에 따릅니다.
  6. sticky 박스와 scroll 박스 사이에 overflow: hidden 속성을 적용한 박스가 끼어들면 sticky 박스는 일반적인 흐름에 따릅니다.

이전에는 Javascript만을 사용해 하나하나 구현해야 했다면, CSS만으로도 효과적인 구동효과(인터렉션)이 가능해졌으며, 날이 갈 수록 CSS 의 성능과 다양한 속성들이 추가됨에 따라 CSS 만으로 효과적인 구동 인터렉션을 줄 수 있게 되었습니다.
완전히 Javascript를 배제하긴 어렵고, 브라우저 하위 호환성도 고려해야 하지만 국내 에이전시에서 구축한 사이트와 해외 웹 사이트들의 화려한 인터렉션을 살펴보며 CSS로 대체가능한 부분을 연구하면서 조금씩 활용한다면 좋을것 같습니다.

@supports 규칙을 이용한 지원 브라우저 분기하기

position: sticky 속성을 지원하는 브라우저에만 이 스타일을 적용하려면 @supports 규칙을 이용할 수 있습니다.
단, 이방법 역시 @supports 규칙이 IE 11 브라우저에서 지원 안 하기에 적절하게 사용해야 합니다.

position: sticky 예제 (List)

position: sticky 예제 (Parallax scrolling)

position: sticky 예제 (Sticky slider nav)

3.6.2. CSS background and border module Level 3

border-image 속성

border-image는 border-image-source, border-image-slice, border-image-width, border-image-outset, border-image-repeat의 단축 속성입니다.
다른 단축 속성과 마찬가지로, 생략한 속성은 초기값으로 설정됩니다.

border-image 예제

border-image-outset 속성

border-image-outset CSS 속성은 요소의 테두리 상자와 테두리 이미지의 거리를 설정합니다.
border-image-outset으로 인해 요소 바깥에 그려지는 테두리로는 스크롤이 생기지 않으며 마우스 이벤트를 잡아낼 수도 없습니다.

border-image-repeat 속성

border-image-repeat CSS 속성은 원본 이미지의 모서리 영역을 요소의 테두리 이미지 크기에 맞춰 조절할 때 사용할 방법을 지정합니다.
[ stretch | repeat | round | space ]{1,2}

  1. stretch

    원본 이미지의 모서리 영역을 늘리거나 줄여 간격을 채웁니다.

  2. repeat

    원본 이미지의 모서리 영역을 타일처럼 반복해 간격을 채웁니다. 크기가 맞지 않으면 마지막 이미지는 잘릴 수 있습니다.

  3. round

    원본 이미지의 모서리 영역을 타일처럼 반복해 간격을 채웁니다. 크기가 맞지 않으면 늘어나거나 줄어들 수 있습니다.

  4. space

    원본 이미지의 모서리 영역을 타일처럼 반복해 간격을 채웁니다. 크기가 맞지 않으면 각 타일에 균등하게 공백을 배치합니다.

border-image-slice 속성

border-image-slice CSS 속성은 border-image-source로 설정한 이미지를 여러 개의 영역으로 나눕니다.
이렇게 나눠진 영역이 요소의 테두리 이미지를 이룹니다.

border-image-slice
[border-image-slice]
  1. 1-4번 구역은 꼭지점 영역입니다. 코너 영역은 최종 테두리 이미지에서도 코너를 이루며 한 번씩만 그려집니다.
  2. 5-8번 구역은 모서리 영역입니다. 모서리 영역은 최종 테두리 이미지의 크기에 맞도록 반복하여 그리거나 크기를 조정하는 등 변형됩니다.
  3. 9번 구역은 중앙 영역입니다. 기본값으로는 쓰이지 않지만, fill 키워드를 지정한 경우 배경 이미지처럼 사용합니다.

border-image-repeat, border-image-width, border-image-outset 속성이 최종 테두리 이미지에서 각 영역의 사용 방법을 지정합니다.

border-image-source 속성

border-image-source CSS 속성은 요소의 테두리 이미지로 사용할 원본 이미지를 지정합니다.

border-image-width 속성

border-image-width CSS 속성은 요소 테두리 이미지의 너비를 설정합니다.
속성의 값이 border-width보다 크다면 테두리 이미지는 안쪽 여백(과 콘텐츠) 영역을 침범하여 그려집니다.

3.6.3. CSS overflow module Level 3

-webkit-line-clamp 속성

CSS Module Level 3
여러 줄의 말줄임시 사용합니다. webkit 계열 브라우저에서만 작동합니다.

-webkit-line-clamp 예제