mediaquery / day26 / 25.05.08

미디어쿼리 

미디어쿼리 구문

css 모듈인 미디어쿼리는 사이트에 접속하는 장치에 따라 특정한 css 스타일을 보여주는 방법이다. 

미디어쿼리는 다양한 기기와 화면 크기에 대응하여 웹사이트를 효과적으로 표현할 수 있게 해준다. 

 

[기본형]

@media only 또는 not 미디어유형 and (조건) and (조건){

선택자 {속성:값}

}

· only - 미디어쿼리를 지원하지 않는 브라우저에서는 미디어쿼리를 무시하고 실행하지 않는다.

· not - 다음에 지정하는 미디어 유형을 제외한다. 예를 들어 not tv 라고 적으면 tv유형을 제외한다. 

*only 또는 not - 잘 쓰이지 않아 생략가능. 

· and - 조건을 여러 개 연결하여 추가하는 키워드(연산자)이다. *and (조건) and 앞 뒤에는 반드시 공백으로 구분되어 있어야 한다. 안 되어 있으면 오류난다. 

· (조건) - 보여줄 해상도를 뜻한다. ()안에는 min-width:와 max-width:가 들어갈 수 있다. 소괄호 안에는 ;(세미콜      론)이 절대 포함되어서는 안된다. min-width는 최소 해상도를 뜻하고 '~사이즈부터'라고 해석한다. max-width는    최대 해상도를 뜻하고 '~사이즈까지'라고 해석한다. (조건)은 하나만 있어도 상관 없고, 확실한 사이즈를 원하면 2개    써준다. 

ex) and (min-width: 320px ) and (max-width: 480px ){... : 320px부터 480px까지

ex) and (max-width: 480px) : 0px부터 480px까지ex) and (min-width: 320px) : 320px부터 모든 큰 사이즈 

 

0~319px-(스마트워치)까지는 대응이 안된다는 뜻. 

들어간 회사에서 서비스가 모바일 중심이면 모바일-태블릿-pc사이즈 순서대로 만들고, 

서비스가 pc중심이면 pc-태블릿-모바일 순서대로 만든다. agency는 회사의 사이트를 만든다. 

[미디어 유형]

1. all : 모든 미디어 유형에서 사용할 css를 정의한다. 기본값 

2. print : 인쇄장치에서 사용할 css를 정의한다. 

3. ★screen : 컴퓨터 스크린에서 사용할 css를 정의한다. 스마트폰의 스크린도 포함된다.

4. tv : 음성과 영상이 동시에 출력되는 tv에서 사용할 css를 정의한다.

5. aural : 음성합성장치(주로 화면을 읽어 소리로 출력해주는 장치)에서 사용할 css를 정의한다. 

6. braille : 점자표시장치에서 사용할 css를 정의한다. 

7. handheld : 패드(pad)처럼 손에 들고 다닐 수 있는 장치를 위한 css를 정의한다. 

8. projection : 프로젝터를 위한 css를 정의한다. 

9. tty : 디스플레이 기능이 제한된 장치에 맞는 css를 정의한다. 이런 장치에서는 px단위를 사용할 수 없다. (카드, 포스기같은 단말기에서 사용)

10. embossed : 점자 프린터에서 사용할 css를 정의한다.

---

화면 회전 속성 

스마트폰이나 태블릿에서는 화면을 세로로 보거나 가로로 돌려서 볼 수 있다. 

미디어쿼리에서 orientation속성을 사용하면 기기의 방향을 확인할 수 있고

그에 따라 웹사이트의 레이아웃을 바꿀 수 있다.

 

[속성값]

·orientation : portrait; 단말기의 세로 모드를 지원한다.

·orientation : landscape; 단말기의 가로 모드를 지원한다. 기본값 

---

:root 선택자와 var() 함수 

스타일 가이드를 보여주는 부분. 

root선택자는 문서의 최상위 요소를 선택한다. 웹 문서에서는 html에 해당한다. 

root선택자를 사용하는 가장 큰 이유는 css에서 변수를 사용하기 위해서이다.

root를 사용하게 되면 해당 사이트를 스타일링할 때 사용할

여러 메인컬러, 서브컬러, 본문 폰트 사이즈나 제목 폰트 사이즈 등 

스타일가이드처럼 미리 정의해두고 필요할 때마다 선택해서 사용할 수 있기 때문이다. 

 

css변수

변수 : 데이터(값)를 담는 그릇--(dash 2개) 변수 만드는 방법.

변수란 필요할 때마다 값을 바꿔서 사용할 수 있도록 이름을 붙인 것을 말한다.

css변수는 웹문서의 css코드 어디에서나 사용할 수 있다.

예를 들면 문서의 main color를 지정하는 --main color라는 변수를 만들면 해당 변수 안에 있는 값을 어디서든 사용할 수 있다. css에서 변수를 만들 때에는 반드시 :root선택자 안에 만들어야 하며 변수명 앞에 --(dash) 2개 붙여서 만든다. 이름은 class나 id이름 짓듯이 보기 좋고 명확한 이름을 사용하는 것이 좋다. 

 

