웹사이트를 모바일,태블릿 환경에 맞게 자연스러운 변화를 줄 때 사용되는 CSS코드.

1) 학습 내용

REVIEW)
https://blog.teamtreehouse.com/which-page-layout

적응형 웹사이트

ex)KIDSGAO사이트 - http://sisikiller.dothome.co.kr/
브라우저 폭을 줄였을 때 뚝뚝 끊어지면서 레이아웃이 변화하는 구조.

반응형 웹사이트

ex)덴마크쇼핑몰 - http://sisikiller.dothome.co.kr/
브라우저 폭을 줄였을 때 공간 자체가 자연스럽게 resize되면서 모바일 버전에 맞춰 레이아웃 형태가 바뀌는 구조.

m.naver.com 와 같이 앞에 m이 붙어있는 홈페이지는 무엇인가?
모바일 버전용 웹사이트를 따로 제작한 것이다. 즉, pc버전용 html파일이 따로 있고, 모바일용 html파일이 있는 것이다.

주로 pc버전과 모바일 버전의 레이아웃이 180도 다른 경우에 웹사이트를 별도로 제작하는 경우가 많은 편이다.

미디어쿼리

.pc {
color: red;
font-size: 50px;
background-color: pink;
}

.mobile {
display: none;
}

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

}
- 320px ~ 768px : 스마트폰
- 768px ~ 1024px : 태블릿
- 1024px 이상~ : PC

브라우저 폭을 줄였을 때 미디어 쿼리로 지정해 둔 특정 지점에 도달하게 되면 pc의 css는 미디어쿼리 안쪽에 작성된 코드를 기반으로 적용된다.

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

min/max-width값 설정을 통해 pc 버전과 태블릿 버전에 대한 각각 맞춤형 css 작업을 할 수 있다.

미디어쿼리사용 주의점

pc버전의 미디어쿼리를 모바일 버전에서 다르게 적용해야 할 때, 미디어쿼리 바깥에서 작성된 CSS코드를 매번 확인해 가면서 변경해주어야 한다.

그렇지 않으면 바깥의 코드 설정 값이 미디어쿼리에 그대로 상속이 된다.

번거롭다면, pc/모바일 버전용 파일을 따로 만드는 방법도 있다.

미디어쿼리를 사용한다면 반드시 넣어주어야 하는 메타태그가 있다(디폴트값)

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

• viewport=웹사이트의 접속하는데 사용되는 기기 화면
• width=device-width=웹사이트의 width값은 디바이스의 width 값으로 적용시키겠다.
• initial-scale=1.0=비율은 항상 1.0을 유지하겠다.
  참고) https://www.w3schools.com/css/css_rwd_viewport.asp

여러 디바이스(휴대폰,태블릿,노트북 등)의 width 값을 알아 볼 수 있다.
참고) https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

우리가 스마트폰 사용할 때 가로모드/세로모드가 있는데

• portrait: 사용자가 스마트폰을 세로로 들었을때의 화면 자체
• landscape: 사용자가 스마트폰을 가로로 들었을때의 화면 자체

일반적으로 세로 화면을 적용하는 경우가 대부분이며, 아니면 orientation을 사용하지 않고 새로운 미디어쿼리 기준점을 추가해서 portrait와 landscape에 대응함

미디어쿼리 실무팁

웹사이트 작업 시, PC와 Mobile 버전 각각에 맞는 텍스트 정보를 제공해야 하는 경우

• display를 이용(none)
• h1 태그의 기본 display는 block
• 768px 이상(Mobile display: none) ↔ 320px 이상 768px 미만(PC display: none)

미디어쿼리 응용 – 복잡도에 따른 제작 우선순위

대부분 실무에서는 넉넉한 시간 내에 개발하기 보다, 제한된 시간 내에 개발을 마쳐야 하는 경우가 다수이다. 즉, 시간을 단축시킬 필요가 있다.

쉽게 생각하자면, 깨끗한 방을 어지럽히는 것과, 이미 어지러진 방을 깨끗하게 정리하는 것 중 선택을 해 보자. 둘 중 더 쉬운 것은 전자일 것이다. 간단한 것을 복잡하게 만드는 것이 반대로 하는 것보다 쉽기 때문에, 모바일 형태를 먼저 만든 후에 태블릿, PC 순으로 기획을 하는 것이 효율적이다. (복잡도: 모바일 < 태블릿 < PC)
장점 : 코드 분량 감소

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;
}
}

어려웠던점

비교적 앞서 했던 내용 보다는 이해가 잘 갔던거 같습니다. 하지만 요즘은 대부분 적응형과 반응형 레이아웃을 혼합해서 사용한다고 배웠는데 반응형/적응형 레이아웃을 단독으로 사용하여야만 하는 경우가 있는지에 대해서는 잘 이해가 가지 않았습니다.

해결방법

오탈자가 있었는지 웹페이지에 코딩 결과가 잘 나타나지 않았었는데 참고 홈페이지에 나와있는 코드를 copy&paste 하여 해결하였습니다.두 문장을 서로 비교해보니 대소문자의 오탈자가 있음을 확인하였습니다.

학습소감

롤러블, 폴더블 스마트폰과 같이 점점 다양한 폼펙터의 디바이스들이 출시 되면서 앞으로 또 아직은 존재하지 않지만, 새로운 레이아웃이 생겨날 수 도 있겠다고 생각이 들었습니다.