Cascading Style Sheets

미래지향적 웹 스타일링 최신기법에 대하여

미래지향적

CSS3 최신기법

• 2021년 이후 최신 CSS기법
• CSS 최신기법을 이용하기 위해서는 크롬 카나리아(Canary) 빌드버전이 필요함.

container-query

• @container로 부모 박스 폭에 반응하는 CSS 작성가능

<div class="card-container">
	<div class="card">
		<img src='/'>
		<h4 calss="title">제목</h4>
	</div>
</div>

.card-container {
	contain : style layout inline-size;
}

@container (max-width: 350px) {
	.title {
		color : blue;
		font-size : 15px;
	}
}

👉 @media query 와 같지만, @container (**부모박스)가 350px 이하면 .title 실행

@scope

• 특정 component 안에만 적용하고 싶을 때 사용.

**@scope (.card-container) to (.content)** {
	.title {
		font-size: 16px;
	}
}

@supports

• 해당 브라우저가 CSS를 지원하는지 판단해줌.
• 브라우저가 지원한다면 display: grid;  아니면, display: flex;

@supports (display: grid) {
  div {
    display: grid;
  }
}

@supports not (display: grid) {
  div {
    display: flex;
  }
}

is

• JS의 .is() 함수와 같은 개념.
• 요소들이 참일 경우만 체크하여 선택 및 실행

header button,
nav button,
form button {
	background-color: red;
}

👇

:is(header, nav, form) button {
	background-color: red;
}

Flex Box Gap

• flex container 사이 margin 속성을 대체하여 사용가능.
• gap : row-gap, colum-gap 사용가능.

div {
	dispaly: flex;
  gap: 10px 5px;
}

Aspect ratio

• 영상 또는 이미지의 정해진 비율을 유지해줌.

img {
	aspect-ratio: 16/9;
}

Position: sticky

• scroll 을 따라다니는 요소를 만들 수 있음.
• height가 정의 된 부모 요소 안에 자식 요소에게 Position: sticky 를 부여하면 됨.
• 어디서 ~ 어디까지 지정가능.

<section>
	<aside>Header</aside>
</section>

section {
	height:70%;
}

aside {
	position: sticky;
}

Nesting

• SASS, 선언을 중첩(nesting) 할때 쓰이며 CSS에서도 가능하게끔 된다.
• 프로퍼티에도 사용가능.

.card-container {
	.title {
		font-size: 16px;
	}
}

.card-container {
	font : {
		family : fantasy;
		size: 30em;
		weight : bold;
	}
}

Scroll Snap

• 현재 JS에서 사용하던, 스크롤 형태의 인터렉션을 CSS만으로도 가능하게끔 지정해줌.
• 스크롤을 지정할 수 있음.
• scroll-snap-type 을 부모, scroll-snap-align 을 자식요소에 부여하면 됨.

#container {
  scroll-snap-type: y mandatory;
}

.item {
  scroll-snap-align: center;
}

Scroll-based Animation

• 현재 CSS3 애니메이션은 Time-based인데, scroll-based 기능이 추가된다.

@keyframes shake {
	0% { ... }
	50% { ... }
	100% { ... }
}

SASS : @import

• @import directive를 사용하여 분리된 stylesheet 파일을 import 가능.
• 확장자 생략 가능.
• 여러개의 파일 한번에 import 가능.
• 변수에 문자열을 생성하여 import 가능.

@import "foo.scss";

@import "foo";

@import "rounded-corners", "text-shadow";

$family: "Open+Sans";
@import url("http://fonts.googleapis.com/css?family=#{$family}");

SASS : @extend

• 기존 스타일을 상속할때 쓰임.

.error {
  border: 1px #f00;
  background-color: blue;
}

.seriousError {
  @extend .error;

  border-width: 3px;
  border-color: darkblue;
}

SASS : if

• built-in if 함수는 주어진 조건을 판단하여 결과를 리턴함.
• Javascript if 함수의 축약문 삼항연산자와 유사하게 사용.

$type: ocean;

p {
  color: if($type == ocean, blue, black);
}

SASS : @for

• Javascript for문 함수 (반복문) 사용가능.

@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

...

.item-1 {
  width: 2em;
}
.item-2 {
  width: 4em;
}
.item-3 {
  width: 6em;
}

SASS : Mixin

• SASS의 가장 중요한 기능으로, 중복 기술 방지를 위한 기법.
• @extend와 유사하나 함수와 동일하게 인수를 전달받을 수 있다.
• @mixin 선언하고 @include로 불러들인다.

@mixin circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.box {
  @include circle;
  background: #f00;
}

---

@mixin circle($size) {
  width: $size;
  height: $size * 2;
  border-radius: 50%;
}

.box {
  @include circle(100px);
  background: #f00;
}