◎ :NOT 선택자

▼ 내용

:NOT() 선택자는 ( ) 안에 있는 조건이있는놈만 빼고 CSS 문법이 적용된다.

--CSS-- p:not(.classy) { color: red; } body :not(p) { color: green; } --HTML-- <p>Some text.</p> <p class="classy">Some other text.</p> <span>One more text<span>




◎ input::placeholder

▼ 내용

input의 placeholde의 css를 적용시킬수있다.

input::placeholder { font-weight: 300; color: rgba(0, 0, 0, 0.7); }

◎ CSS 의 대문자 , 소문자

▼ 내용

text-transform 을 쓰면 그 태그의 글자는 대문자 또는 소문자로 변환할수있다.

text-transform: uppercase; // 대문자 text-transform: lowercase; // 소문자



POST CSS는 일부로 사용하지 않았다.

IE에서 안먹히고 실무에서 사용하기 힘들다는게 내 판단이다.

알아두고는 있으나 사용하지 않고 하였다.

GRID로 짠 레이아웃이라고 생각했으면 좋겠다.

◎ practice 1 grid

이 아래 사진 한장을 grid로 짜서 html 레이아웃을 만들어 보았다.




이 아래가 내가 만든 html이다 파일 첨부


◎ practice 1-2 grid

솔직히 이건 개판이다 인정...



원본사진




이게 내가만든건대 솔직히 개판으로만들었다 꼬여서.. .다시풀기귀찮았다.


practice1-2.zip







◎ 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 } }




◎ POST CSS란?

▼ 내용

POST CSS는 우리의 CSS를 조금더 현대적으로 바꿔주는 플러그인이다.

좀더 풀어 설명하자면 POST CSS 는 JS 플러그인을 사용하여 CSS를 변환시키는 툴 입니다.

이런 플러그인을 사용하여 lint , 변수 , mixin 을 사용하거나 미래의 css 문법을 사용할수 있습니다.

POST CSS 는 언어가아니라 자동으로 신기술 CSS 를 호환가능하도록 변환시켜주는 플러그인일 뿐이다.

1. CSS에 문제가없는지 미리 확인해서 에러로그를 준다.

2. 지금 발전중인 CSS의 현대기술들을 브라우저에 호환되도록 자동 변환해준다.

공식 문서 https://postcss.org

◎ BEM 란?

▼ 내용

BEM 이라는건 CSS에서 class를 선언하는 방법 중 하나


◎ POSTCSS-preset-env 설치

▼ 내용

POSTCSS 의 수많은 플러그인중 하나이다.

https://preset-env.cssdb.org

preset-env 의 공식문서 과거 이름인 css-next 였다.

https://cssdb.org

css db 는 기본적으로 css의 모든 properties를 포함하고있다.

최근의 나온 property 들은 어느브라우저에서 구현되는지의 정보등을 알려준다.

설치법

npm install postcss-preset-env

완료되면 이렇게 뜬다.



dependencies 부분에 저렇게 추가가 된다.

이걸론 부족하여 추가 설정을 해야한다


"postcss": { "plugins":{ "postcss-preset-env": { "stage": 0 } } }

stage 3은 지원하고 0 은 아직 브라우저에서 지원을 잘 안함


◎ POSTCSS-preset-env 작동 되는지 테스트

▼ 내용

preset-env 에선 작동이 되는지 테스트 코드를 준다.

https://preset-env.cssdb.org/playground

정상적으로 설치가 되었다면 아래의 소스코드를 입력후

웹브라우저로 보면 자동으로 css가 변환이 되있을것이다.

변환이 되있따면 percel 을 통하여 preset-env를 정상 설치한것이다.

@custom-media --viewport-medium (width <= 50rem); @custom-selector :--heading h1, h2, h3, h4, h5, h6; :root { --fontSize: 1rem; --mainColor: #12345678; --secondaryColor: lab(32.5 38.5 -47.6 / 90%); } html { overflow: hidden auto; } @media (--viewport-medium) { body { color: var(--mainColor); font-family: system-ui; font-size: var(--fontSize); line-height: calc(var(--fontSize) * 1.5); overflow-wrap: break-word; padding-inline: calc(var(--fontSize) / 2 + 1px); } } :--heading { margin-block: 0; } .hero:matches(main, .main) { background-image: image-set("img/background.jpg" 1x, "img/background-2x.jpg" 2x); } a { color: rgb(0 0 100% / 90%); &:hover { color: rebeccapurple; } }




모바일 쪽 작업을 하다보면 가로보기와 세로보기의 레이아웃을 다른게 해야할 일이 있을 때도 있습니다. 세세한 width 값을 맞춘다던가, 가로보기를 할 때 넓어진 width 에 무언가를 넣을 경우도 생길 수 있을 것입니다. 이럴때 여러가지로 고민을 하게 되는데, 여러가지 방법들 중에 CSS를 다르게 불러와 보는 것도 하나의 좋은 방법일 수도 있습니다.

<link rel="stylesheet" type="text/css" media="all and (orientation:portrait)" href="portrait.css">

<link rel="stylesheet" type="text/css" media="all and (orientation:landscape)" href="landscape.css">



위와 같은 방식으로 사용하면 디바이스를 세로로 볼 때는 portrait.css 를 불러오고, 가로로 볼 때는 landscape.css 를 불러오게 됩니다. 그런데 이렇게 사용하게 되면 portrait 와 landscape 의 경우 두가지 CSS를 제작해야하고 만약에 세로와 가로의 레이아웃이 거의 비슷하고 일정 부분만 다른 경우 이렇게 사용하면 동일한 부분의 수정은 두 파일을 항상 동시에 수정해주어야 하는 번거로움이 발생하게 됩니다. 그래서 세로를 기준으로 하고 가로보기 시에 특정한 무언가를 약간만 수정하고 싶다면 아래와 같은 방법을 사용하면 더 좋을 것 같습니다.

<link rel="stylesheet" type="text/css" media="all" href="basic.css">

<link rel="stylesheet" type="text/css" media="all and (orientation:landscape)" href="landscape.css">

위와 같이 사용하게 되면 항상 basic.css 가 불러오게 되고 가로로 볼 경우 landscape.css 를 추가적으로 불러오게 됩니다. 그렇다면 basic.css 를 통해 기본적인 레이아웃을 구현하고 landscape.css 를 통해 가로보기 시에 필요한 몇가지만 추가해 주면 훨씬 더 효율적으로 사용할 수 있을 것 같습니다.



출처: https://htglss.tistory.com/122 [행복하기]


+ Recent posts