Udemy section 9 (25일) - CSS 사용자 정의 속성, CSS 변수, transform, transition, SVG

 

 

1. CSS 변수나, CSS 정의 속성은 CSS파일에 직접 추가되고, HTML 선택자를 통해 이 변수들을 구현한다.

    요소마다 적용된 개별의 정의를 사용하는게 아니라, CSS 속성을 그룹으로 묶어서 관리할수 있다!

 

html {

   --color-grey-100: rgb(236, 236, 236);

   --color-grey-400: rgb(134, 134, 134);

   --color-grey-600: rgb(58, 58, 58);

   --color-grey-900: rgb(41, 41, 41);

   --color-primary-500: rgb(167, 226, 255);

   --color-primary-700: rgb(0, 170, 255);

   --size-1 : 18px;

   --size-5 : 50px;

    background-color: var(--color-grey-100);

    font-family: 'Krub', sans-serif;

    font-weight: 400;

  }

 

      ㄴ  색상의 숫자값은 대게 50 - 900까지 올라감,

           폰트사이즈는 1~5로 구분을 많이함

             ㄴ font-size: var(--size-1)

 

 

 

 2. 루트(:root) / html / * 

      ㄴ 각 특징에 대해 비교해보자면, 

 

 

  *** 루트셀렉터 > html   (루트셀렉터가 html보다 최상위임을 기억!)

        ㄴ css는 html 관련 이외에도 사용가능 하다!

 

 

 

3. CSS 전환 추가하기 (transition)

 

    check point!!!    transition 속성은 itinial state(요소의 초기)에 적용 해줘야 한다!

 

 

아래 card-container에 지정하고 싶을경우?

  .card-container {

    background-color: rgb(255, 255, 255);

    width: 350px;

    margin: 50px auto;

    box-shadow: 3px 3px 10px rgb(201, 200, 200);

    transition: trasnform 2s ease-out 1s

  }

 

  .card-container:hover {

    transform: scale(1.05);

  }

 

 

아래 card-container에 transition 요소가 적용되어있는데, h1:hover에 적용되 transform이 적용된다. 

 transition은 컨테이너안에 위치해있으면 꼭 해당요소가 아니더라도 적용 가능함!

 

  .card-container {

    background-color: rgb(255, 255, 255);

    width: 350px;

    margin: 50px auto;

    box-shadow: 3px 3px 10px rgb(201, 200, 200);

    transition: trasnform 2s ease-out 1s

  }

 

  h1 {

    color: var(--color-grey-600);

    text-align: left;

    padding: 30px 50px 0px 50px;

    margin: 10px 0;

    font-family: 'Zilla Slab', serif;

    font-weight: 600;

  }

  h1:hover {

    transform: scale(1.05);

  }

 

 

4. transition은 요소의 초기에 적용해야함!

    css 종속적 논리에 따라서 덮어쓰게 되니, 작성시 주의할것! css의 가장 기본 원칙을 항상 기억할것 :)

 

 

 

  .button {

    color: var(--color-primary-700);

    text-decoration: none;

    text-transform: uppercase;

    display: inline-block;

    width: 70%;

    padding: 10px;

    margin: 0 0 30px 0;

    border: 2px solid rgb(224, 224, 224);

    font-size: var(--size-1);

    font-weight: 600;

    transition: background-color 0.5s ease-out;

  }

 

  .button:hover {

    color: white;

    background-color: var(--color-primary-700);

    border: 2px solid rgb(255, 255, 255);

  }

 

 

5.  transform에 대해서 더 알아보기

 

https://developer.mozilla.org/en-US/docs/Web/CSS/transform

transform - CSS: Cascading Style Sheets | MDN

 

 

7. SVG 작업

 

  SVG란? 브라우저가 렌더링 할수있는 확장형 이미지의 텍스트기반 묘사이고, 모든 브라우저에서 사용할수 있다 :)

  쉽게 말하면 이미지를 텍스트처럼 추가할수 있음! (html에 적용시킴)

 

  아래 사이트에서 미리 정의된 SVG 아이콘 확인이 가능하고, 무료로 사용이 가능!!!

  아래 사이트에서 svg, 혹은 svgg로 복사한뒤 html에 붙여주기만 하면 끝! :)  so easy.

 

https://heroicons.com/

Heroicons

 

Scalable Vector Graphics (SVG)