오늘배운 내용은 body 전체의 background img를 넣는 방법과 9개의 박스 구역을 나누어서 background img를 넣는 법을 새로 알았다.
새로 배운 css
background-image: url();
background-size: cover; /* 배경 전체 */
background-repeat: no-repeat; /* 배경 반복 없음 */
background-attachment:fixed; /* 배경 고정 */<!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>
body{
background-image: url(https://png.pngtree.com/thumb_back/fh260/background/20210728/pngtree-green-simple-korean-traditional-pattern-background-image_752984.jpg);
background-size: cover; /* 배경 전체 */
background-repeat: no-repeat; /* 배경 반복 없음 */
background-attachment:fixed; /* 배경 고정 */
}
header{
background-color: rgba(95, 112, 112, 0.307);
text-align: center;
margin-bottom: 30px;
}
.box1, .box2, .box3, .box4, .box5, .box6, .box7, .box8, .box9 {
border: 1px solid black;
width: 300px;
height: 300px;
display: inline-block;
margin: -3px;
}
.line1, .line2, .line3 {
text-align: center;
}
.box1{
background-image: url(https://newsroom-prd-data.s3.ap-northeast-2.amazonaws.com/wp-content/uploads/2018/09/%EC%9D%B8%EA%B5%AC%EC%87%BC%ED%81%AC_%EC%84%9C%EC%9A%B8%EC%9D%B8%EA%B5%AC_3.jpg);
background-size: 300px 300px;
}
.box2 {
background-image: url(https://www.visitbusan.net/uploadImgs/files/cntnts/20191229153530528_ttiel);
background-size: 300px 300px;
}
.box3 {
background-image: url(https://cdn.travie.com/news/photo/201903/20822_3401_022.jpg);
background-size: 300px 300px;
}
.box4 {
background-image: url(https://www.ktsketch.co.kr/news/photo/201907/4254_15444_1925.gif);
background-size: 300px 300px;
}
.box5 {
background-image: url(https://cdn.daejonilbo.com/news/photo/202209/2023581_440450_2515.jpg);
background-size: 300px 300px;
}
.box6 {
background-image: url(https://www.sejong.go.kr/archive/subject/4/01.JPG);
background-size: 300px 300px;
}
.box7 {
background-image: url(https://www.incheon.go.kr/humanframe/theme/incheon/assets/image/incheon04/img-0101-01.jpg);
background-size: 300px 300px;
}
.box8 {
background-image: url(https://file.mk.co.kr/meet/neds/2018/02/image_readtop_2018_125340_15193490843215810.jpg);
background-size: 300px 300px;
}
.box9 {
background-image: url(https://img.hankyung.com/photo/202104/AKR20210430108100054_01_i_P4.jpg);
background-size: 300px 300px;
}
</style>
</head>
<body>
<header class="header">
<h2>display 활용하기</h2>
<h3>div 태그를 3*3 으로 배열하기</h3>
<h3>각각의 div 태그는 300px * 300px</h3>
</header>
<div class="line1">
<div class="box1">
</div>
<div class="box2">
</div>
<div class="box3">
</div>
</div>
<div class="line2">
<div class="box4">
</div>
<div class="box5">
</div>
<div class="box6">
</div>
</div>
<div class="line3">
<div class="box7">
</div>
<div class="box8">
</div>
<div class="box9">
</div>
</div>
</body>
</html>
꿈꾸는 개발자