미디어쿼리
특정 조건(단말기의 유형, 화면 해상도, 뷰포트 너비 등)에서 특정 스타일만 적용하도록 만들어주는 기능이다.
노트북, 아이패드, 아이폰, 갤럭시 등 화면 크기에 따라 스타일이 바뀔 수 있도록 적용할 수 있다.<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>미디어 쿼리</title> <style> .container { display: flex; flex-wrap: wrap; /* 한곳에 묶어주기 위해 사용! */ justify-content: space-around; box-sizing: border-box; border: 5px solid black; height: 500px; width: 100%; font-size: 18px; font-style: italic; } .item { margin: 50px; width: 400px; } /* 화면크기 1000px 이하에서 작동 */ @media screen and (max-width:1000px) { body { background-color:firebrick; } .container { height: 800px; } } /* 화면크기 600px 이하에서 작동 */ @media screen and (max-width:600px) { body { background-color: green } } </style> </head> <body> <div class="container"> <div class="item"> two days, and six voice memos away from another heartache sitting alone in an empty bed, spent the whole night wide awake one day, and I am in season two. a show I don't even care about I can't believe all the things that came out of her pretty mouth my body's a haunted house. filled with the ghost of the past can you blame me for it? how was I supposed to know I want a do over so I can go before her I don't blame her for it. </div> <div class="item"> this is what young girls do back where I started, feeling sad and lonely again my body's a haunted house. filled with the ghost of the past can you blame me for it? how was I supposed to know I want a do over so I can go before her I don't blame her for it. this is what young girls do back where I started, feeling sad and lonely again </div> </div> </body> </html>
미디어쿼리.. 꼭 있어야 하는 기능인거같아요 ㅎㅎ