[CSS] 반응형 (@media)
2021. 12. 5. 18:01ㆍHTML&CSS&JavaScript/HTML&CSS
반응형
위 결과는 가로의 길이가 줄어들면 자동으로 아래로 내려 간다.
이거에 핵심 코드는
// 최대길이를 기준으로 하고 싶으면 max-width
// 최소길이를 기준으로 하고 싶다면 min-width 으로 하면 된다.
@media (max-width: 800px) {
}
아래는 해당 결과값의 풀 코드이다.
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
h1 {
font-size: 45px;
text-align: center;
border-bottom: 1px solid gray;
margin: 0;
padding: 20px;
}
body {
margin: 0;
}
#grid {
display: grid;
grid-template-columns: 150px 1fr;
}
ol {
border-right: 1px solid gray;
width: 100px;
margin: 0;
padding: 20px;
padding-left: 33px;
}
#right {
padding-left: 25px;
}
@media (max-width: 800px) {
#grid {
display: block;
}
ol {
border-right: none;
}
#right {
border-top: 1px solid red;
}
}
</style>
</head>
<body>
<h1 style="color: aqua">WEB</h1>
<div id="grid">
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
<div id="right">
<h2>CSS</h2>
<p id="p_tag">
Cascading Style Sheets (CSS) is a style sheet language used for
describing the presentation of a document written in a markup
language.[1] 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>반응형
'HTML&CSS&JavaScript > HTML&CSS' 카테고리의 다른 글
| [CSS] float 속성 / z-index (0) | 2021.10.14 |
|---|---|
| [CSS] 요소 위치 정하기 (0) | 2021.10.12 |
| [CSS] 블록요소 & 인라인 요소 (0) | 2021.10.11 |
| [HTML] <div> , <span> (0) | 2021.10.04 |
| [CSS] transition 속성 (0) | 2021.09.20 |