CSS3 Module part1 - by. UXKM

Publishing
CSS
CSS 중급
CSS3 Module part1

요약 설명
CSS3 Module은 W3C의 CSS Working Group이 표준화 작업을 효율적으로 진행하기 위해 CSS를 기능별로 나눈 작은 컴포넌트 단위입니다.
각 모듈은 특정 기능이나 주제에 대한 CSS 속성들을 모아놓은 것으로, 예를 들어 배경과 테두리, 레이아웃, 애니메이션 등을 독립적으로 다룹니다.

CSS3는 공식적인 단일 표준이 아니라 여러 모듈로 구성되며, 각 모듈은 독립적으로 표준화 과정을 거칩니다.
이를 통해 필요한 기능만 선택적으로 사용할 수 있으며, 새로운 요구사항이 발생할 때마다 새로운 모듈이 추가됩니다.

요약 설명
CSS3 Module part-1에서는 CSS3 모듈의 속성 중

CSS positioned layout module Level 3

CSS background and border module Level 3

CSS overflow module Level 3에 대한 내용을 다루고 있습니다.

CSS3 Module 요약

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

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

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

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

CSS positioned layout module Level 3

position: sticky 속성

사파리 브라우저를 위한 -webkit- 접두어가 필요합니다.

								position: -webkit-sticky;
								position: sticky;

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

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

sticky 박스의 특징

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

이전에는 JavaScript만을 사용해 구현해야 했던 스크롤 인터렉션을 position: sticky를 통해 CSS만으로 구현할 수 있게 되었습니다.
완전히 JavaScript를 배제하기는 어렵지만, CSS의 성능과 다양한 속성들이 추가됨에 따라 CSS로 대체 가능한 부분을 연구하여 활용하는 것이 좋습니다.

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

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

									@supports (position: sticky) or (position: -webkit-sticky) {
										.sticky {
											position: -webkit-sticky; /* 사파리 브라우저 지원 */
											position: sticky;
											top: 4px;
											background: red;
										}
									}

position: sticky 예제 (List)

position: sticky 예제 (Parallax scrolling)

position: sticky 예제 (Sticky slider nav)

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의 단축 속성입니다.
다른 단축 속성과 마찬가지로, 생략한 속성은 초기값으로 설정됩니다.

								div {
									/* 이미지 | 슬라이스 */
									border-image: linear-gradient(red, blue) 27;

									/* 이미지 | 슬라이스 | 반복 */
									border-image: url(''/images/border.png'') 27 space;

									/* 이미지 | 슬라이스 | 너비 */
									border-image: linear-gradient(red, blue) 27 / 35px;

									/* 이미지 | 슬라이스 | 너비 | 거리 | 반복 */
									border-image: url('/images/border.png') 27 23 / 50px 30px / 1rem round space;
								}

border-image 예제

border-image-outset 속성

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

								div {
									/* length 값 */
									border-image-outset: 1rem;

									/* number 값 */
									border-image-outset: 1.5;

									/* 세로방향 | 가로방향 */
									border-image-outset: 1 1.2;

									/* 위 | 가로방향 | 아래 */
									border-image-outset: 30px 2 45px;

									/* 위 | 오른쪽 | 아래 | 왼쪽 */
									border-image-outset: 7px 12px 14px 5px;

									/* 전역 값 */
									border-image-outset: inherit;
									border-image-outset: initial;
									border-image-outset: unset;
								}

border-image-repeat 속성

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

stretch
원본 이미지의 모서리 영역을 늘리거나 줄여 간격을 채웁니다.
repeat
원본 이미지의 모서리 영역을 타일처럼 반복해 간격을 채웁니다. 크기가 맞지 않으면 마지막 이미지는 잘릴 수 있습니다.
round
원본 이미지의 모서리 영역을 타일처럼 반복해 간격을 채웁니다. 크기가 맞지 않으면 늘어나거나 줄어들 수 있습니다.
space
원본 이미지의 모서리 영역을 타일처럼 반복해 간격을 채웁니다. 크기가 맞지 않으면 각 타일에 균등하게 공백을 배치합니다.

								div {
									/* 키워드 값 */
									border-image-repeat: stretch;
									border-image-repeat: repeat;
									border-image-repeat: round;
									border-image-repeat: space;

									/* 세로방향 | 가로방향 */
									border-image-repeat: round stretch;

									/* 전역 값 */
									border-image-repeat: inherit;
									border-image-repeat: initial;
									border-image-repeat: unset;
								}

border-image-slice 속성

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

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

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

								div {
									/* 모든 방향 */
									border-image-slice: 30%;

									/* 세로방향 | 가로방향 */
									border-image-slice: 10% 30%;

									/* 위 | 가로방향 | 아래 */
									border-image-slice: 30 30% 45;

									/* 위 | 오른쪽 | 아래 | 왼쪽 */
									border-image-slice: 7 12 14 5;

									/* `fill` 키워드 */
									border-image-slice: 10% fill 7 12;

									/* 전역 값 */
									border-image-slice: inherit;
									border-image-slice: initial;
									border-image-slice: unset;
								}

border-image-source 속성

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

								div {
									/* 키워드 값 */
									border-image-source: none;

									/* image 값 */
									border-image-source: url('image.jpg');
									border-image-source: linear-gradient(to top, red, yellow);

									/* 전역 값 */
									border-image-source: inherit;
									border-image-source: initial;
									border-image-source: unset;
								}

border-image-width 속성

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

								div {
									/* 키워드 값 */
									border-image-width: auto;

									/* 값 */
									border-image-width: 1rem;

									/* 값 */
									border-image-width: 25%;

									/* 값 */
									border-image-width: 3;

									/* 세로방향 | 가로방향 */
									border-image-width: 2em 3em;

									/* 위 | 가로방향 | 아래 */
									border-image-width: 5% 15% 10%;

									/* 위 | 오른쪽 | 아래 | 왼쪽 */
									border-image-width: 5% 2em 10% auto;

									/* 전역 값 */
									border-image-width: inherit;
									border-image-width: initial;
									border-image-width: unset;
								}

CSS overflow module Level 3

-webkit-line-clamp 속성

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

								p {
									/* Keyword value */
									-webkit-line-clamp: none;

									/* <integer> values */
									-webkit-line-clamp: 3;
									-webkit-line-clamp: 10;

									/* Global values */
									-webkit-line-clamp: inherit;
									-webkit-line-clamp: initial;
									-webkit-line-clamp: unset;
								}