CSS 들어가기 - 5

심민기·2022년 4월 13일

기초공부

목록 보기

18/25

미디어 쿼리

media query는 화면의 종류와 크기에 따라서 디자인을 달리 줄 수 있는 CSS의 기능. 반응형 디자인의 핵심 기술이라고 할 수 있습니다. ```

~500px : red
501~600px : green
601px~ : blue

```

@media로 미디어 쿼리의 시작. 화면 크기에 따라 색이 바뀐다.

캐스케이딩은 여러 주체들이 한 태그에 효과를 주려했을 때 누구에게 우선권을 주냐는 얘기. 미디어 쿼리도 한 태그가 여러 효과를 동시에 받게됨. 보통 코드가 나중에 나오는 게 우선권이 높으므로 600 다음으로 500이 나오게 한다.

미디어 쿼리를 holy grail layout에 응용해보도록 하자. ```

생활코딩

html
css
javascript

긴글 AD 홈페이지

```

미디어 쿼리를 적용하지 않았을때

미디어 쿼리 적용 시

  @media(max-width:500px){
           .content{flex-direction: column; }
           .content nav, .content aside
           { border:none;  flex-basis: auto;}
           main{   order:0;   }
           nav{    order:1;   }
           aside{ order:2;  display: none; }
       }

float

