[css]media query란 무엇인가? 방법론이란 ?

css를 구성하는 방법은 여러가지가 있습니다. class선택자 id 선택자, 또는 라이브러리를 사용한 styled, scss등등 

 

정말 많습니다. 우리는 그중에서 제일 중요한 미디어쿼리에 대해 알아보고자 합니다.

 

필자는 여태까지 공부하면서 많은 개발지식을 가지고 있지만 그렇다고 해서 이런 중요한 지식들은 

 

블로그에서 잊지 않도록 중요하다면 포스팅하는 습관을 가지고 있습니다ㅎㅎ 

 

CSS에는 방법론이라는 것이 있습니다.

 

공통 지향점

1.코드의 재사용성 높이기

2.쉽게 유지보수 할 수 있도록 하기

3.확장 가능하게 하기

4.클래스명으로 무슨 의미인지 예측 가능하도록 설계

---

우리가 작업을 하거나 협업을하다보면 여러가지 상황에 처하게 됩니다. 내가짠 코드를 다른 사람들에게 설명해야 하며 

 

또 이런 방식으로 로직을 짠 이유에 대해 좀 더 명확하고 상대방이 이해할 수 있도록 하는 것 프로그래머의 의무라고

 

저는 생각합니다. 내가 아무리 좋은 코드로 css를 작성했더라도 상대방이 내가 짠코드의 의도를 이해하지 못하면 

 

말짱 꽝이죠...

 

그렇기 위해서 !! CSS에 기본 지식인 CSS 방법론에 대해 포스팅해보려 합니다. 이러한 포스팅을 보면서 상대방도 이해하고 본인도 이런 방법론이 있다는 사실을 알게될 것입니다.

---

방법론 3가지

먼저 css에는 중요한 방법론 3가지가 있습니다.

 

🥠 SMACSS(Scalable & Modular Architecture for CSS)

• Class명을 통한 예측
• 재사용성 부여
• 쉬운 유지보수
• 확장성

1.Base (기본 베이스)

• 기본 스타일(Reset, Default..)
• 기본 스타일에는 !import를 사용할 필요가 없다.

2.Layout (레이아웃)

• 레이아웃과 관련된 스타일 정의
• class명에 '|-' suffix(접미사)를 붙인다.

3. Module 

• 모듈과 관련된 스타일 정의
• 스타일 재사용을 위한 요소
• Block, Element, Module
• 재사용성을 위해 ID와 element 사용 금지(element를 사용해야 할 경우 자식 선택자를 통해 부여한다)

4. State 

• 상태를 나타내는 스타일 정의
• hidden, expend, active, hover 등 
• class명에 's-' suffix를 붙인다.

5. Theme 

• 사이트의 전반적인 look과 feel제어
• 색이나 이미지를 불변하는 스타일을 분리 -> 기존의 스타일을 재선언 할 수 있다.
• 적용 범위가 넓을때 'theme-' suflix를 붙인다.

6.유의사항

• 파생된 선택자 사용 금지
• ID 사용 금지
• !important 사용 금지
• class명은 페이지에 맞도록 의미있게 정의
• class명이 다른이가 이해할 수 있도록 선언

---

🥠 BEM(Block Element Modifier)

• Block, Elemnt, Module의 약자 
• ID선택자는 사용할 수 없다.
• 오직 Class명만 사용가능
• ex) .header_navigation-secondary

1.Block

• 문단 전체에 적용된 element 또는 element를 담고 있는 컨테이너
• head block > menu block, logo block, search block, auth block... 등등 

2.Element

• block 안에서 특정 기능을 수행하는 컴포넌트
• element는 상황에 따라 다르다.
• 각 element는 두 개의 밑줄 표시로 연결해 block 다음에 작성하도록 한다.
• ex) .headerlogo, .headersearch, .headermenu, .headerlogin 등
• block과 element명이 길다면 '-'으로 연결한다.
• ex) .block-name__element-name, .header-wrapper__body__container

3. Modifiers(수식어, 접미사)

• block,element의 속성이다.
• 이 속성은 block,element의 외관과 상태를 변화시킨다.
• class명으로 '-'를 추가하여 modifier 추가
• class은 구체적이고 명료해야 한다.
• class명은 HTML안에서도 읽기 쉬워야 한다.
• class명은 무엇을 나타내는지 분명해야 한다.

---

🥠 OOCSS (Object Oriented CSS)

