반응형

◎ matches , not 가상 클래스

▼ 내용

functional pseudo selector

가상셀렉터로 matches를 써주면 아래 소스코드처럼 변환된다.

더많은 properties는 검색

li:matches(:nth-child(even),.target){ bacground-color : green;} //이렇게 변환된다 li:nth-child(even), li.target{background-color:green;} li:not(.target){background-color:blue} //li 태그의 class 가 target가 아닌 것들에 대해서 css가 먹는다

​

◎ variable 속성 (CSS의 변수화)

▼ 내용

CSS의 :root { 변수명 : 저장할문법} 을 적어주면 된다

root가 html보다 상위 객체이다.

변수명을 정할떈 앞에 --를 붙혀서 해줘야한다

▶변수의 대소문자로 따로 구분이 가능하다 (대소문 자로 변수 저장 가능)

▶css의 변수도 캐스캐이딩의 법칙을 따른다

:ROOT { --color:YELLOW; --border : 5px solid black; } li{ background-color: var(--color); border: var(--border); } //이렇게 css의 문법을 변수저장할수있다.

​

◎ @custom-selector 속성

▼ 내용

selection of element

CSS 의 selector의 변수 라고 생각하면 편하다

사용방법은 @Custom-selector : --변수명 선택자

:--변수명{ } css 문법 적용

@custom-selector :--abcdef h1,h2,.divabc,#abc; :--abcdef{ color: purple; } // 이렇게 selector 에 대헤서 내가 정해서 변수화 시킬수 있따.

​

◎ @custom-media 속성

▼ 내용

media 쿼리를 변수화 시키는 것이다. 문법은 소스 참고

@custom-media --ipad-size (max-width: 850px); @media (--ipad-size){ body { background-color : red; } } //저렇게 사이즈별로 변수로 만들어둬서 필요할떄마다 변수를 가져다 쓴다. @custom-media --ipad-size (650px <= width < 850px); //@media (min-width: 650px) and (max-width: 849px){ //이렇게 <= < 이런 조건문도 css 에 먹혀서 자동으로 아래 주석처럼 변환시켜준다.

◎ color-mod 설치법

▼ 설치방법

color-mod 는 이제 따로 install 해줘야한다.

공식 postcss 에서 더이상 color-mod를 지원해주지 않고 있습니다.

color-mod를 사용하기 위해서는 따로 install을 해주셔야 합니다

​

1. npm i postcss-color-mod-function -D 를 터미널에서 실행시켜주세요

(-D를 쓰는 이유는 package.json에 자동으로 postcss-color-mod-function의 버전을 입력하게 해주기 위해서입니다.)


2. package.json에 plusgin을 등록하셔야 합니다 아래에 사진 첨부하겠습니다.

아래와 같이 설정해주세요!

(사진과 같이 설정하시면 color-mod를 이용하실수 있습니다 부족한점이 있다면 댓글로 업데이트해주세요 :) )


/* PACKAGE.JSON */ { "name": "nomade", "version": "1.0.0", "description": "", "scripts": { "start": "parcel index.html" }, "keywords": [], "author": "", "license": "ISC", "dependencies": { "postcss-preset-env": "^6.6.0", "postcss-color-mod-function": "^3.0.3" }, "postcss": { "plugins": { "postcss-preset-env": { "stage": 0 }, "postcss-color-mod-function" : { } } } }

◎ color-mod , system-ui 속성

▼ 내용

color-modify라는 뜻이다.

16진수 헥사 코드 로 되있는 색상표는 투명도라던가 rgba 같은걸 못쓰는데

이 문법을 쓰면 16진수 헥사코드로 좀더 명시적으로 투명도를 줄수 있다.

(p.s : 솔직히 필자는 그냥 색상표를 보고 하는게 더 빠르겟단 생각이든다.. 뭐하러 문법을 또익히고 인스톨 까지하면서 해야하는지...)

color-mod 속성 공식

문서 : https://www.w3.org/TR/css-color-4/#numeric-rgb

h1{ color : color-mod(red alpha(50%)); } h1:hover{ color : color-mod(#f1c40f lightness(10%)); } // alpha 는 투명도를 뜻한다. lightness , blackness 같은것도 있고 //더 많은 프로퍼티도 있는대 그건 공식문서 참조를 하자...

▼ GRAY(값)

회색깔의 계열의 밝기 조절을 할수 있다.

0은 검정 100은 하얀색 (값) 안에 값을 입력해서 %처럼 조절할수있다.

어차피 이것도 rgba로 변환된다.

h1:hover{ color : gray(50); }

​

▼ system-ui;

font를 os가 가지고있는 font로 바꿀수 있다는 뜻인데...

뭔지 솔직히 잘모르겠따.. 맥북에서 하면 애플 폰트로 바뀌고

윈도우에서 하면 윈도우 폰트로 바뀐다고한다..

h1{ font-family: system-ui; }

이렇게 font가 바뀐다

​

◎ Nesting Rules (중첩 규칙) (CSS 트리구조)

▼ 내용

CSS의 부모가 같은것들을 따로 기술하는게아닌 안에서 한번에 기술을 해서 가독성이 편하다.

사용법은 그냥 &을 입력한뒤 셀렉터만 써주면된다.

셀렉터가 많으면 많을수록 정확할수록 css의 우선순의는 높아진다.

그러므로 nesting로 쓴 CSS 들은 덮어쓰기가 잘 되지 않는다.

.main{ background-color: pink; & div{ background-color: blue; color:red; & .ul{ background-color: red; color:blue; & li{ background-color: yellow; color:green; & span{ background-color: green; color:yellow; & .a1{ background-color: black; color:white; } & .a2{ background-color: black; color:blue; } & .a3{ background-color: black; color:tomato; } } } } } }

​

이렇게 변환된다

​

◎ grid-kiss 속성

▼ 내용

npm install postcss-grid-kiss 를 사용하면 설치할 수 있다.

솔직히 좋은건진 잘모르겠다 아래그림처럼 작성하면

자동으로 grid를 만들어주는 플러그인인것같다

/* pakage.json */ "postcss": { "plugins": { "postcss-preset-env": { "stage": 0 }, "postcss-color-mod-function" : { } "postcss-grid-kiss":true } }

​



반응형
저작자표시 비영리 변경금지

'디자인 > CSS' 카테고리의 다른 글

CSS3 - :not 선택자 , CSS 대문자 소문자 변환  (0) 2019.04.18
POST CSS - GRID 예제파일  (0) 2019.03.12
POST CSS - POST CSS 설치법 , preset-env 설치법  (0) 2019.03.05
CSS - 모바일 가로보기 landscape  (0) 2019.03.05
CSS - 가로세로단위 (VH,VW,REM 등)  (0) 2019.03.05

+ Recent posts

티스토리툴바