«   2019/11   »
          1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
Tags
more
Archives
Today
240
Total
1,665,666
관리 메뉴

올해는 머신러닝이다.

PostCSS 스터디 정리 ( 2주차 ) 본문

스터디/WEB

PostCSS 스터디 정리 ( 2주차 )

리엑티브한 행복한 수지아빠 2018.11.12 00:43


PostCSS 공부 ( 부산 스터디 2주차 ) 정리

부산에서 매주 진행되는 CSS 초중급 스터디입니다.

더 많은 스터디는 네이버 카페에서 확인 부탁드립니다.

이 내용은 니콜라스님의 CSS 마스터 클래스를 공부하고 정리한 글입니다.

Github 소스링크

저번 시간에는 CSS Next 에 대해서 정리를 했었다.

이번 스터디는 PostCSS 에 대해서 공부 하도록 한다.

공부할 내용은 아래와 같다.

  • Parcel

  • PostCSS & Parcel

  • pseudo class

  • Css Variables

  • @custom media and media query ranges

  • color-mod, gray(), System-ui

  • Nesting Rules

  • 기타 추천 사이트들

Parcel

코드를 압축,변환등을 해주는 툴이다. CSS 를 컴파일해서 어디든 사용할 수 있는 CSS로 바꿀수 있다.

공식 홈페이지는 https://parceljs.org/ 이다.

우선 디펜시즈를 설치를 하자. 노드를 사용할 예정이다.

npm install -g parcel-bundler

그럼 index.html 을 컴파일해서 변경시

parcel index.html
body {
   background-color: blue;
}

package.json

{
 "name": "web_css",
 "version": "1.0.0",
 "description": "",
 "main": "index.js",
 "scripts": {
   "start": "parcel index.html"
},
 "author": "",
 "license": "ISC"
}
npm run start
$ npm run start

> web_css@1.0.0 start G:\workspace_study\web_css
> parcel index.html

Server running at http://localhost:1234
√ Built in 2.73s.

서버가 실행되는 걸 볼 수 있다.

그럼 이걸 이용해서 최신 CSS를 어떻게 사용할 수 있는지 살펴보도록 하자.

PostCSS & PostCSS Preset Env

PostCSS 는 플러그인으로 좀 더 편하게 CSS 개발을 할 수 있도록 도와주는 역할을 한다.

자바스크립트로 말하면 타입스크립트 같은 ...

자세한 설명은 링크를 참고하도록 하자.

플러그인으로 할수 있는게 상당히 다양하다고 한다.

우리가 이용할건 PostCSS preset env 를 이용할 것이다.

특이한 점은 stage 0~3 까지 나뉘어져 있으며 단계별로 사용할 수 있는 게 다르다.

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

https://preset-env.cssdb.org/features#all-property

npm install postcss-preset-env

package.json

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

style.css

@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;
}
}

실행시 보기 편한 CSS로 컴파일 되서 나오는 걸 볼수 있다.

:root {
 --fontSize: 1rem;
 --mainColor: rgba(18,52,86,0.47059);
 --secondaryColor: rgba(102, 51, 153, 0.9);
}

html {
 overflow-x: hidden;
 overflow-y: auto;
 overflow: hidden auto;
}

@media (max-width: 50rem) {
 body {
   color: rgba(18,52,86,0.47059);
   color: var(--mainColor);
   font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
   font-size: 1rem;
   font-size: var(--fontSize);
   line-height: calc(1rem * 1.5);
   line-height: calc(var(--fontSize) * 1.5);
   word-wrap: break-word;
   padding-left: calc(1rem / 2 + 1px);
   padding-right: calc(1rem / 2 + 1px);
   padding-left: calc(var(--fontSize) / 2 + 1px);
   padding-right: calc(var(--fontSize) / 2 + 1px);
}
}

h1,h2,h3,h4,h5,h6 {
 margin-top: 0;
 margin-bottom: 0;
}

main.hero, .hero.main {
 background-image: img/background.jpg;
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {

main.hero, .hero.main {
 background-image: img/background-2x.jpg;
}
}

main.hero, .hero.main {
 background-image: -webkit-image-set(url("img/background.jpg") 1x, url("img/background-2x.jpg") 2x);
 background-image: image-set("img/background.jpg" 1x, "img/background-2x.jpg" 2x);
}

a {
 color: rgba(0, 0, 255, 0.9)
}

a:hover {
   color: #639;
}

Pseudo-classes

    <nav>
       <ul>
           <li><a href="">Link</a></li>
           <li><a href="">Link</a></li>
           <li class="target"><a href="">Link</a></li>
           <li><a href="">Link</a></li>
           <li><a href="">Link</a></li>
       </ul>
   </nav>
li:matches(:nth-child(even), .target) {
   background-color: blue;
}
  • li태그에 대해서 짝수번째만 선택 하고 , target 클래스가 있는걸 동시에 배경을 변경하도록 한다.

빨간 박스는 target 이어서 선택이 된것을 볼 수 있다.

not 태그

exclude 한 태그들을 선택가능하다.

li:not(.target) {
   background-color: blue;
}

CSS Variables

css에 변수를 지정해서 할당하는 것도 가능하다.

  • 여러번 반복되는 복사, 붙여넣기할때 유용하다.

:root {
   --awesomeColor:red;
}

li:first-child a{
   color:var(--awesomeColor);
}

Custom Selector

@custom-selector :--headers h1,h2,h3,h4,h5;

:--headers {
   color: blue;
}

Custom media & range

850px width 밑으로는 배경색을 red 로 지정

@custom-media --ipad-size (max-width: 850px);

@media(--ipad-size) {
   body {
       background-color: red;
  }
}

range

@custom-media --ipad-size (450px < width <= 850px);

@media(--ipad-size) {
   body {
       background-color: red;
  }
}

컴파일 되서 나오는 결과는 아래와 같이 나온다.

@media(min-width: 451px) and (max-width: 850px) {
   body {
       background-color: red;
  }
}

color mod

h1 {
   color: color-mod(#8e44ad, alpha(50%))
   color: color-mod(#8e44ad, lightness(50%))
}

https://www.w3.org/TR/css-color-4/#modifying-colors

Grey

h1 {
   color: grey(90);
}

System-ui

h1 {
   font-family: system-ui;
}

Nesting Rules

내부적으로 this 개념을 & 을 통해 넣을 수 있다.

index.html

    <main>
      <section>
          <li><a href="#">Hello!</a></li>
      </section>
  </main>

style.css

main {
   background-color: blue;
  & section {
     background-color: red;
     width: 500px;
    & li {
       background-color: yellow;
       width: 400px;
      & a {
         color: black;
        &:hover {
           font-size: 30px;
        }
      }
    }
  }
}

a {
   color: red;
}

기타

여기까지 이론 수업이고 다음에는 실전으로 넘어가서 15개의 사이트를 클론하도록 한다.

이상으로 2주차 스터디 내용을 정리하였다.

참석해주셔서 감사합니다.

'스터디 > WEB' 카테고리의 다른 글

Sexy Typograping - Day2  (0) 2019.05.19
Css next grid 클론 ( 1 ~ 5 )  (0) 2018.11.17
PostCSS 스터디 정리 ( 2주차 )  (0) 2018.11.12
Web 디자인시 유의 할 점 정리  (0) 2018.11.09
CSS Next 정리 ( 부산 1주차 HTML + CSS 스터디 )  (0) 2018.11.07
Flex Css 스터디 정리  (0) 2018.11.06
0 Comments
댓글쓰기 폼