신기술을 무조건 알아야 하느냐? NO! 하지만 알고 안쓰는 것과 모르고 못쓰는 것과는 다르기에..
저는 올해의 State of CSS의 설문을 하면서 새로운 CSS를 많다는 것을 느꼈고.. 저는 무지에 가깝다는 것을 느껴서 여기에 나온 CSS를 정리해보려고합니다.
해보고싶다면 설문링크로 접속하셔서 한번 해보시는 것도 추천합니다.
최신 스펙은 구동이 되지않는 브라우저가 있을수 있습니다. 확인하시고 사용하시는 걸 추천드립니다.
Layout
Subgrid
grid-template-columns, grid-template-rows 두개를 사용하면 하위 그리드에도 영향을 미치는 grid layout 사양입니다. grid를 사용해야한다면 알아두면 좋을 사양입니다.
writing mode
- 라틴어 기반 & 아랍어 기반 언어
writing-mode: horizontal-tb;
writing-mode: vertical-rl;
writing-mode: vertical-lr;
writing-mode: sideways-rl;
writing-mode: sideways-lr;우리는 웹을 만들면서 다양한 언어를 적용해야 할수도 있습니다. 다양한 언어는 다양한 문단의 방향과 글자의 방향이 존재합니다.
영어,라틴어 등의 다수의 라틴어 기반 언어들은 문장(inline)의 방향은 수평(왼쪽에서 오른쪽), 문단(Block)의 방향은 위에서 아래방향입니다.
하지만 아랍기반의 언어 들의 언어들의 방향은
문단의 방향은 위에서 아래(수작)인 것은 똑같지만 문장의 방향은 정반대 입니다. 하지만 위의 두 언어는 기본 writing mode인 writing-mode:horizontal-tb가 됩니다. (따로 설정안해도 되는 default 값입니다.)
문장의 방향은 html 선언시 <html lang='en-gb' dir='ltr'> 또는 <html lang='ar' dir='rtl'> 로 방향을 정해주면 됩니다.
- 한자 문화 기반 언어(중국어, 일본어, 한국어)
한국어 일본어등의 현대에 와서는 라틴 기반의 언어의 방향과 거의 일치하지만 오래된 문서나 위의 예시처럼 문장의 방향은 수직방향(위에서 아래) 문단의 방향이 수직 방향인 경우가 있습니다.
- 몽골 기반 언어
몽골 기반의 언어는 문장의 방향은 수직방향 문단의 방향은 왼쪽에서 오른쪽입니다.(이미지 보면 저도 모르겠습니다)
이때는 writing-mode:vertical-rl(오른쪽에서 왼쪽) writing-mode:vertical-lr(왼쪽에서 오른쪽)
으로 사용하면 문단의 방향과 문장의 방향을 맞출수 있습니다.
하지만 단어의 방향이 돌아가는것은 시계반대방향으로 회전하지 않습니다. 사용할때 유의 해야합니다.
새로운 박스모델
inline사이즈와 block사이즈가 추가되었고 그에 따른 방향도 추가되었습니다.
width, height가 있는데 굳이 왜 추가 하냐고 할수 있지만 이는 위의 writing모드와 관련이 있습니다.
문장의 방향의 크기인 inline-size와 문단의 방향의 크기인 block-size로 나뉜다고 할수 있습니다.
수직으로 써야하는 몽골어의 경우는 기본적으로 inline방향과 block방향이 달라서 이에 맞춰서 작업을 한다면 사용해야하는 spec입니다.
padding, border, margin 도 이에 맞춰서 방향이 추가되었습니다.
종횡 비
우리는 기본적인 block 좌우 비율을 이렇게 설정하고 있었을 것입니다. (저는 calc도 많이 사용했습니다)
이제는 aspect-ratio를 사용한다면 더이상 저런 비율에서 벗어날수 있게 되었습니다.
Content-visibility
- 화면 밖 렌더링 시간을 무시함으로써 초기 로딩시간을 단축시킵니다.
- 이는 페이지 로딩을 단축시키는 css 최신 spec중 하나입니다. UserAgent가 layout과 painting작업을 필요로 할때까지 생략합니다.
하지만.. 문제점은
거의 대부분의 modern 브라우저 밖에 지원하지 않습니다. firefox에서도 “worth prototyping”으로 간주되고 있습니다..
@container(Container Queries)
/* 컨테이너의 종류를 설정 */
main, aside {
container: inline-size;
}
.media-object {
display: grid;
grid-template: 'img' auto 'content' auto / 100%;
}
/* 컨테이너의 사이즈에 따라 스타일을 설정 */
@container (inline-size > 45em) {
.media-object {
grid-template: 'img content' auto / auto 1fr;
}
}위처럼 한다면 container에 따라 반응형을 따로 설정이 가능합니다.
컴포넌트 별로 반응형작업이 가능해집니다.
새로운 뷰포트 단위(sv*, lv*, dv*)
- 오래된 뷰포트 단위
vw, vh, vmin, vmax위의 오래된 뷰포트 단위들은 많이 사용해보셨을 것입니다. 하지만 이 뷰포트 단위는 innerWidth, innerHeight값이고 모바일에서 주소창이 나왔을때 많은 에러들을 느껴본적도 있을것입니다.
이러한 에러를 해결하고자 새로운 단위들이 나왔습니다.
- 작은 뷰포트
svw, svh, svmin, svmax이는 주소창이 확장되었다고 가정한 뷰포트 단위입니다.
- 큰 뷰포트
lvw, lvh, lvmin, lvmax이는 주소창이 생략되었다고 가정하고 전체화면 일때의 뷰포트 단위입니다.
- 동적 뷰포트
dvw, dvh, dvmin, dvmax이는 브라우저 UI가 변경됨에 따라 자동으로 조정 됩니다. 제일 많이 사용할거 같습니다.
Shapes & Graphics
Blend mode
- mix-blend-mode 두개 이상의 레이어에서 색상을 혼합하여 시각효과를 만들어내기 위한 spec입니다.
- background-blend-mode 배경은 한개밖에 할수없었지만 이를 사용하면 여러개의 배경을 혼합할수 있습니다.
- isolation 새로운 stacking context를 설정할지를 정한다고 하는데 무슨말인지 잘 모르겠습니다. 블랜드 모드를 따로 설정하고 싶으면 사용하는듯합니다.
CSS Filter Effect
blur(), brightness(), contrast()
img{
filter: contrast(45%) brightness(10%);
}필터 효과를 주는 spec입니다.
위의 코드만 보고도 무슨 내용일지 아실거라 생각하여 패스하겠습니다.
backdrop-filter
배경에만 필터를 주는 spec입니다.
Filter Effect와 같은 방법으로 사용합니다.
위와같은 효과를 줄수 있습니다.
원뿔형 그라데이션(conic-gradient)
selector {
background: #55ffff;
background: conic-gradient(#55ff55, #55ffff, #5555ff);
}
위의 스펙으로는 원뿔형 그라데이션을 줄수 있습니다. 이해하기는 어렵지 않으니 패스하도록 하겠습니다.
Referrence
mdn
writing-mode: https://24ways.org/2016/css-writing-modes/
종횡비 :https://inpa.tistory.com/entry/CSS-📚-이미지-비율-고정하는-방법-aspect-ratio
와! 저도 이번 설문을 보고나서 모르는 키워드 모아뒀다가 나중에 찾아봐야지 했는데 이렇게 정리해주셔서 감사합니다!
새로운 뷰포트 단위 새로생기는거 좋은거 같아요. 맨날 폰에서 키보드 때문에 힘들었는데 말이죠 ㅎ 고맙습니다