반응형 디자인
Media Query (미디어 쿼리)
여러가지 형태의 화면이 존재할 때 사용 ex)가로모드
🟢 화면 가로길이가 800px 이상이면 div 요소 사라지기
<style>
/* screen width < 800px */
@media(max-width:800px) {
div{
display:none;
}
}
</style>
</head>
<body>
<div>
Responsive
</div>cf) 화면 가로길이가 800px 이하면 div 요소 사라지기
@media(min-width:800px)
☑️ 창 크기 확인하기
개발자도구 or command(⌘)+option(⌥)+U
우측상단에서 확인 가능 (창 크기 조절시 변화)
🟣 미디어 쿼리 실습
화면 가로길이가 80px보다 작아지면...
1. 우측 글 아래로 옮기기
= id가 grid인 요소를 block으로 바꾸기
@media(max-width:800px){
#grid{
display: block;
}
}2. 세로 구분선 없애기
= ol의 border-right 옵션 변경
@media(max-width:800px){
ol{
border-right:none;
}
}3. 가로 구분선 없애기
= h1의 border-bottom 옵션 변경
@media(max-width:800px){
h1{
border-bottom:none;
}
}결과
⚫️ 전체 코드
<!doctype html>
<html>
<head>
<title>WEB1 - CSS</title>
<meta charset="utf-8">
<style>
body{
margin:0;
}
a{
color:black;
text-decoration:none;
}
h1{
font-size:45px;
text-align:center;
border-bottom:1px solid gray;
margin:0;
padding:20px;
}
ol{
border-right:1px solid gray;
width:100px;
margin:0;
padding:20px;
}
#grid{
display: grid;
grid-template-columns: 150px 1fr;
}
#grid ol{
padding-left:33px
}
#grid #article{
padding-left:25px;
}
@media(max-width:800px){
#grid{
display: block;
}
ol{
border-right:none;
}
h1{
border-bottom:none;
}
}
</style>
</head>
<body>
<h1><a href="index.html">WEB</a></h1>
<div id="grid">
<ol>
<li><a href="1.html">HTML</a></li>
<li><a href="2.html">CSS</a></li>
<li><a href="3.html">JavaScript</a></li>
</ol>
<div id="article">
<h2>CSS</h2>
<p>
Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language. Although most often used to set the visual style of web pages and user interfaces written in HTML and XHTML, the language can be applied to any XML document, including plain XML, SVG and XUL, and is applicable to rendering in speech, or on other media. Along with HTML and JavaScript, CSS is a cornerstone technology used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications.
</p>
</div>
</div>
</body>
</html>
잘하자!