학습내용
https://blog.teamtreehouse.com/which-page-layout
- Adaptive Layout (적응형 웹사이트) : 브라우저의 크기를 줄이면 뚝뚝 끊기면서 웹사이트의 레이아웃 구조가 바뀜. 고정값을 갖고있는 px단위로 제작하는 기법
- Responsive Layout (반응형 웹사이트): 브라우저의 크기를 줄이면 자연스럽게 리사이징 되다가 모바일 버전의 레이아웃 형태로 바뀜. %단위를 주로 사용함
1. 미디어 쿼리
기본적으로 margin, padding 값을 초기화 시켜준다.
css↓
html, body {
margin: 0;
padding: 0;
}
h1 {
margin: 0;
padding: 0;
}<h1 class="pc">PC Hello World</h1>css↓
.pc {
color: red;
font-size: 50px;
background-color: pink;
}
/* 320px ~ 768px미만 : 스마트폰 */
/* 768px ~ 1024px미만 : 태블릿 */
/* 1024pc 이상 : PC */
/* 미디어 쿼리 */
/* 브라우저 사이즈가 미디어 쿼리에서 지정한 크기에 도달하면 미디어 쿼리에서 지정한 css로 바뀐다. */
/* 최소값 min을 정해두었기 때문에 600px 이하로는 다시 원래 지정한 css로 돌아간다. */
@media (min-width : 600px) and (max-with: 767px) {
.pc {
color: blue;
font-size: 20px;
background-color: yellow;
}
}
@media (min-width :100px) and (max-width: 599px) {
.pc {
color: green;
font-size: 10px;
background-color: grey;
}
}
1-2) 미디어 쿼리를 사용할 때 주의할 점
① background-color를 반드시 설정하기
미디어 쿼리에서 배경색을 따로 설정 해 주지 않으면, pc버전으로 적용한 배경색이 그대로 적용(상속)된다.
.pc {
color: red;
font-size: 50px;
background-color: pink;
}
@media (min-width : 600px) and (max-with: 767px) {
.pc {
color: blue;
font-size: 20px;
/*background-color: yellow;*/ /* background-color를 따로 설정해주지 않으면 pc버전에서의 배경색이 상속되므로 반드시 확인 */
}② 반드시 viewport 메타태그를 작성해야한다.
반드시 html의 head영역에 다음의 meta태그를 작성해야한다.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
viewport 메타태그를 작성하면, 사용하는 디바이스의 넓이에 맞워서 컨텐츠가 표시 되므로 반드시 사용해야한다.
- https://www.w3schools.com/css/css_rwd_viewport.asp
구글 검색창에 w3school viewport라고 검색한다.
2. 유용한 사이트
1) 기기별 width사이즈
- https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
각 기기별 width 사이즈를 확인할 수 있다.
- screen : 사용자가 접속하는 디바이스의 화면 자체를 스크린이라고 한다.
- portrait : 스마트폰을 세로로 들었을 때의 화면
- landscape : 스마트폰을 가로로 들었을 때의 화면
2) chrome 사이트에서 모바일 css코드 확인하는 방법
- 마우스 오른쪽 클릭 → 검사 → 스마트폰 모양 아이콘을 클릭하면,
스마트폰에서 보여지는 화면으로 확인할 수 있다.
css↓
.pc { color: red; font-size: 50px; background-color: pink; } @media (min-width : 320px) and (max-with: 767px) { .pc { color: blue; font-size: 20px; background-color: yellow; } }
- 기본 pc버전의 검사에서 미디어 쿼리를 확인하기 위해서는 브라우저 크기를 줄여서 모바일 버전으로 변경된 뒤에 확인이 가능하다.
케스케이딩이 일어났을 때와 같이 pc버전으로 적용된 부분은 취소선이 그어져 있고, 모바일 버전의 css코드가 나타난다.
3. 미디어쿼리 실무팁
1) pc버전과 mobile버전에서 보여지는 컨텐츠가 다를때 설정하는 방법
<h1 class="pc">PC Hello World</h1> <!-- mobile버전에서는 보이지 않도록 -->
<h1 class="mobile">mobile Hello World</h1> <!-- pc버전에서는 보이지 않도록 -->css↓
.pc {
color: red;
font-size: 50px;
background-color: pink;
}
.mobile {
display: none; /* pc버전에서는 보여지면 안된다. */
}
@media (min-with: 320px) and (max-width: 767px) {
.pc {
display: none;
}
.mobile {
display: block; /* inline이나 inline-block등 none외에 다른 속성값을 입력하면 된다. */
}
}일반 pc버전 일 때
브라우저 크기를 줄여서 모바일용 미디어쿼리가 적용되었을 때
2) 모바일-태블릿-pc 순서로 미디어쿼리 작성하기
pc버전과 모바일 버전을 둘 다 만들어야 할 때,
복잡한 형식의 pc버전을 먼저 만드는 것 보다 모바일 버전을 먼저 만들고 (간단하게 정리되어 있는 버전을 먼저 만드는 것) 태블릿, pc버전의 순서로 확장시켜 나가는 것이 효율적이며 일반적이다.
<h1>미디어쿼리 응용</h1>css↓
/* 모바일 버전을 먼저 만든다. */
h1 {
font-size: 20px;
background-color: yellow;
}
@media (min-width: 768px) {
h1 {
font-size: 40px;
background-color: pink;
}
}
/* min-width이상으로 설정되어 있으므로, 미디어쿼리 부분이 pc버전, 외부영역이 모바일 버전이다. */
@media (min-width: 1024px) {
h1 {
font-size: 0px;
background-color: grey;
}
}
/* min-width가 1024px인 미디어쿼리를 추가하게 되면 앞에 작성된 768px 미디어 쿼리의 max-width값은 자동적으로 1024px미만이 된다. */
/* 미디어쿼리 두 개 작성하게 되면서,
마지막 미디어쿼리는 pc버전, 첫번째 미디어 쿼리는 태블릿 버전, 그 외부영역은 모바일 버전으로 작성된다. */
/* 이 순서로 작성하게 되면 코드 분량이 많이 줄어든다는 장점이 있다. */