Day10, 모바일, 웹브라우저 등 다양한 환경에서 적용할 수 있도록 하는 CSS코드인 미디어쿼리에 대해서 배웠다. 오늘 배운것을 복습 하기 전에 태그의 Inline/Block 속성 중 어떤 속성을 가지고 있는지 알파벳 T로 시작하는 태그에 대해서 복습하고 넘어가자.
Inline : <tbody></tbody>,<td></td>,<tfoot></tfoot>,<th></th>,<thead></thead>,<time></time>,<title></title>,<tr></tr>
Block :<table></table>
오늘 무엇을 배웠지?
미디어쿼리
- 미디어쿼리 : 웹브라우저(PC), 모바일 등 다양한 환경에서 웹사이트로써 기능할 수 있도록 만들어 주는 CSS 코드
미디어쿼리 코드
@media (min-width: 숫자px) and (max-width: 숫자px)
{.pc { }}
-> 원하는 형태를 .pc{}의 중괄호 안에 입력해 디자인 하면 됨.
└ 이때 .pc 는 내가 설정한 class 이름이기 때문에 각자가 설정한 class 이름으로 적용하면 됨!
ex)
HTML :
<h1 class="pc">PC HELLO WORLD</h1>
CSS :
@media (min-width: 100px) and (max-width: 599px)
{.pc {color: greenyellow; font-size: 10px; background-color: gray;}}
- 320px~768px 미만 : 스마트폰
768px~1024px미만 : 태블릿
1024px이상 : PC
미디어쿼리 사용시 주의점
① 미디어 쿼리 변경시 더 큰 px 에서 적용한 디자인이 상속됨 -> 일일이 확인하기 번거롭다면 pc 버전, 모바일 버전 css파일을 따로 만든다!
② 미디어 쿼리 사용시 <meta name="viewport" content="width=device-width, initial-scale=1.0">라는 코드를 적용해 주어야 한다.
└ "viewport":웹사이트 접속시 사용하는 기기 화면(PC, 모바일, 태블릿) , "width=device-width": 기기화면의 너비와 동일하게 설정, "initial-scale=1.0": 화면 비율은 1.0을 유지
- 미디어쿼리는 '검사'에서 확인할 때 웹브라우저의 창크기를 변화시켜보면서 확인 할 수 있다!
- "display: none;" : pc 사이즈 버전에서는 보여야 하지만, mobile 사이즈 버전에서는 안보여야 하고, mobile 사이즈 버전에는 보여야 하지만, pc 사이즈 버전에는 안보여야 할 때 사용하는 코드
.mobile { display: none;}
@media(min-width: 320px) and (max-width: 767px) {
.pc {display: none;}
.mobile {display: block; } }└이 때 mobile에 적용하는 display 속성은 inline, block 등 none 외의 값 어떤 것이라도 가능하지만 최대한 원래 태그의 속성값에 맞는 값으로 설정한다!
+++TIP!
- w3school 사이트의 CSS-RWD viewport에서 추가적 설명을 확인 할 수 있음
- mediaquery standard devices -> https://css-tricks.com/snippets/css/media-queries-for-standard-devices/ 사이트에서 각각 디바이스에 따른 화면 사이즈 확인 할 수 있다!
└ 모바일 portrait-세로모드 , landscape-가로모드 버전 - chrome ->검사-> elements 좌측의 디바이스 버전으로 모바일 버전에서 어떻게 표현되는지 확인할 수 있다!
- 모바일->태블릿->pc 버전으로 사이즈가 작은 영역에서 디자인해서 확장해 나가는 것이 상대적으로 역순보다 쉽다!
└
h1 { font-size: 20px; background-color: cyan;}
@media (min-width: 768px) {
h1 {font-size: 40px;background-color: plum;}}
@media (min-width: 1024px) {
h1 {font-size: 80px;background-color: pink;}}첫번째 h1 코드는 모바일 버전
첫번째 @media 코드는 태블릿 버전
두번째 @media 코드는 pc 버전으로 설정한 것 ->세가지 버전을 모두 디자인 하는 경우 따로 max-width를 설정하지 않아도 가능
그래서?
오늘은 눈에 띄는 변화를 한번에 확인할 수 있는 것에 비해 상대적으로 굉장히 쉬운 수업이었다. 그래서 어려운 것도 딱히 없었다. position과 animation에 너무 골머리를 앓았는지 미디어쿼리라는 개념은 이해도 쉽고 적용도 쉬운데다가 코드 적용에 따라 변화정도가 눈에 띄어서 시간 가는줄 모르고 수업을 들었다. 하지만 그런 생각이 들었다. 배우는 것은 쉽지만 적용할때는 머리가 아플 것 같다는 생각이... 결국에는 여러 버전을 만들때 사용하는 아주 기초적인 부분이기 때문에... 뭐 다음시간에 실습할 테니깐 실습해보고 더 생각하자!
sublime3를 이용해 오늘 만들어본 파일
https://github.com/hyeriJUNG/Daegu_AI_School/tree/main/0709
