서론
일정이 너무나 밀렸다. 이럴 줄 알았으면 진작 마우스를 바꾸는 것인데, 다소 후회되는 감이 적잖다.
일단 오늘 분량은 적은 편이라고 하니 빠르게 진행하도록 하겠다.
이번 일자는 반응형 코드 학습이다.
적응형 웹 vs 반응형 웹
아무리봐도 비슷하게 들리는 두 용어. 그러나 이 둘은 명백히 다른 의미를 지닌 웹 사이트 제공 방식이다.
- 적응형 웹(Responsive Web Design)
접속하는 기기에 따라 PC용 웹사이트, 테블릿용 웹사이트, 모바일용 웹사이트를 따로 보여주는 기법이다.
HTTP GET의 user-agent에서 사용자가 어떤 기기를 쓰는지 확인 후, 해당 기기에 맞추어서 해당 뷰포트에 최적화된 페이지로 넘겨준다.
여러 템플릿을 기반으로 하기에, 필요한 것만 다운로드 받으면 되기에 용량이 작다는 특징이 있다. - 반응형 웹(Adaptive Web Design)
하나의 웹사이트에서 PC, Tablet, Mobile 등 접속하는 기기의 화면 크기에 맞게 사이트가 자동으로 반응하는 기법이다.
미디어 쿼리 기능을 이용해 뷰포트 크기 변화에 반응 후, 각종 레이아웃 및 요소의 크기를 실시간으로 맞춤형에 가깝게 변화시킨다.
하나의 템플릿을 기반으로 하기에, 기기별 콘텐츠를 전부 다운 받아야 하기에 용량이 크다는 특징이 있다.
즉, 하나의 템플릿을 기반으로 모든 기기를 지원하는지(반응형), 아니면 여러 템플릿을 기반으로 여러 기기를 지원하는지(적응형)에 대한 차이가 있다고 할 수 있다.
뷰포트 태그
앞서 말했던 것처럼 적응형 웹과 반응형 웹 모두 뷰포트라는 것을 사용한다. 이러한 뷰포트는 사용자가 보는 웹페이지의 영역을 말한다. 즉, 사용자가 PC 웹페이지의 크기를 줄이면 뷰포트 또한 따라서 작아진다. 그리고 이러한 뷰포트는 임의적인 크기 조절 뿐만 아니라, 기기마다 차이가 있기에 천차만별이라고 할 수 있다.
<head>
<meta name="viewport" content="속성1:값1", "속성2:값2", "속성3:값3"...>
</head>이러한 뷰포트의 기본적인 문법은 다음과 같다. 그리고 속성과 값으로 여러 가지가 있다.
| 뷰포트 속성 | 정보 |
| width: 값 | 뷰포트의 너비를 지정함. 기본값: 980px 특수값: width=device-width(기기의 가로 폭으로 뷰포트 크기를 맞춤) |
| height: 값 | 뷰포트의 높이를 지정함. 기본값: auto 특수값: height=device-height(기기의 세로 폭으로 뷰포트 크기를 맞춤) |
| user-scalable: 값 | 사용자에 의한 웹페이지 확대 및 축소 기능 사용 여부를 결정함. 기본값: yes(사용자가 웹페이지를 확대 및 축소 할 수 있음) 다른값: no(사용자가 웹페이지를 확대 및 축소할 수 없음) |
| initial-scale: 값 | 처음 페이지에 접속했을 때 화면 확대 비율 수준을 지정함. 기본값: 1 다른값: 0~10 사이의 값을 지정하며, 숫자가 높을수록 더 확대된 화면을 보여줄 수 있다. |
| minimum-scale: 값 | 웹페이지 축소율의 최소값을 지정함. 기본값: 0.25 (25%라고 생각하면 됨.) 다른값: 0~10 사이의 값을 지정할 수 있지만, 1일 경우 축소가 이뤄지지 않는다. |
| maximum-scale: 값 | 웹페이지 확대율의 최대값을 지정함. 기본값: 1.6 (160%라고 생각하면 됨.) 다른값: 0~10 사이의 값을 지정할 수 있지만, 1일 경우 확대가 이뤄지지 않는다. |
그리고 이러한 뷰포트에 적합한 이미지 크기 변경의 경우, 이미 3일차에서 설명했던 태그인 picture를 사용하면 된다.
<picture>
<source media="(min-width:1400px)" srcset="img_500x700.png">
<source media="(min-width:900px)" srcset="img_300x450.png">
<source media="(min-width:100px)" srcset="img_100x200.png">
<img src="img_100x200.png" alt="대충 크기 별 다양한 이미지입니다." style="width:auto;">
</picture>사실 이번 뷰포트 메타 태그 내용의 경우 본의 아니게 3일차에서 설명한 부분이 적잖게 있다. 만약 추후 다시 확인하고 싶다면 프로그래머스 웹앱 데브코스 3일차 TIL의 멀티미디어 목차를 확인하면 된다.
미디어 쿼리
pc, 모바일, 태블릿에도 대응/적응하는 웹사이트를 만들 때 사용되는 CSS 구문이다. 쉽게 말하자면 화면 크기, 해상도, 방향, 장치 종류에 따라 각기 다른 스타일(텍스트의 크기, 레이아웃의 배열 등)을 적용할 수 있는 구문이다.
<link rel="stylesheet" media="print" href="style-print.css" />
<link rel="stylesheet" media="screen and (max-width: 550px)" href="style-phone.css" />@media 기기유형 연산자 (규칙) {
CSS코드
}이러한 미디어 쿼리의 기본적인 적용법은 총 2가지이다.
하나는 HTML 태그 중 link 태그 내부에 'media' 속성을 사용하여서 원하는 유형과 조건을 지정하는 것이다.
다른 하나는 CSS 파일이나 <style> 태그 내부에 @media 형식으로 유형과 조건을 직접 적어넣는 것이다.
참고로 HTML 태그에 style을 쓰는(위의 link 태그와는 다르다) 인라인 스타일에서는 미디어 쿼리 적용이 안 된다.
그리고 기기유형, 연산자, 규칙(속성)을 사용하면 기기마다 각기 다른 크기를 보여줄 수 있다.
기기유형(media type)
| 기기유형 | 설명 |
| all | 모든 장치 |
| 말 그대로 인쇄 장치(프린터 용) | |
| screen | print에 해당하지 않는 스크린이 있는 나머지 장치 |
미디어 타입, 기기 유형, 미디어 타입 등 다양하게 불리운다. 여기서는 기기유형이라고 하겠다.
기본값은 all로, 한때는 다양한 기기유형이 있었다. tv, tty, projection, handheld, braille, embossed, aural, speech 등. 그러나 이는 미디어 쿼리 레벨3 규격 이후로 사장되었다.
https://www.w3.org/TR/mediaqueries-4/#media-types
이유는 다양한 장치를 구별하는 방법으로 충분하지 않은 것으로 입증되었기 때문이다. 또한 시대가 흐르면서 각 장치가 서로에게 영향을 받고 통합되면서 이렇게 된 것이기도 하다. 결국, 지금은 위의 3개만이 남게 되었다. (물론 나머지도 여전히 CSS 내부에 남아 있지만, 쓰지 않는 것이 권장 사항이다.)
연산자
| 연산자 | 설명 |
| and | 앞뒤로 연결된 조건이 참이어야 작동. 다수의 조건을 추가할 때 사용. |
, (쉼표) |
앞뒤로 연결된 조건 중 하나만 참이어도 작동. 동일한 스타일 유형을 적용시키고 싶은 쿼리가 있을 때 사용. |
| not | 미디어 쿼리가 거짓일 때만 작동. 반드시 기기유형을 정의해줘야 한다. 참고로 조건 앞에 not을 붙임으로서 특정 조건이 거짓일 때만 작동시킬 수도 있다. |
| only | 전체 쿼리가 일치할 때만 스타일을 적용할 수 있도록 함. 반드시 기기유형을 정의해줘야 한다. 오래된 브라우저가 스타일을 엉뚱하게 적용시키지 않도록 하기 위한 목적으로 사용. 최신 브라우저에는 영향을 미치지 않기에 사용하지 않아도 됨. |
여기서 only는 미디어 쿼리가 한때는 기기유형만 있고 규칙(속성)이 없었기에 존재하는 연산자이다. only를 집어넣을 경우 구형 브라우저에서는 이를 기기유형으로 인식하고 해당 쿼리의 스타일을 적용하지 않는다.
그럼으로써 미디어 쿼리가 지원되는 환경에서만 미디어 쿼리를 적용 시킬 수 있다. 즉, 웹페이지가 구형 브라우저에서 난장판이 되는 것을 막을 수 있다.
규칙(속성)
https://wit.nts-corp.com/2023/03/29/6664
https://naradesign.github.io/media-query.html
해당 내용은 이 두 블로그를 참고했다.
미디어 특성, 미디어 규칙, 미디어 속성 등으로도 불리운다. 여기서는 그냥 이해하기 쉽도록 규칙 혹은 속성이라고만 하겠다.
- discrete: 별도의 의미를 지닌 값을 갖고 있다.
true, false 일 수도 있고 특정 키워드의 집합일 수도 있다. - range: 크기에서 값을 가지고 온다.
흔히들 px, em, cm 혹은 다양한 수치를 써서 크기를 지정하는 그것과 같다.
특이하게도 일부 range는 min, max 접두사를 앞에 붙일 수도 있다. 해당 접두사를 이용하면 최대값과 최소값을 지정할 수 있다. 즉, 비교 연산자(30em <= width <= 50em)와 같은 효과를 낼 수 있다.
비교 연산자 내용이 나와서 그런데, 사실 미디어 쿼리 레벨 4가 오면서 min, max 사용 없이 비교 연산자만으로도 min&max 미디어 쿼리를 사용할 수 있다!
@media (min-width: 300px) and (max-width: 500px) { CSS내용 }
@media (300px <= width <= 500px ) { CSS내용 }위와 아래는 같은 의미로, 사실상 레벌 4부터는 보기 편한 작성이 가능해졌다!
어쨌든 다시 돌아와서, 이러한 규칙은 discrete와 range 유형으로 나뉜다.
| 조건문 | 설명 | 값 | 파생 조건(min&max 등) |
| width height |
뷰포트의 너비/높이가 기준 | [range - 길이] px, em, cm 등 |
min-width, min-height max-width, max-height |
| aspect-ratio | 뷰포트의 가로세로 비율이 기준 | [range - 비율] 너비/높이 (16/9 같은 종횡비 혹은 1920/1080 같은 해상도 사용 가능) (사실 1920/1080의 비율은 16/9임.) |
없음 |
| device-width device-height |
장치의 너비/높이가 기준 | [range - 길이] px, em, cm 등 |
min-device-width, min-device-height max-device-width, max-device-height |
| device-aspect-ratio | 장치의 가로세로 비율이 기준 | [range - 비율] 너비/높이 (16/9 같은 종횡비 혹은 1920/1080 같은 해상도 사용 가능) (사실 1920/1080의 비율은 16/9임.) |
min-device-aspect-ratio, max-device-aspect-ratio |
| orientation | 뷰포트의 방향이 기준 | [discrete] landscape(가로), portrait(세로) |
없음 |
| color | 장치의 색상 기능이 기준 (색상 비트 수가 기준) |
[range - 정수] 비트 수 |
min-color, max- color |
| color-index | 장치의 색상 인덱스가 기준 (표현 가능 색상 개수가 기준) |
[range - 정수] 색 개수 |
min-color-index, max-color-index |
| hover | 기본 장치(예. 마우스)가 호버된 상태가 기준 (기본 장치가 호버를 지원하는지에도 쓰임) |
[discrete] none(호버 아님. 그리고 터치 스크린처럼 정확도가 낮은 기기의 포인팅도 none임), hover(호버 상태. 종종 터치 스크린의 길게 누르기도 hover로 인식.) |
any-hover (값이나 사용법은 같음) (그리고 기본 장치 외에도 모든 장치를 감지함) |
| pointer | 기본 포인팅 장치 (예. 마우스) 의 정확도가 기준 (기본 포인팅 장치를 가지고 있는지에도 쓰임) |
[discrete] none(포인팅 장치 없음), coarse(터치스크린 같은 정확도가 제한된 장치 사용), fine(마우스 같은 정확한 장치 사용) |
any-pointer (값이나 사용법은 같음) (다만, 기본 장치가 아닌 모든 장치를 확인) |
| monochrome | 장치가 흑백일 때 픽셀 당 비트 수가 기준 | [range - 정수] 비트 수 |
min-monochrome, max-monochrome |
| resolution | 장치의 해상도가 기준 | [range - 해상도] dpi/dpcm |
min-resolution, max-resolution |
| scan | TV의 영상 출력 방식이 기준 | [discrete] progressive(고화질), interlace(일반) |
없음 |
| grid |
그리드 기능을 지원하는 장치일 경우가 기준 (타자기처럼 고정된 글꼴만 쓰는 장치) |
[discrete] 0(그리드 아님. 비트맵), 1(그리드) |
없음 |
다만, width를 고정하면 반응형 매구간마다 고정값을 변경해야하는 불편함이 있을 수도 있다. 그렇기에 width보다는 max-width를 사용한 최대 너비를 적극적으로 활용하자.
height도 마찬가지로 고정해버리면 유동적인 높이에 대응을 못할 수도 있다. min-height를 사용한 최소 높이를 적극 활용하자.
| pointer:none | pointer:coarse | pointer:fine | |
| hover:none | 키보드, D패드 등 | 스마트폰, 터치 스크린 등 | 일반 스타일러스 기기(와콤 신티크, 와콤 기타 기기) |
| hover:hover | [출처 넣을 공간이 없어서 여기에 넣었어요.] | 닌텐도 컨트롤러, 키넥트 등 | 마우스, 터치 패드, 고급 스타일러스 기기(서피스, 갤럭시 탭, 아이패드, 와콤 인튜어스 프로 등) |
그리고 중간에 있는 hover와 pointer의 조합을 이용하면 해당 기본 장치를 탐지하거나, 더 다양한 환경에 맞추어서 웹페이지를 제공할 수도 있다.
width / height
/* 뷰포트 너비가 768px 이상 '그리고' 1024px 이하면 실행 */
@media all and (min-width: 768px) and (max-width: 1024px) { CSS내용 }
/* 뷰포트 너비가 딱 768px 이거나 '또는' 딱 1024px이면 실행 */
@media all and (width: 768px), (width: 1024px) { CSS내용 }
/* 뷰포트 너비가 768px 이상 '그리고' 1024px 이하가 '아니면(not)' 실행 */
@media not all and (min-width: 768px) and (max-width: 1024px) { CSS내용 }뷰포트의 너비/높이가 기준.
aspect-ratio
/* 뷰포트가 딱 16, 높이가 딱 9 비율이면 실행 */
@media all and (aspect-ratio: 16/9) { CSS내용 }
/* 뷰포트가 16/9 비율 이상이면 실행 */
@media all and (min-aspect-ratio: 16/9) { CSS내용 }
/* 뷰포트가 16/9 비율 이하이면 실행 */
@media all and (max-aspect-ratio: 16/9) { CSS내용 }
/* 가로/세로 화면 비율이 1:1 이상일 때만 적용 */
@media screen and (min-aspect-ratio: 1/1) { CSS내용 }뷰포트의 가로세로 비율이 기준.
device-width / device-height
/* 장치의 너비가 딱 320px ‘그리고’ 높이가 딱 480px 이면 실행 */
@media all and (device-width: 320px) and (device-height: 480px) { CSS내용 }
/* 장치의 너비가 최소 320px 이상 ‘그리고’ 높이가 최소 480px 이상이면 실행 */
@media all and (min-device-width: 320px) and (min-device-height: 480px) { CSS내용 }장치의 너비/높이가 기준.
device-aspect-ratio
/* 스크린의 가로 세로 비가 딱 16:10일 때 적용 */
@media screen and (device-aspect-ratio: 16/10) { CSS내용 }
/* 장치의 너비가 딱 16, 높이가 딱 9 비율이면 실행 */
@media all and (device-aspect-ratio: 16/9) { CSS내용 }
/* 장치의 너비가 16/9 비율 이상이면 실행 */
@media all and (min-device-aspect-ratio: 16/9) { CSS내용 }
/* 장치의 너비가 16/9 비율 이하이면 실행 */
@media all and (max-device-aspect-ratio: 16/9) { CSS내용 }장치의 가로세로 비율이 기준.
orientation
/* 세로 모드(portrait). 뷰포트의 높이가 너비에 비해 상대적으로 클 때 작동 */
@media all and (orientation: portrait) { CSS내용 }
/* 가로 모드(landscape). 뷰포트의 너비가 높이에 비해 상대적으로 클 때 작동 */
@media all and (orientation: landscape) { CSS내용 }뷰포트의 방향이 기준.
color
/* 장치가 컬러를 지원하면 실행 */
@media all and (color) {CSS내용 }
/* 장치가 컬러가 아니면 실행 */
@media all and (color: 0) { CSS내용 }
/* 장치가 4비트 '이하' 색상이면 실행 */
@media all and (min-color: 4) { CSS내용 }
/* 장치가 딱 8비트 색상이면 실행 */
@media all and (color: 8) { CSS내용 }
/* 장치가 8비트 '이상' 색상이면 실행 */
@media all and (min-color: 8) { CSS내용 }
/* 장치가 8비트 '이하' 색상이면 실행 */
@media all and (max-color: 8) { CSS내용 }장치의 색상 기능이 기준.
(색상 비트 수가 기준)
color-index
/* 장치가 색상 색인(index) 테이블을 사용하면 실행 */
@media all and (color-index) { CSS내용 }
/* 장치가 색상 색인 테이블을 사용하지 않으면 실행 */
@media all and (color-index: 0) { CSS내용 }
/* 장치가 딱 256 색을 지원하면 실행 */
@media all and (color-index: 256) { CSS내용 }
/* 장치가 256 이상 색을 지원하면 실행 */
@media all and (min-color-index: 256) { CSS내용 }
/* 장치가 256 이하 색을 지원하면 실행 */
@media all and (max-color-index: 256) { CSS내용 }장치의 색상 인덱스가 기준.
(표현 가능 색상 개수가 기준)
hover
/* 기본 장치의 요소 위에 사용자가 호버하지 않고 있음. 호버가 안 되는 기기에서 스타일을 따로 주는 방식으로도 가능. */
@media all (hover: none) { CSS내용 }
/* 기본 장치의 요소 위에 사용자가 호버함 */
@media all (hover: hover) { CSS내용 }
/* 사용중인 모든 장치 중 하나의 요소 위에 사용자가 호버하지 않고 있음. 호버가 안 되는 기기에서 스타일을 따로 주는 방식으로도 가능. */
@media all (any-hover: none) { CSS내용 }
/* 사용중인 모든 장치 중 하나의 요소 위에 사용자가 호버함 */
@media all (any-hover: hover) { CSS내용 }마우스가 호버(올려짐)된 상태가 기준.
(기본 장치가 호버를 지원하는지에도 쓰임)
참고로 해당 hover 미디어 쿼리는 모바일 환경에서 주로 쓰인다.
기존 선택자:hover 기능이 모바일에서는 호버 효과가 아주 잠깐 보이고 마는... 사실상 제대로 작동을 안 하기 때문이다.
그리고 번외로 any-hover라는 기본 장치가 아닌 모든 장치를 감지하는 규칙도 있다.
pointer
/* 기본 장치에 포인팅 장치가 없음 */
@media all (pointer: none) { CSS내용 }
/* 기본 장치에 포인팅 장치가 있으나, 터치 스크린처럼 정확도가 제한된 장치를 사용 */
@media all (pointer: coarse) { CSS내용 }
/* 기본 장치에 포인팅 장치가 있고, 마우스처럼 정확한 장치를 사용 */
@media all (pointer: fine) { CSS내용 }
/* 모든 장치 중 하나에 장치에 포인팅 장치가 없음 */
@media all (any-pointer: none) { CSS내용 }
/* 모든 장치 중 하나에 포인팅 장치가 있으나, 터치 스크린처럼 정확도가 제한된 장치를 사용 */
@media all (any-pointer: coarse) { CSS내용 }
/* 모든 장치 중 하나에 포인팅 장치가 있고, 마우스처럼 정확한 장치를 사용 */
@media all (any-pointer: fine) { CSS내용 }기본 포인팅 장치 (예. 마우스) 의 정확도가 기준.
(기본 포인팅 장치를 가지고 있는지에도 쓰임)
any-pointer라는 기본 포인팅 장치 확인을 넘어, 모든 장치를 인식하고 확인하는 규칙도 있다.
마우스와 터치가 둘 다 들어가 있는 경우, pointer는 기본 장치가 어느 거냐에 따라서 coarse와 fine을 판단할 것이다. 그러나 any-pointer는 기본 장치를 따지지 않기에 coarse와 fine 둘 모두 항상 사용하고 있다고 나올 것이다.
monochrome
/* 장치가 흑백이면 실행 */
@media all and (monochrome) { CSS내용 }
/* 장치가 흑백이 아니면 실행 */
@media all and (monochrome: 0) { CSS내용 }
/* 장치가 흑백이고 2비트 이상이면 실행 */
@media all and (min-monochrome: 2) { CSS내용 }
/* 장치가 흑백이고 2비트 이하이면 실행 */
@media all and (max-monochrome: 2) { CSS내용 }장치가 흑백일 때 픽셀 당 비트 수가 기준.
resolution
/* 최소 300dpi 이상 해상도를 지닌 장치에 적용 */
@media screen and (min-resolution: 300dpi) { CSS내용 }
/* 1인치당 딱 96개의 사각형 화소를 제공하면 실행 */
@media all and (resolution: 96dpi) { CSS내용 }
/* 1인치당 96개 이상의 화소를 제공하면 실행 */
@media all and (min-resolution: 96dpi) { CSS내용 }
/* 1인치당 96개 이하의 화소를 제공하면 실행 */
@media all and (max-resolution: 96dpi) { CSS내용 }장치의 해상도가 기준.
scan
@media all and (scan: progressive) { CSS내용 }
/* 초당 60회 수준의 고화질 영상 출력 방식 TV(혹은 모니터)에 대응한다 */
@media all and (scan: interlace) { CSS내용 }
/* 초당 30회 수준의 일반 영상 출력 방식 TV(혹은 모니터)에 대응한다 */TV의 영상 출력 방식이 기준.
참고로 interlace와 progressive는 유튜브 영상 화질을 살펴보다보면 나오는 1080i, 1080p의 뒷자리 영어에 해당된다. 더 정확하게는 interlace는 progressive와 다르게 30프레임으로 주사한다고 보면 된다. 당연하지만, 1080i가 interlace인 만큼 온전한 영상이라고 할 수 있는 progressive 방식의 1080p가 더 좋다.
grid
@media all and (grid) { CSS내용 }
/* 장치가 그리드 방식이면 실행 */
@media all and (grid: 0) { CSS내용 }
/* 장치가 그리드 방식이 아니면 실행 */
@media all and (grid: 1) { CSS내용 }
/* 장치가 그리드 방식이면 실행 */그리드 기능을 지원하는 장치일 경우가 기준.
(타자기처럼 고정된 글꼴만 쓰는 장치)
기기별 템플릿
/* 모든 기기 */
모든 해상도를 위한 공통 코드를 작성한다. 모든 해상도에서 이 코드가 실행된다.
/* 모바일 */
768px 미만 해상도의 모바일 기기를 위한 코드를 작성한다. 모든 해상도에서 이 코드가 실행됨. 미디어 쿼리를 지원하지 않는 모바일 기기를 위해 미디어 쿼리 구문을 사용하지 않는다.
/* 테블릿 */
@media all and (min-width: 768px) {
사용자 해상도가 768px 이상일 때 이 코드가 실행됨. 테블릿과 데스크톱의 공통 코드를 작성한다.
}
/* 테블릿 혹은 노트북 */
@media all and (min-width: 768px) and (max-width: 1024px) {
사용자 해상도가 768px 이상이고 1024px 이하일 때 이 코드가 실행됨. 아이패드 또는 비교적 작은 해상도의 랩탑이나 데스크톱에 대응하는 코드를 작성한다.
}
/* 데스크탑 */
@media all and (min-width: 1025px) {
사용자 해상도가 1025px 이상일 때 이 코드가 실행됨. 1025px 이상의 랩탑 또는 데스크톱에 대응하는 코드를 작성한다.
}조사하다가 발견한 템플릿이다. 그런데 이 템플릿. 꽤 오래전부터 나돌던 것 같다.
해당 내용이 담긴 블로그들이 2011년 이전에도 있는 거로 보아, 꽤 원시 고대 물건... 같다. 실 적용이 될지는 모르겠으므로 그냥 가다가 한 번 보는 정도가 맞지 않나 싶다.
각종 팁
내가 작성한 코드가 어떤 브라우저의 몇 버전까지 지원하는지 알려주는 사이트
- https://caniuse.com/
HTML 코드 및 CSS 속성을 학습하는 사이트
- https://developer.mozilla.org/ko/
사실 당연한 것이지만, 구글 검색은 영어로 하면 하면 편하면서도 정확성 높은 정보를 얻을 수 있다.
사족
분명 전날에 올렸어야 하는 내용인데 미디어 쿼리의 조건 부분이 한없이 길어지는 바람에 이렇게 늦게 올리게 되었다. 다음에는 이런 일이 없도록 해야 하는데... 일단, 하루 밀리는 건 어쩔 수 없다고 생각하고 주말이 되기 전까지는 복습 개념에 가깝게 접근하는 것이 맞을 것 같다.
난이도는 미디어 쿼리가 꽤 어려울 것이라고 생각했는데, 막상 파고 보니 생각보다는 별 것 아닌 느낌이다. 워낙 레퍼런스가 많고 하다보니 이해하는데는 그리 어렵지 않았다.(그렇다고 공부하는 게 쉬웠다는 건 아니다.)
그래도 미디어 쿼리에 대해 이렇게 상세하게 알아놓으니 추후 기초적인 부분에서 모르는 부분이 생기지는 않을 것 같다. 그리고 7일차의 경우에는 실습에 가까운 느낌이라서 그리 적을 것은 많지 않아 보인다. 느낀 점 위주로 서술되지 않을까 싶다.
'💻 종합 개발 주제 > 📚 웹앱 데브코스' 카테고리의 다른 글
| 8일차 데브코스 - 클라우딩 어플리케이션 엔지니어링 TIL (2) | 2024.01.06 |
|---|---|
| 7일차 데브코스 - 클라우딩 어플리케이션 엔지니어링 TIL (2) | 2024.01.05 |
| 5일차 데브코스 pt.2 - 클라우딩 어플리케이션 엔지니어링 TIL (2) | 2024.01.03 |
| 5일차 데브코스 pt.1 - 클라우딩 어플리케이션 엔지니어링 TIL (2) | 2023.12.23 |
| 4일차 데브코스 pt.2 - 클라우딩 어플리케이션 엔지니어링 TIL (2) | 2023.12.22 |
