[배운내용]
<시작하기 전>
- 적응형 웹사이트 : 브라우저 크기를 줄였을 때 레이아웃들이 뚝뚝 끊겨가면서 리사이징되고 레이아웃이 변경되는 웹사이트 - 고정된 px단위를 사용하여 제작
- 반응형 웹사이트 : 브라우저 크기를 줄였을 때 레이아웃들이 부드럽게 리사이징되고 레이아웃이 변경되는 웹사이트 - %를 사용하여 제작
- m.something.com 처럼 www가 아니라 m로 시작하는 사이트의 경우는 모바일용 웹사이트를 별도의 html로 제작하는 경우이다. 이는 웹사이트와 모바일버전이 매우 다른 경우 사용한다.
미디어쿼리(Media Query)
: 미디어 타입(media type)에 따라 표현식(expression)을 부여하는 것으로, 표현식은 width, height와 같은 미디어 특성(media feature)들을 이용하여 그 특성들의 상태에 따라 다른 스타일 시트를 적용한다.
개념 참고 출처: https://offbyone.tistory.com/121
미디어쿼리를 입력할 때는 적용되는 범위를 작성해야한다. 브라우저의 width값으로 하고자 한다면 아래와 같이 입력한다.
@media (min-width: 300px) and (max-width:767px) {
.pc{color: ~; font-size: ~; background-color: ;}
} : @media에 적용될 범위를 width값으로 설정해주고, 그 안에 .pc 클래스에 대해 설정된 범위 안에서 변화 될 color,font-size,background-color를 설정해주었다.
- <디바이스 종류에 따른 화면크기>
320px ~ 768px 미만 : 스마트폰
768px ~ 1024px 미만 : 태블릿
1024px 이상 : PC
미디어쿼리를 사용할 때의 주의점
(1) 미디어쿼리 바깥 쪽에 사용된 css코드를 확인해가며 작성해야한다.
예를 들어, 미디어쿼리 바깥 쪽에는 background-color가 지정되어있는데, 미디어쿼리 안에 변경되는 background-color를 지정하지 않으면 바깥 쪽에 있는 배경 색상을 상속 받게된다.
이런 과정이 번거롭다면 pc용 css파일과 모바일용 css파일을 따로 만들어주는 방법도 있다.
(2) 항상 head에 메타태그를 아래와 같이 설정해주어야 한다.
<meta name="viewport" content="width=device-width, initial-scale=1.0">- viewport : 접속된 기기의 화면
- width=device-width : width값은 기기의 width값으로 지정하겠다.
- initial-scale : 비율은 1.0으로 지정하겠다.
※ orientation : 스마트폰 사용시 가로모드와 세로모드가 있는데, portrait의 경우는 사용자가 스마트폰을 세로모드 그대로 들었을 때를 지정하는 속성값이고, landscape는 사용자가 스마트폰을 가로로 들었을 때 지정하는 속성값이다.
일반적으로는 세로모드로 적용하는 경우가 많으며,
orientation을 지정하기보다 아래에 mediaquery를 새로운 크기로 지정해서 가로모드를 설정하는 경우가 많다.
※ 만든 모바일용 웹사이트가 모바일환경에서 잘 구현되는지 확인하기 위해서,
- 닷홈 홈페이지에서 도메인을 받아 모바일로 접속해보는 방법과
(가장 정확하지만, 실험해볼 수 있는 모바일 기기가 한정된다는 단점이 있음) - 크롬의 검사기능에서 'Element' 왼쪽에 위치한 디바이스모양 아이콘을 클릭하여 원하는 기기의 사이즈화면에서 확인해보는 방법이 있다.
※ 미디어 쿼리 코드는 적용되는 크기 밖에서는 보이지않는다. 즉, (min-width: 300px) and (max-width:767px)로 적용되는 크기를 지정했을 경우, max가 넘는 767이상의 브라우저 사이즈에서는 크롬 검사를 통해 css코드에 @media 코드가 표시되지 않는다. 반대로 적용되는 크기로 브라우저 크기를 줄일 경우 코드가 표기된다.
Display를 사용한 미디어쿼리
display는 블록과 인라인 요소의 특징을 바꾸기 위해서 사용하는 코드였다. 하지만 display의 사전적의미는 '전시하다', display값을 none을 준다면 화면에 안보이게 할 수 있다.
같은 사이트라도 PC와 모바일에 각각 다른 문구를 표시해야하는 경우가 생길 수 있다. 이럴 때 display를 이용해 모바일용 문구가 PC화면에서 보이지 않게, PC용 문구가 모바일화면에서 보이지 않게 설정할 수 있다.
.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;
}
}
-> "이러한 기능들은 복잡하고 번거롭기 때문에 개발자에게 유쾌한 작업이라 할 수 없다. 그렇기때문에 기획단계에서 pc와 모바일버전 웹사이트에 대한 계획이 중요하다."
미디어쿼리 작성 순서(기법)
-> "복잡한 것을 간결하고 단순하게 만드는것보다 단순한 것을 복잡하게 확장하는 것이 더 쉬운 작업이다. 그래서 강사님의 경우는 개발 전 모바일버전의 html부터 기획해달라고 요청하고, 그 후에 모바일버전을 기반으로 추가된 기능을 가진 pc나 태블릿버전 html을 제작한다"
/Mobile.ver/
h1{
font-size: 20px;
background-color: yellow;
}
/Tablet.ver/
@media (min-width: 768px) {
h1{
font-size: 40px;
background-color: hotpink;
}
}
/PC.ver/
@media (min-width: 1024px) {
h1{
font-size: 80px;
background-color: gray;
}
}
[어려웠던 점]
orientationd에서 가로모드,세로모드를 따로 설정하는 부분이 완벽히 숙지되지는 않았다.
[해결방법]
아직은 강사님께서 중요한건 아닌듯 넘어갔기 때문에 일단은 오늘 배운부분만 이해를 하고 다음에 응용할 때 다시 공부해봐야 할 것같다.
[학습소감]
이제는 모바일 화면을 구성하는 것이 필수적인 과정이기 때문에 오늘 내용은 중요한 부분이라고 생각된다. 아무리 웹사이트를 잘 만들어도 모바일에서 잘 구현되지 않는다면 큰 문제가 될 것이다.