글이 마치 흐르는 듯 해체된 뒤에 다른 요소와 함께 움직임. ![](https://velog.velcdn.com/images/mingi001/post/bcce5b0f-1044-4c0a-9966-b3cb6bb1adf7/image.png) ```

```

이런 식으로 본래라면 이미지 따로 글 따로여야 하지만 이미지 옆에서 글이 흐르듯이 빈자리를 차지한다.

그래픽

배경

CSS를 이용하면 엘리먼트의 배경을 지정할 수 있다.\ 중요속성들.

background-color : red
background-image : url("bg.png")
background-repeat : repeat, no-repeat, repeat-x, repeat-y
background-attachment : scroll, fixed
background-position : left top or x% y% or x y
background-size : 100px 100px or cover or contain

커버와 컨테인의 차이

화면을 다채우되 이미지를 다 안보이나. 이미지를 다 보이된 화면을 덜 채우나.

필터

여러 동적인 효과를 줄 수 있다. 마치 포썁이나 유니티의 포스트 프로세싱 처럼.

https://css-playground.com/view/39/css-filter-playground

여기서 체험해보자.

img: hover로 마우스가 위아래로 갈때 효과가 나오게 가능 img{transition: all 1s}로다가 그러한 전환의 시간을 정할 수 있고 filter: grayscale(100%)로다가 회색으로 변하는 효과를 줄 수 있다.

이러한 필터를 통해 만든 것들을 https://codepen.io/?cursor=ZD0xJm89MCZwPTEmdj02Nzk2NA== 에 들어가서 검색해서 볼 수 있다.

blend

블랜드는 이미지와 이미지를 혼합해서 새로운 이미지를 만들어내는 기법

<!doctype html>
<html>
  <head>
    <style>
      .blend{
        height:400px;
        border:5px solid;
        background-color: rgba(255,0,0,0.5);
        background-size:cover;
        background-image:url('image/fire.jpg');
        background-blend-mode: saturation;
        transition:background-color 30s;
      }
      .blend:hover{
        background-color: rgba(255,0,0,1);
        transition:background-color 5s;
      }
    </style>  </head>  <body>
    <div class="blend">
    </div>  </body></html>

마우스를 올려놓고(hover)하고 있으면 30초(transition)동안 장면이 빨간색으로 saturation하게 변한다.

<!doctype html><html> <head> <style>
      body{
        background-image: url(image/fire.jpg);
      }
      .blend{
        font-size:1rem;
        font-weight: bold;
        color:green;
        mix-blend-mode:screen;
      }
    </style>  </head>  <body>
    <div class="blend">
    긴글
    </div>  </body></html>

결과물은..

이렇게 이미지를 배경으로 노색, 스크린 모드의 글이 나타나게 된다.
mix-blend-mode을 통해 타이포그래피와 이미지 사이의 시각적효과가 달라지게 된다.

이러한 블랜드를 이용한 다양한 사례들을 보려면.
링크텍스트

링크텍스트

링크텍스트
살펴보도록 하자.

transform

transform은 엘리먼트의 크기, 위치, 모양을 변경하는 속성. 유니티랑 비슷?

트랜스폼의 기능들.

/* Keyword values */
transform: none;
 
/* Function values */
transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0);
transform: translate(12px, 50%);
transform: translateX(2em);
transform: translateY(3in);
transform: scale(2, 0.5);
transform: scaleX(2);
transform: scaleY(0.5);
transform: rotate(0.5turn);
transform: skew(30deg, 20deg);
transform: skewX(30deg);
transform: skewY(1.07rad);
transform: matrix3d(1.0, 2.0, 3.0, 4.0, 5.0, 6.0, 7.0, 8.0, 9.0, 10.0, 11.0, 12.0, 13.0, 14.0, 15.0, 16.0);
transform: translate3d(12px, 50%, 3em);
transform: translateZ(2px);
transform: scale3d(2.5, 1.2, 0.3);
transform: scaleZ(0.3);
transform: rotate3d(1, 2.0, 3.0, 10deg);
transform: rotateX(10deg);
transform: rotateY(10deg);
transform: rotateZ(10deg);
transform: perspective(17px);
 
/* Multiple function values */
transform: translateX(10px) rotate(10deg) translateY(5px);
 
/* Global values */
transform: inherit;
transform: initial;
transform: unset;

트랜스폼에대해 알려주는 사이트들에 대한 링크.
https://opentutorials.org/module/2367/13684

svg

웹브라우저에서 벡터 형식의 이미지 출력가능.

벡터 vs 비트맵.

확대시 벡터는 이미지가 꺠지지 않지만 비트맵은 깨지게 됨.
벡터는 그래프(그래프는 확대해도 바뀌지 않음) 비트맵은 도트같은 형태라고 이해 .

svg는 백터(vector) 이미지를 표현하기 위한 포맷으로 w3c에서 만든 백터 이미지 표준.
SVG 자체는 CSS가 아니다

https://thenounproject.com/
svg이미지를 쉽게 가져오는 사이트.

http://codepen.io/search/pens?q=svg&limit=all&type=type-pens

모션그래픽

transition

<!doctype html><html><head>  <style>
    a{
      font-size:3rem;
      display:inline-block;
/*
      transition-property: font-size transform;
      transition-duration: 0.1s;
*/
      transition:all 0.1s;
    }
    a:active{
      transform:translate(20px, 20px);
      font-size:2rem;
    }
  </style></head><body> 
  <a href="#">Click</a>
  </body></html>

액티브(활성화)되었을떄 아래로 이동, 사이즈 줄어듬.

링크를 누르면 글자가 통째로 줄어들었다가 다시 커지는, 스무스한 애니메이션 효과가 나타난다.

<!doctype html>
<html>
<head>
  <style>
    body{
      background-color: black;
      transition:all 1s;
    }
    div{
      background-color: black;
      color:white;
      padding:10px;
      width:100px;
      height:50px;
      -webkit-transition: all 500ms cubic-bezier(0.680, 0, 0.265, 1); /* older webkit */
      -webkit-transition: all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550); 
         -moz-transition: all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550); 
           -o-transition: all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550); 
              transition: all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550); /* easeInOutBack */
 
      -webkit-transition-timing-function: cubic-bezier(0.680, 0, 0.265, 1); /* older webkit */
      -webkit-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550); 
         -moz-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550); 
           -o-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550); 
              transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550); /* easeInOutBack */
    }
    div:hover{
      height:400px;
    }
  </style>
</head>
<body onload="document.querySelector('body').style.backgroundColor='white';">
  <div>
    TRANSITION
  </div>
</body>
</html>