- Mdia Query 기초
- 예제 1
- 예제 2
- css 처리 방법
1) Mdia Query 기초
웹 페이지를 보는 단말기의 해상도에 따라 출력되는 화면의 UI배치, 구성들이 달라지게 된다.
이를 적용시키려면 css style에 media query를 추가해 주면 된다.
<style>
div {
width: 1400px;
margin: auto;
height: 200px;
background: lightcoral;
}
@media screen and (min-width: 1500px) {
div {
background: lightgreen;
width: 90%;
}
}
@media screen and (min-width:768px) and (max-width:1499px) {
div {
width: 70%;
height: 300px;
background: lightseagreen;
}
}
@media screen and (max-width:767px) {
div {
width: 100%;
background: lightslategray;
}
}
</style>
위와 같이 @media를 사용해 너비가 1500px이상, 768~1499px, 0~767px 일 때 style을 적용할 수 있다.
2) 예제 1
<style>
.con-box {
width: 1200px;
margin: auto;
display: flex;
}
.con-box .box {
width: 400px;
height: 200px;
}
.con-box .box1 {
background: lightblue;
}
.con-box .box2 {
background: lightcoral;
}
.con-box .box3 {
background: lightgreen;
}
/* 0 ~ 1400px */
@media screen and (max-width:1400px) {
.con-box {
width: 90%;
/* 자신 너비 / 부모 너비 * 100 */
}
.con-box .box {
width: 33.333%;
}
}
@media screen and (max-width:1024px) {
.con-box .box1 {
width: 50%;
}
.con-box .box2 {
width: 25%;
}
.con-box .box3 {
width: 25%;
background: lightgrey;
}
}
@media screen and (max-width:600px) {
.con-box {
width: 100%;
flex-direction: column;
}
.con-box .box {
width: 100%;
}
}
</style>
이처럼 단순하게 color만 바꾸는 것이 아닌 display를 변경해 가로, 세로로 나열할 수도 있다.
3) 예제 2
<style>
#wrap {
width: 100%;
}
#header {
width: 100%;
background: #eee;
}
#header .inner {
width: 1200px;
background: #ddd;
margin: auto;
position: relative;
display: flex;
justify-content: space-between;
}
#header h1 {
padding: 4rem 0;
}
#header .nav {
width: 65%;
padding-top: 4rem;
padding-bottom: 4rem;
}
#header .nav .gnb {
display: flex;
}
#header .nav .gnb li {
width: 20%;
text-align: center;
height: 5rem;
line-height: 5rem;
}
#header .nav .gnb li:nth-child(odd) {
background: orange;
}
#header .nav .gnb li:nth-child(even) {
background: skyblue;
}
#header .all-menu {
position: absolute;
right: 1%;
top: 20%;
transform: translateY(-50%);
display: none;
}
#header .all-menu i {
font-size: 3.5rem;
}
#container {
width: 100%;
}
#container .inner {
width: 1200px;
display: flex;
margin: auto;
}
#content {
display: flex;
flex-wrap: wrap;
width: 50%;
}
#content article {
width: 25%;
height: 20rem;
box-sizing: border-box;
padding: 1.5rem;
}
#content article h2 {
font-size: 2rem;
}
#content article:nth-child(1) {
background: rgb(0, 100, 250);
}
#content article:nth-child(2) {
background: rgb(0, 100, 230);
}
#content article:nth-child(3) {
background: rgb(0, 100, 210);
}
#content article:nth-child(4) {
background: rgb(0, 100, 190);
}
#content article:nth-child(5) {
background: rgb(0, 100, 170);
}
#content article:nth-child(6) {
background: rgb(0, 100, 150);
}
#content article:nth-child(7) {
background: rgb(0, 100, 130);
}
#content article:nth-child(8) {
background: rgb(0, 100, 110);
}
#content article:nth-child(9) {
background: rgb(0, 100, 90);
}
#content article:nth-child(10) {
background: rgb(0, 100, 70);
}
#sideBar {
width: 50%;
height: 30%;
background: yellow;
box-sizing: border-box;
padding: 2rem;
}
#sideBar p {
font-size: 2rem;
}
#footer {
width: 1200px;
margin: auto;
}
#footer .inner {
width: 100%;
height: 150px;
background: gray;
}
@media screen and (max-width:1200px) {}
@media screen and (max-width:1023px) {
#header .inner {
width: 95%;
flex-direction: column;
text-align: center;
}
#header .nav {
width: 100%;
padding-top: 0;
}
#container .inner {
width: 100%;
display: block;
}
#content {
width: 100%;
}
#content article {
width: 50%;
}
#sideBar {
width: 100%;
}
#footer {
width: 100%;
}
}
@media screen and (max-width:600px) {
#header .nav .gnb {
flex-wrap: wrap;
}
#header .nav .gnb li {
width: 100%;
}
#header .all-menu {
display: block;
}
#content article {
width: 100%;
}
#sideBar {
display: none;
}
}
</style>
위에서부터 PC, 태블릿, 모바일 환경에서 각각 다르게 출력되는 것을 구현해 보았다.
4) css 처리 방법
4-1) css 하나에 태블릿, 모바일 작성
media query를 두 개로 나누어 작성하는 방법이다.
@media screen and (max-width:1023px) {
태블릿
}
@media screen and (max-width:600px) {
모바일
}
4-2) 태블릿, 모바일 css를 따로 작성 후 link
<link rel="stylesheet" href="css/tablet.css" media="all and (max-width: 1023.9px)">
<link rel="stylesheet" href="css/mobile.css" media="screen and (max-width: 600px)">tablet.css, mobile.css 파일을 만들게 되면 아래 코드처럼 media query를 작성하지 않아도 된다.
#header .nav .gnb li a {
color: white;
font-size: 2rem;
border-bottom: 1px solid lightgray;
padding: 0;
line-height: 3;
}
#header .nav .close {
display: block;
}
#header .all-menu {
display: block;
}