사용자의 환경에 따라 웹페이지 디자인이 변경되는 것 (웹에서 앱으로 볼 때 등)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title><title>
<style>
div{
border:10px solid green;
font-size:60px;
}
screen width > 800px
div{
display: none;
}
</style>
</head>
<body>
<div>
Responsive
</div>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title><title>
<style>
div{
border:10px solid green;
font-size:60px;
}
screen width > 800px
div{
display: none;
}
</style>
</head>
<body>
<div>
Responsive
</div>
</body>
</html>
*screen width > 800px : 스크린의 크기가 800픽셀보다 클 때 (이해차원으로 쓴 내용) 를 조건으로 설정하고 싶다면
<style>
div{
border:10px solid green;
font-size:60px;
}
@media(min-width:800px) {
div{
display: none;
}
}
</style>
<style>
div{
border:10px solid green;
font-size:60px;
}
@media(min-width:800px) { : min (최소) = screen width > 800px
div{
display: none;
}
}
</style>
위와 같이 설정해주면 된다. 반대로 screen width <800px 을 설정하고싶다면
* @media(max(최대)-with:800px){} 으로 설정해주면 된다.
<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: 160px;
margin: 0;
padding: 20px;
}
#grid{
display: grid;
grid-template-columns: 210px 1fr;
}
#grid ol{
padding-left: 33px;
}
#article{
padding-left: 30px;
}
@media(max-width:720px){
#grid{
display: block;
}
ol{
border-right: none;
}
h1{
border-bottom: none;
}
}
</style>
</head>
<body>
<h1><a href="index.html">SEVENTEEN</a></h1>
<div id="grid">
<ol>
<li><a href="1.html">HIPHAP TEAM</a></li>
<li><a href="2.html">VOCAL TEAM</a></li>
<li><a href="3.html">PERPOMONCE TEAM</a></li>
</ol>
<div id="article">
<h2>HIPHAP TEAM</h2>
<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: 160px;
margin: 0;
padding: 20px;
}
#grid{
display: grid;
grid-template-columns: 210px 1fr;
}
#grid ol{
padding-left: 33px;
}
#article{ : 본문을 크기에 따라 조정
padding-left: 30px;
}
@media(max-width:720px){ : 본문 (id="article") 밑에 적는다. screen width < 720 일때
#grid{
display: block; : grid를 block으로 설정
}
ol{
border-right: none; : 리스트 오른쪽에 있는 줄 없앰
}
h1{
border-bottom: none; : 제목 밑에 있는 줄 없앰
}
}
</style>
</head>
<body>
<h1><a href="index.html">SEVENTEEN</a></h1>
<div id="grid">
<ol>
<li><a href="1.html">HIPHAP TEAM</a></li>
<li><a href="2.html">VOCAL TEAM</a></li>
<li><a href="3.html">PERPOMONCE TEAM</a></li>
</ol>
<div id="article">
<h2>HIPHAP TEAM</h2>
'cording > 생활코딩' 카테고리의 다른 글
| [Java Script] HTML 과 JS 태그, 이벤트 (0) | 2022.03.02 |
|---|---|
| [CSS] 코드의 간결화 (0) | 2022.03.02 |
| [CSS] Grid 그리드 활용하기 (0) | 2022.03.01 |
| [CSS] 박스 모델 그리고 응용하기 (0) | 2022.03.01 |
| [CSS] 선택자의 기본 (0) | 2022.03.01 |