• Object Oriented CSS의 약자
• css를 모듈화해 중복을 최소화 하는 작업 
• 구조와 외양을 분리한다.
• 결합하면 다양한 결과물을 얻을 수 있다.
• 외양: .button, .box, .widget, .skin...
• 컨테이너와 컨텐츠로 분리 ex) .container, .contents
• ex) .globalwidth + .header-inside / .main / .footer-inside
• ex) .btnbase + .twitter / .facebook
• 단점) 다중 클래스 사용으로 HTML 코드가 복잡해지는 경우가 발생할 수 있다.
• 단점) non-sematic한 클래스 사용

CSS 방법론[SMACSS, BEM, OOCSS]

여기까지가 CSS애 대한 방법론 정리 내용이다. 

---

다음으로 css에 미디어 쿼리 적용 방법이다. 사실 적용 방법은 너무나도 쉬워서 직접 적용을 해보지 않아도 

 

얼추 때려 맞추기 쉽다.

 

1.CSS3 미디어 쿼리 @media 규칙 이해

출력 장치의 여러 특징 가운데 일부를 참조해 CSS 코드를 분기 처리하면서 하나의 HTML 소스가 여러가지 

View를 갖도록 구현할 수 있는 명세이다. 일반적으로 뷰포트 해상도에 따라 CSS코드를 분기한다.

 

CSS3 코드 내부에서 분기하는 방법

@media only all and (조건문) {실행문}

• @media: 미디어 쿼리가 시작됨을 시작한다. @media, only, and, 조건문 사이에 포함되어 있는 공백은 필수
• only: only키워드는 미디어 쿼리를 지원하는 사용자 에이전트에만 미드어 쿼리를 해석하라는 명령이며 
  생략이 가능하다. 생략했을때 기본 값는 only로 처리한다. 생략해도 무방하므로 이 키워드는 일반적으로는
  작성하지 않는다. 이 자리에는 not키워드를 사용할 수 있는데 뒤에 오는 조건들을 모두 부정하는 연산을 한다.
• all: all키워드는 미디어쿼리를 해석할 대상미디어를 선언한 것이다. all상태라면 모든 미디어가 이 구문을 해성해야
  한다. all값은 키워드 대신 screen또는 print와 같은 특정 미디어를 구체적으로 언급할 수 있다. all키워드는 
  생략이 가능하며 생략할때 기본 값은 all로 처리한다. 이 밖에도 다양한 미디어 타입(all, aural, embossed,handheld,print, projection, screen, speech, tty, tv)가 있다. 
  주로 all, screen, print가 가장 널리 쓰인다.
• and: and 키워드는 'AND' 연산을 수행하며 앞과 뒤 조건이 모두 충족해야 한다는 것을 의미한다.조건이 유일하거나 또는 only,all과 같은 선행 키워드가 생략되면 and키워드는 사용하지 말아야한다. 대신 콤마 ,기호를 사용하면 'OR'
  연산을 수행한다. 'OR'연산은 나열된 조건 중에서 하나만 true라도 실행문을 해석한다.
• (조건문): 브라우저 조건문이 참일때 선언문을 처리하고 거짓일 때 무시한다.조건문은 두 가지 이상 등장할 수 있다. 둘 이상의 조건문은 and키워드로 콤마(',') 기호로 연결해야 한다.
• {실행문}: 일반적인 CSS 코드를 이 괄호안에 작성해야 한다. 브라우저는 (조건문) 이 참일때 실행문 안쪽에 있는
  CSS 코드를 해석한다.

CSS3 코드 외부에서 분기하는 방법

조건문에 따라 별도의 외부 CSS파일을 참조해 분기하는 방법은 다음과 같다. 이 방식은 성능 최적화 측면에서 권장하지 않는다.

<link rel="stylesheet" type="text/css" media="all and (조건A)" href="A.css">
<link rel="stylesheet" type="text/css" media="all and (조건B)" href="B.css">

데스크탑 브라우저 사용자가 언제든 조건을 변경(예를 들어 창 크기를 조절할때 해상도를 바꾸는 경우)할 수 있기 때문에 웹브라우저는 조건에 관계 없이 A.css파일과 B.css 파일을 항상 요청한다. HTTP요청을 불필요하게 두번 발생시켜

이 페이지를 처음 로딩하는 사용자에게는 성는 저하의 원인이 된다. CSS파일은 하나로 병합해 CSS코드 내부에서

 

조건에 따라 분기시키는 방식을 권장한다.

 

미디어 쿼리 코드 템플릿

아래 코드에서는 모든 해상도를 커버하기 위한 미디어 쿼리 코드 템플릿이다. All, Mobile, Tablet, Desktop으로

기기에 따라 대항하는 코드를 분류했지만 Liquid 레이아웃 기법을 사용하면 사실상 모든 해상도를 

 

