TIL
[TIL] CSS Flex, Grid 문제
thegreatjy
2023. 10. 15. 18:31
728x90
Flex, Grid 문제
- 문제 출처 : 김기수, <코딩 자율학습 HTML + CSS + 자바스크립트>
- 07/selfcheck/ing/self1.html 파일을 사용해 다음과 같은 플렉스 박스 레이아웃을 만들어 보세요.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.flex-container{
display: flex;
flex-wrap: wrap;
width: 500px;
justify-content: space-between;
}
.flex-item{
width: 30%;
height: 240px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item"><img src="./images/1.jpg" alt=""></div>
<div class="flex-item"><img src="./images/2.jpg" alt=""></div>
<div class="flex-item"><img src="./images/3.jpg" alt=""></div>
<div class="flex-item"><img src="./images/4.jpg" alt=""></div>
<div class="flex-item"><img src="./images/5.jpg" alt=""></div>
<div class="flex-item"><img src="./images/6.jpg" alt=""></div>
</div>
</body>
</html>- 07/selfcheck/ing/self2.html 파일을 사용해 다음과 같은 그리드 박스 레이아웃을 만들어 보세요.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.grid-container{
display: grid;
width: 500px;
grid-template-rows: 100px 100px 100px;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr; /* fr : 비율 fraction */
grid-gap: 10px;
}
.grid-item{
background-color: hotpink;
}
.grid-item:nth-child(2n){
background-color: mediumvioletred;
}
.item2{
grid-column: 2/4;
grid-row: 1/3;
}
.item3, .item5{
grid-column: 4/6;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item item1">1</div>
<div class="grid-item item2">2</div>
<div class="grid-item item3">3</div>
<div class="grid-item item4">4</div>
<div class="grid-item item5">5</div>
<div class="grid-item item6">6</div>
<div class="grid-item item7">7</div>
<div class="grid-item item8">8</div>
<div class="grid-item item9">9</div>
<div class="grid-item item10">10</div>
</div>
</body>
</html>- 2번 문제의 정답 코드를 이용해 해상도가 500px 이하일 때만 다음처럼 보이게 만들어 보세요.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.grid-container {
display: grid;
width: 500px;
grid-template-rows: 100px 100px 100px;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr; /* fr : 비율 fraction */
grid-gap: 10px;
}
.grid-item {
width: 100%;
background-color: hotpink;
}
.grid-item:nth-child(2n) {
background-color: mediumvioletred;
}
.item2 {
grid-column: 2/4;
grid-row: 1/3;
}
.item3,
.item5 {
grid-column: 4/6;
}
/* 화면 너비가 500px이하인 경우 */
@media (max-width: 500px) {
.grid-container {
display: grid;
width: 100%;
grid-template-rows: 100px 100px 100px 100px 100px;
grid-template-columns: 1fr 1fr 1fr; /* fr : 비율 fraction */
grid-gap: 10px;
}
.item3,
.item5 {
grid-column: unset;
}
.item10 {
grid-column: 1/4;
}
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item item1">1</div>
<div class="grid-item item2">2</div>
<div class="grid-item item3">3</div>
<div class="grid-item item4">4</div>
<div class="grid-item item5">5</div>
<div class="grid-item item6">6</div>
<div class="grid-item item7">7</div>
<div class="grid-item item8">8</div>
<div class="grid-item item9">9</div>
<div class="grid-item item10">10</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.large_square{
background-color: yellow;
width: 300px;
height: 200px;
position: relative;
border-color: black;
border-width: 1px;
border-style: solid;
left: 16%;
}
.square{
background-color: blue;
position: relative;
left: 50%;
top: 20%;
width: 50px;
height: 50px;
border-color: black;
border-width: 1px;
border-style: solid;
}
.circle{
background-color: red;
position: relative;
left: 60%;
top: 10%;
width: 50px;
height: 50px;
border-color: black;
border-width: 1px;
border-style: solid;
border-radius: 50%;
}
.flex-container{
display: flex;
flex-wrap: wrap;
width: 600px;
position: relative;
color: white;
top: 10px;
}
.flex-item{
background-color: cornflowerblue;
width: 20%;
}
.flex-item:nth-child(2n){
background-color: darkblue;
}
.flex-item:nth-child(1){
width: 25%;
}
.flex-item:nth-child(2){
width: 50%;
}
.flex-item:nth-child(3){
width: 12.5%;
}
.flex-item:nth-child(4){
width: 12.5%;
}
.grid-container{
display: grid;
grid-template-rows: repeat(4, 25fr);
grid-template-columns: repeat(4, 25fr);
position: relative;
top: 20px;
width: 600px;
height: 600px;
}
.grid-item{
border-style: solid;
border-width: 1px;
border-color: white;
position: relative;
width: 100%;
height: 100%;
background-image: url(./images/gridExample3/1.jpg);
color: white;
}
.grid-item:nth-child(2n){
background-image: url(./images/gridExample3/2.jpg);
}
.itemA{
grid-row: 1/4;
vertical-align: text-bottom;
}
.itemB{
grid-column: 2/5;
}
.itemC{
grid-row: 2/4;
}
.itemF{
grid-row: 2/5;
grid-column: 4/5;
}
.itemG{
grid-column: 1/4;
}
.vcenter{
display: flex;
align-items: center;
}
.vbottom{
display: flex;
align-items:end;
}
</style>
</head>
<body>
<div class="large_square">
<div class="square"></div>
<div class="circle"></div>
</div>
<div class="flex-container">
<div class="flex-item">A</div>
<div class="flex-item">B</div>
<div class="flex-item">C</div>
<div class="flex-item">D</div>
</div>
<div class="grid-container">
<div class="grid-item itemA vcenter">A</div>
<div class="grid-item itemB vcenter">B</div>
<div class="grid-item itemC vcenter">C</div>
<div class="grid-item itemD vbottom">D</div>
<div class="grid-item itemE vbottom">E</div>
<div class="grid-item itemF">F</div>
<div class="grid-item itemG">G</div>
</div>
</body>
</html>728x90