var()함수

.root에 변수명으로 사용할 속성값을 정해 두었다면 해당 속성은 css어디서단 사용할 수 있다. 단, 사용할 때 var()함수를 같이 이용해야 한다. var는 variable의 약자로 '변수'를 뜻한다. var() 소괄호 안에 root에 정의했던 변수명을 --를 포함하여 넣어주면 해당하는 값이 적용된다. 

 

:root와 var()를 사용하면 디자인 스타일을 일관적으로 유지할 수 있고 수정이 매우 용이해지기 때문에 실무에서도 굉장히 많이 사용하는 스타일이다. 

 

[기본형]

:root{

   --변수명1 : 값;

   --변수명2 : 값;

   --변수명3 : 값;

} 

 

선택자{

   color : var(--변수명1);

}

---

filter속성

다양한 시각 효과를 추가할 때 filter속성을 사용

마치 포토샵으로 필터 효과를 적용한 것처럼 나타난다.

 

[속성값]

˙ blur(); 선택한 이미지나 컨텐츠에 블러 효과를 적용한다. 소괄호 안에 값은 px값을 적으면 된다.

˙ brightness(); 선택한 이미지나 컨텐츠를 더 밝게 만든다. 값은 %나 숫자를 사용한다. 0은 밝기가 아예 없어 검정

   색, 1이 기본값으로 현재 밝기를 뜻하고, 2는 200%와 동일하고 2배 정도 밝은 상태.

˙ contrast(); 대비효과. 값은 %를 이용한다. 0%는 대비가 전혀 없어 회색으로 표현된다. 100%는 기본값으로 아무     변화가 없다. 200%는 대비를 2배로 증가시켜 색상간의 차이를 더 뚜렷하게 만든다. 

˙ drop-shadow(x축 y축 흐림 그림자색 ); 이미지나 컨텐츠의 윤곽을 따라 그림자를 적용한다.

˙  gray-scale(); 이미지를 흑백 이미지로 바꾼다. 값은 0%~100% 사이의 값을 넣으면 된다. 100%로 가까워질 수록

   완전 흑백사진에 가까워진다.

˙ invert(); 이미지나 컨텐츠의 색상을 보색으로 반전시킨다. 값은 %를 사용한다. 

˙ sepia(); 오래된 사진처럼 황토색을 첨가한다. 이러한 색상을 '세피아 톤'이라고 한다. 빈티지하거나 고풍스러운 느     낌을 줄 수 있다. 값은 %를 사용한다. 0%~100%, 100%에 가까워질 수록 세피아톤에 강해진다.

˙ opacity(); 이미지나 컨텐츠의 투명도를 조절한다. 0%~100%값을 입력할 수 있고 100%가 기본값이다. 0%는 완

   전 투명한 상태가 된다.

˙ hue-rotate(); hsl색상환에서 색상을 각도로 표시하여 변경할 수 있다. 개발자도구로 각도를 넣어보면서 설정해야

  한다. 값은 각도를 사용하며 deg단위를 입력한다. 

˙ saturate(); 이미지의 채도를 변경한다. 값은 %로 지정하고 0%로 지정하면 채도가 아예 없어서 흑백사진처럼 변하

  고 100%가 기본값으로 원본사진을 유지한다. 200%는 색상 채도가 두배가 되어 더 선명하고 강렬한 색상으로 표시

  된다. 

    <title>filter속성</title>

    <style>

      img {

        width: 300px;

      }

      .blur {

        filter: blur(10px);

      }

      .brightness {

        filter: brightness(1.5);

      }

      .contrast {

        filter: contrast(200%);

      }

      .drop {

        filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.5));

        /* x축 y축 흐림정도 색상 */

        box-shadow: 5px 5px 10px 5px rgba(0, 0, 0, 0.5);

        /* box-shadow는 이미지의 박스 테두리에 생긴다  */

      }

      .gray-scale {

        filter: grayscale(90%);

      }

      .invert {

        filter: invert(100%);

      }

      .sepia {

        filter: sepia(100%);

      }

      .opacity {

        filter: opacity(50%);

      }

      .hue-rotate {

        filter: hue-rotate(45deg);

      }

      .saturate {

        filter: saturate(500%);

      }

    </style>

글래스 모피즘 효과처럼 블러 주기 ↓

 backdrop-filter: blur(10px);

 

backdrop-filter 속성

backdrop-filter는 filter속성과 달리 컨텐츠 자체에 영향을 주지 않고

뒤에 겹쳐져 있는 배경에 해당 효과를 적용한다. 

속성값은 filter 속성에 있는 속성값을 사용할 수 있다.

ex)

backdrop-filter: invert(100%); / backdrop-filter: contrast(50%); / backdropfilter: saturate(200%); 등