커버할 수 있다.

@charset "utf-8"

/* All Device */
모든 해상도를 위한 공통 코드 작성, 모든 해상도에서 실행되는 부분 

/* Mobile Device */
768px 미만 해상도의 모바일 기기를 위한 코드를 작성. 모든 해상도에서 이 코드가 실행됨.단 
미디어 쿼리를 지원하지 않는 기기를 위해 미디워 쿼리 구문을 사용하지 않는다.

/* Tablet & Desktop Device */
@media all and (min-width: 768px) {
    // 사용자가 해상도 768px 이상일 때 이 코드가 실행됨. 테블릿과 데스크톱의 공통 코드를 작성
}

/* Tablet Device */
@media all and (min-width:768px) and (max-width:1200px) {
   // 사용자 해상도가 768이상이고 1024px 이하일때 이 코드가 실행. 아이패드 또는 비교적 작은 해상도의 노트북이나 데스크톱에 대응하는 코드
}

/* Desktop Device */
@media all and (min-width: 1025px) {
   // 사용자 해상도가 1025px 이상일 때 이 코드가 실행됨. 1025px 이상의 랩탑 또는 데스크톱에 대응하는 코드 작성
}

 

조건문이 될 수 있는 특징들

1.width / height

뷰포트의 너비와 높이. 뷰포트의 크기는 HTML body 콘텐츠를 표시하는 영역으로 실제 스크린의 크기와는 다르다. 반응형 웹 구현시 가장 일반적으로 사용하는 조건이 된다.

• Value: <length>
• Applies to: visual and tactile media types 
• Accepts min/max perfixes: yes

Example:

@media all and (min-width:768px) and (max-width:1024px) {...} // 뷰포트 너비가 768px 이상 '그리고' 1024px 이하면 실행 // and 
@media all and (width: 768px), (width:1024px) {...} // 뷰포트 너비가 768px 이거나 '또는' 1024px이면 실행 // or
@media not all and (min-width:768px) and (max-width:1024px) { ... } //  뷰포트 너비가 768px 이상 '그리고' 1024px 이하면 '아니면' 실행

device-width / device-height

 

스크린의 너비와 높이. 스크린은 출력 장치가 픽셀을 표시할 수 있는 모든 영역으로 일반적으로 HTML body콘텐츠를

표시하는 뷰포트 보다 크다.

 

• Value: <length>
• Applies to: visual and tactile media types
• Accepts min/max prefixes: yes

Example: 

@media all and (device-width:320px) and (device-height: 480px) {...} // 스크린 너비가 320px '그리고' 높이가 480px 이면 실행
@media all and (min-device-height:480px) {...} // 스크린 너비가 최소 320px 이상 '그리고'높이가 최소 480px 이상이면 실행

orientation

뷰포트의 너비와 높이 비율을 이용하여 세로 모드인지 가로 모드인지를 판단.

• Value: portrait | landscape
• Applies to: bitmap media types
• Accepts min/max prefixes:no

Example:

@media all and (orientation:portrait) {...} // 세로모드. 뷰포트 높이가 너비에 비해 상대적으로 크면 실행
@media all and (orientation:landscape) {...} // 가로모드. 뷰포드 너비가 높이에 비해 상대적으로 크면 실행

aspect-ratio

뷰포트의 너비와 높이에 대한 비율. '너비/높이' 순으로 조건을 작성한다. min/max접두사를 사용해 너비 값의 최소/최대 비율을 정할 수 있다.

• Value: <ratio>
• Applies to: bitmat media types
• Accepts min/max prefixes: yes

Example:

@media all and (aspect-ratio:5/4) { … } // 뷰포트 너비가 5, 높이가 4 비율이면 실행
@media all and (min-aspect-ratio:5/4) { … } // 뷰포트 너비가 5/4 비율 이상이면 실행
@media all and (max-aspect-ratio:5/4) { … } // 뷰포트 너비가 5/4 비율 이하면 실행

device-aspect-ratio

스크린의 너비와 높이에 대한 비율: '너비/높이'순으로 조건을 작성한다. min/max접두사를 사용하면 너비 값의 최소/최대 비율을 정할 수 있다.

• Value: <ratio>
• Applies to: bitmat media types
• Accepts min/max prefixes: yes

Example

@media all and (device-aspect-ratio:5/4) { … } // 스크린 너비가 5, 높이가 4 비율이면 실행
@media all and (min-device-aspect-ratio:5/4) { … } // 스크린 너비가 5/4 비율 이상이면 실행
@media all and (max-device-aspect-ratio:5/4) { … } // 스크린 너비가 5/4 비율 이하면 실행

 

