7월 9일 금

학습한 내용

미디어 쿼리에 대해서 학습했다. 미디어 쿼리란 접속 기기에 따라서 웹 페이지 해상도가 변환되도록 하는 작업이다. 대표적으로 반응형, 적응형 사이트인데 창의 크기에 따라서 웹 디자인이 최적화 시켜주는 것이다.

미디어 쿼리를 사용 할 때 위 명령어는 필수적으로 넣어주어야한다.
그래야 지정해둔 수치대로 스케일이 자연스럽게 적용이 된다고 한다.
head 태그 사이에 넣으면 된다.

접속하는 기기의 폭 넓이(width) 값 기준으로 구분하는데 평균적인 기기들의 width값이다.
더 다양하게 알아보고 싶으면 구글에 미디어 쿼리 사이즈 관련 구글링이나 크롬 개발자 모드에서
원하는 기기나 사이즈를 직접 확인 할 수 있다.

320px ~ 768px 미만 : 스마트폰
768px ~ 1024px 미만 : 태블릿
1024px ~ 이상 : pc

(크롬 개발자모드(f12)에서 확인하는 경로 이미지 첨부)

CSS

@media (최소값) and (최대값)

@media (min-width: 300px) and (max-width: 767px) {
.pc{
color: blue;
font-size: 20px;
background-color: yellow;
}
}

css코드인데 이런 식으로 사용한다. 주의할 사항은 앞전에 head사이에 메타값을 넣는 것과
클래스 속성을 상속 받기 때문에 미디어 명령어 앞뒤에 상속이 되는지 확인을 해야한다.

h1 {
font-size: 20px;
background-color: yellow;
}

/max-width 1024px 미만/

@media (min-width: 768px) {
h1 {
font-size: 40px;
background-color: pink;
}
}

@media (min-width: 1024px) {
h1 {
font-size: 80px;
background-color: gray;
}
}

이번 코드는 미디어 쿼리를 적용하는 2번째 방법이다. 앞의 방법보다는 응용된 수법이라고 하셨다. 그리고 코드가 조금 더 간략하게 표현이 가능해서 조금 더 좋은 코딩이라 할 수 있다.

그리고 실무팁을 주셨는데 웹 사이트를 만들 때 모바일-테블릿-pc순으로 작업을 하는 편이 수월하다고 하셨다. 사이즈가 작다보니 페이지도 간략화되어있어서 작은 부분 부터 만들어나가는 것이 경험상 효율적이라고 하셨다. 하지만 시간이 부족하여 이렇게 진행하기는 또 어려움이 있으실 것이라고 하신다.

또 각 버전별로 모바일 버전, pc버전 따로 css 파일을 분할하기도 한다고 한다. 그런데 네이버 처럼 특별한 경우가 아니라면 딱히 그럴 경우가 적다고 한다.

실습한 코드 첨부

<meta name="viewport" content="width=device-width, initial-scale=1.0">


<link rel="stylesheet" type="text/css" href="css/style.css">

<!-- <h1 class="pc">PC Hello World</h1>

<h1 class="mobile">Mobile Hello World</h1> -->


<h1>미디어쿼리 응용</h1>

html, body, h1 {
margin: 0;
padding: 0;
}

/*.pc {

color: red;
font-size: 50px;
background-color: pink;

}

.mobile {
display: none;
}

@media (min-width: 320px) and (max-width: 767px) {
.pc {
display: none;

}

.mobile {
	display: block;    /*none 만 아니면 된다*/
}

}*/

/* 접속자의 기기를 구분하는 방법은 폭 넓이(width) 값으로 구분 할 수 있다.

320px ~ 768px 미만 	: 스마트폰
768px ~ 1024px 미만 	: 태블릿
1024px ~ 이상 		: pc 

*/

/@media (min-width: 300px) and (max-width: 767px) {
.pc{
color: blue;
font-size: 20px;
background-color: yellow;
}
}/

/ 클래스 속성을 상속 받으니까 다르게 적용하고 싶으면 항상 앞 뒤 코드를 살펴야한다.
그게 번거롭다면 버전별로 css파일을 분할하는 방법도 있다. /

/@media (min-width: 100px) and (max-width: 599px) {
.pc {
color: green;
font-size: 10px;
background-color: gray;
}
}/

h1 {
font-size: 20px;
background-color: yellow;
}

/max-width 1024px 미만/

@media (min-width: 768px) {
h1 {
font-size: 40px;
background-color: pink;
}
}

@media (min-width: 1024px) {
h1 {
font-size: 80px;
background-color: gray;
}
}

학습한 내용 중 어려웠던 점 또는 해결못한 것들
미디워 쿼리도 px단위 말고 %단위로 사용하면 조금 더 수월한 방법이 있지 않을까?

해결방법 작성
생각을 해보아야겠다.

학습 소감
스마트폰이 나온지 얼마안되었을 때는 소규모의 웹사이트들은 대부분 pc버전으로 보여졌다. 그래서 직접 확대를 해야했고 클릭 오류 같은 불편한 점이 많았다. 하지만 스마트폰이 좀 더 발전하면서 그런 사이트들이 많이 줄어드는 것을 평소에도 느낄 수 있었다. 이렇게 직접 관련 내용을 공부를 하다보니 이런 편리함들이 뒤에서는 고생하시는 분들이 많이 계시는 것이라는 것을 알게 되었다.