Html/연습
그리드+반응형 연습
by SEOKIHOUSE
2023. 5. 26.
<!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>그리드+반응웹</title>
<style>
* {
padding: 0;
margin: 0;
}
li,
ul,
ol {
list-style: none;
}
a {
text-decoration: none;
}
.item {
background-color: coral;
border: 1px solid black;
}
@media screen and (max-width: 767px) {
#wrap {
width: 100%;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(7, 1fr);
}
.item {
background-color: rgb(124, 185, 165);
}
.item2 {
border: 1px solid black;
}
}
@media screen and (min-width: 768px) and (max-width: 959px) {
#wrap {
width: 100%;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(5, 1fr);
}
.item {
background-color: rgb(101, 153, 48);
}
.div1 {
grid-column: 1/5;
/* grid-row: 1; */
background-color: blueviolet;
}
.div2 {
/* grid-column: 1/5; */
background-color: bisque;
}
.div3 {
background-color: cyan;
}
.div4 {
background-color: currentColor;
}
.item2 {
border: 1px solid black;
}
}
@media screen and (min-width:960px) {
#wrap {
display: flex;
justify-content: center;
align-items: start;
}
.item2 {
border: 1px solid black;
}
}
</style>
</head>
<body>
<div id="wrap">
<div class="item div1">Lorem ipsum dolor sit amet, consectetur sum dolor sit amet, consectetur adipiscing sum
dolor sit amet, consectetur adipiscing adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Nibh tortor id aliquet lectus proin nibh. Semper quis lectus nulla at. Tellus in hac habitasse
platea dictumst vestibulum rhoncus est pellentesque. Magna eget est lorem ipsum dolor sit amet.</div>
<div class="item div2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Nibh tortor id aliquet lectus proin nibh. Semper quis lectus nulla at.
Tellus in hac habitasse platea dictumst </div>
<div class="item2"><img src="../images/zz.PNG" alt=""></div>
<div class="item2"></div>
<div class="item2"><img src="../images/zz.PNG" alt=""></div>
<div class="item2"><img src="../images/zz.PNG" alt=""></div>
<div class="item2"></div>
<div class="item2"><img src="../images/zz.PNG" alt=""></div>
<div class="item2"></div>
<div class="item2"></div>
<div class="item2"><img src="../images/zz.PNG" alt=""></div>
<div class="item2"></div>
<div class="item2"><img src="../images/zz.PNG" alt=""></div>
<div class="item2"><img src="../images/zz.PNG" alt=""></div>
<div class="item2"></div>
<div class="item div3"> maecenas accumsan lacus vel facilisis. Tellus in metus vulputate eu. Velit laoree
<img src="../images/zz.PNG" alt="">
</div>
<div class="item div4">t varius.</div>
</div>
</body>
</html>