color

출력 장치의 색상에 대한 비트의 수. 출력 장치가 컬러가 아닌 경우 0의 값에 대응한다.

• Value: <ratio>
• Applies to: bitmat media types
• Accepts min/max prefixes: yes

Example

@media all and (color) { … } // 출력 장치가 컬러를 지원하면 실행
@media all and (color:0) { … } // 출력 장치가 컬러가 아니면 실행
@media all and (color:8) { … } // 출력 장치가 8비트 색상이면 실행
@media all and (min-color:8) { … } // 출력 장치가 8비트 이상 색상이면 실행
@media all and (max-color:8) { … } // 출력 장치가 8비트 이하 색상이면 실행

color-index

출력 장치가 색상 색인 테이블을 사용하는 경우 표현할 수 있는 색의 수. 출력 장치가 색상 색인 테이블을 사용하지 않으면 0의 값에 대응한다. 현재 제대로 지원하는 브라우저가 없다.

• Value: <integer>
• Applies to: visual media types
• Accepts min/max prefixes: yes

Example:

@media all and (color-index) { … } // 출력 장치가 색상 색인 테이블을 사용하면 실행
@media all and (color-index:0) { … } // 출력 장치가 색상 색인 테이블을 사용하지 않으면 실행
@media all and (color-index:256) { … } // 출력 장치가 256 색을 지원하면 실행
@media all and (min-color-index:256) { … } // 출력 장치가 256 이상 색을 지원하면 실행
@media all and (max-color-index:256) { … } // 출력 장치가 256 이하 색을 지원하면 실행

monochrome

출력 장치가 흑백인 경우 픽셀당 비트 수. 출력 장치가 흑백이 아니라면 0의 값에 대응한다.

• Value: <integer>
• Applies to: visual media types
• Accepts min/max prefixes: yes

Example:

@media all and (monochrome) { … } // 출력 장치가 흑백이면 실행
@media all and (monochrome:0) { … } // 출력 장치가 흑백이 아니면 실행
@media all and (min-monochrome:2) { … } // 출력 장치가 흑백이고 2비트 이상이면 실행
@media all and (max-monochrome:2) { … } // 출력 장치가 흑백이고 2비트 이하이면 실행

resolution

출력 장치의 해상력에 대응한다. min/max 접두사는 사각형 아닌 픽셀(인쇄 장치)에도 대응하지만 접두사 없는 resolution 조건은 사각형 픽셀에만 대응한다. 조건의 값으로 dpi와 dpcm 단위를 사용할 수 있다.

• Value: <resolution>
• Applies to: bitmap media types
• Accepts min/max prefixes: yes

Example:

@media all and (resolution:96dpi) { … } // 1인치당 96개의 사각형 화소를 제공하면 실행
@media all and (min-resolution:96dpi) { … } // 1인치당 96개 이상의 화소를 제공하면 실행
@media all and (max-resolution:96dpi) { … } // 1인치당 96개 이하의 화소를 제공하면 실행

scan

TV의 스캔 방식에 따라 대응한다. progressive 값은 초당 60회 수준의 고화질 스캔에 대응하고 interlace 값은 초당 30회 수준의 일반 스캔에 대응한다. 대부분의 HDTV는 progressive와 interlace 방식을 모두 지원하고 있다.

• Value: progressive | interlace
• Applies to: “tv” media types
• Accepts min/max prefixes: no

Example:

@media tv and (scan:progressive) { … } // 초당 60회 수준의 고화질 스캔 방식 TV에 대응한다
@media tv and (scan:interlace) { … } // 초당 30회 수준의 일반 스캔 방식 TV에 대응한다

grid

출력 장치가 그리드 방식이면 대응한다. 그리드 방식은 타자기와 같이 고정된 글꼴만 사용하는 장치이다. 통상 출력 장치는 비트맵이 아니면 그리드 방식이다. 값은 정수 0과 1 뿐이고 0의 값은 비트맵 방식에 대응한다.

• Value: <integer> 0 | 1
• Applies to: visual and tactile media types
• Accepts min/max prefixes: no

Example:

@media all and (grid) { … } // 출력 장치가 그리드 방식이면 실행
@media all and (grid:0) { … } // 출력 장치가 그리드 방식이 아니면 실행
@media all and (grid:1) { … } // 출력 장치가 그리드 방식이면 실행

 

참고 자료:

CSS3 미디어쿼리 @media 규칙 이해.

CSS 방법론[SMACSS, BEM, OOCSS]