'디자인' 카테고리의 글 목록

디자인

CSS3 - :not 선택자 , CSS 대문자 소문자 변환 2019.04.18
POST CSS - GRID 예제파일 2019.03.12
POST CSS - preset-env 문법 2019.03.05
POST CSS - POST CSS 설치법 , preset-env 설치법 2019.03.05
CSS - 모바일 가로보기 landscape 2019.03.05

CSS3 - :not 선택자 , CSS 대문자 소문자 변환

2019. 4. 18. 13:02

◎ :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; // 소문자

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

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

POST CSS - GRID 예제파일 (0)	2019.03.12
POST CSS - preset-env 문법 (0)	2019.03.05
POST CSS - POST CSS 설치법 , preset-env 설치법 (0)	2019.03.05
CSS - 모바일 가로보기 landscape (0)	2019.03.05
CSS - 가로세로단위 (VH,VW,REM 등) (0)	2019.03.05

POST CSS - GRID 예제파일

2019. 3. 12. 14:08

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

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

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

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

◎ practice 1 grid

▼ 내용

https://yongminlee2.github.io/PostCssPractice/practice/practice1/

Practice 1

2 4 8 10 13

yongminlee2.github.io

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

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

practice1.zip

◎ practice 1-2 grid

▼ 내용

https://yongminlee2.github.io/PostCssPractice/practice/practice1-2/

Document

HOW STREAMS BECOME STORIES Lorem ipsum, dolor sit 192.168.0.113 Read More HOW STREAMS BECOME STORIES Lorem ipsum, dolor sit 192.168.0.113 Read More HOW STREAMS BECOME STORIES Lorem ipsum, dolor sit 192.168.0.113 Read More HOW STREAMS BECOME STORIES Lorem ipsum, dolor sit 192.168.0.113 Read More

yongminlee2.github.io

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

원본사진

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

practice1-2.zip

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

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

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

POST CSS - preset-env 문법

2019. 3. 5. 09:55

◎ 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

POST CSS - POST CSS 설치법 , preset-env 설치법

2019. 3. 5. 09:42

◎ POST CSS란?

▼ 내용

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

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

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

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

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

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

공식 문서 https://postcss.org

PostCSS - a tool for transforming CSS with JavaScript

Transform CSS with the power of JavaScript. Auto-prefixing, future CSS syntaxes, modules, linting and more are possible with hundreds of PostCSS plugins.

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

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

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

POST CSS - GRID 예제파일 (0)	2019.03.12
POST CSS - preset-env 문법 (0)	2019.03.05
CSS - 모바일 가로보기 landscape (0)	2019.03.05
CSS - 가로세로단위 (VH,VW,REM 등) (0)	2019.03.05
CSS - Box-shadow , text-shadow (그림자효과) (0)	2019.03.05

CSS - 모바일 가로보기 landscape

2019. 3. 5. 09:39

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

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

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

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

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

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

POST CSS - preset-env 문법 (0)	2019.03.05
POST CSS - POST CSS 설치법 , preset-env 설치법 (0)	2019.03.05
CSS - 가로세로단위 (VH,VW,REM 등) (0)	2019.03.05
CSS - Box-shadow , text-shadow (그림자효과) (0)	2019.03.05
CSS - 카카오톡 클론 코딩 (프론트단만. BY nicollas) (0)	2019.03.05

PREV 1 2 3 4 ···6 NEXT

아빠개발자의 노트

디자인

CSS3 - :not 선택자 , CSS 대문자 소문자 변환

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

POST CSS - GRID 예제파일

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

POST CSS - preset-env 문법

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

POST CSS - POST CSS 설치법 , preset-env 설치법

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

CSS - 모바일 가로보기 landscape

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

+ Recent posts

티스토리툴바