html에 들어가 있는 이 부분이 반응형의 시작
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
content=”width=device-width
디바이스의 너비에 맞춰서 css를 넣어줘라
디바이스 사이즈 링크
[미디어 쿼리 구문]
미디어 쿼리란?
어떤 특정 사이즈에서 이렇게 하고 싶다 라고 하는 것임
//0 ~ 720px 까지
@media screen and (max-width : 720px) {
body {background-color: red;}
}
=>
@charset ‘utf-8’ 처럼 특별한 것에는 @ 를 붙인다
screen 모든 스크린 장치를 의미함
폭을 적을때는 괄호를 열고 적는다.
// 721 ~ 989 까지
@media screen and (min-width:721px) and (max-width: 989px){
body {background-color: blue;}
}
//990 이상~
@media screen and (min-width: 990px) {
body {background-color: orange;}
}
왜 하단의 모델을 더 많이 씀
@media screen and (min-width : 720px) {
body {
background-color: red;
}
.box {
width: 400px;
}
}
@media screen and (min-width:780px) {
body {
background-color: green;
}
.box {
flex-direction: column;
// 시 특정 크기 이상 아래로 떨어지게 할 수 있음
width: auto;
// 초기값으로 돌아가고 싶을 때~!
/* 100%를 쓰면 패딩이 들어가 있을때 하단에 스크롤이 생김 */
}
}
@media screen and (min-width: 990px) {
body {
background-color: orange;
}
}
주의사항!
/* 미디어 쿼리 안과 밖의 명시도를 맞춰주어야 한다.
그래야지 미디어 쿼리의 우선순위가 높아짐 */
계속 헷갈리는 column 과 row : column 이 기니까~ 수평이라고 하자~!
grid-template-columns: 1fr;
/* column : 수평 방향 */
grid-template-rows: repeat(4, 1fr);
/* row : 수직 방향 */
.mother {
max-width: 1400px;
margin: 0auto;
/* 최대치 값 1400px 일때 늘리지 않고 중앙 정렬 */
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(1, 1fr);
}
반응형을 잘 짤 수있게 우선순위 명시와 css 터를 닦는 것이 중요하다~!
참고로 이미지를 너무 첨부하고 싶은데, 이게 내돈내산한 Cloudways여서 서버가 무겁지 않을까 하는 괜시러운 걱정에… 자제해 봅니다.ㅋㅋㅋ 백알못이지만 혹시나..