반응형
이노
옷걸이처럼 걸어 놓을 수 있는 블루투스 스피커 '이노'를 홍보하는 사이트를 만들어보려고 합니다. 위에 있는 도면을 따라 반응형 웹사이트를 만들어주세요.
- 그리드는 반응형 그리드 과제에서 만든 것을 그대로 사용하면 됩니다!
- 초록색 선은 padding, 빨간색 선은 margin, 파란색 선은 가운데 정렬(가로 혹은 세로)을 뜻합니다.
- 모든 사진은 background-image를 통해 넣었습니다.
- In'o 글자의 font-size는 20px 글자색은 white입니다.
- In'o 글자가 속한 div 태그의 background-color 는 #353535입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>이노</title>
<link rel="stylesheet" href="Styles.css">
</head>
<body>
<div class="navbar col">
<span class="logo"> IN'O </span>
</div>
<div class="banner col"></div>
<div class="info col">
<div class="helper"></div><div class="info-container">
<div class="label">Portfolio</div>
<h2> Make Hardware Soft</h2>
<p>IN'O is a hanger-type bluetooth speaker that does not merely focus on its audio features.
It naturally blends into your life through lean US and minimal design.</p>
</div>
</div>
<div class="img-div1 col"></div>
<div class="img-div2 col">
<div class="helper"></div><a href="#"> VIEW MORE</a>
</div>
<div class="img-div3 col"></div>
</body>
</html>body {
margin: 0;
font-family: Arial, sans-serif;
}
.navbar {
background-color: #353535;
width: 100%;
height: 60px;
}
.navbar .logo {
font-size: 20px;
color: white;
padding-left: 30px;
padding-right: 30px;
line-height: 60px;
}
.banner {
width: 100%;
height: 350px;
background-image: url("main_img.jpg");
background-size: cover;
background-position: center center;
}
.info {
background-color: white;
width: 100%;
height: 320px;
}
.info .helper {
display: inline-block;
height: 100%;
vertical-align: middle;
}
.info .info-container {
display: inline-block;
vertical-align: middle;
padding-left: 30px;
padding-right: 30px;
}
.info .label {
font-size: 16px;
color: #4a4a4a;
}
.info h2 {
font-size: 20px;
color: #1b1b1b;
margin-top: 10px;
margin-bottom: 30px;
}
.info p {
font-size: 16px;
color: #7a7a7a;
margin: 0;
}
.img-div1 {
background-image: url("img1.jpg");
background-size: cover;
background-position: center top;
width: 100%;
height: 385px;
}
.img-div2 {
background-image: url("img2.jpg");
background-size: cover;
background-position: center top;
width: 100%;
height: 200px;
text-align: center;
}
.img-div2 a {
color: white;
font-weight: bold;
border: 4px solid white;
padding: 9px 40px;
text-decoration: none;
vertical-align: middle;
}
.img-div2 .helper {
display: inline-block;
height: 100%;
vertical-align: middle;
}
.img-div3 {
background-image: url("img3.jpg");
background-size: cover;
background-position: center top;
width: 100%;
height: 200px;
}
@media(min-width: 768px) {
.col {
float: left;
}
.navbar {
background-color: #353535;
width: 100%;
height: 60px;
}
.banner {
background-image: url("main_img.jpg");
background-size: cover;
background-position: center center;
width: 100%;
height: 562px;
}
.info {
background-color: white;
width: 100%;
height: 282px;
}
.info .info-container {
padding-left: 65px;
padding-right: 65px;
}
.img-div1 {
background-image: url("img1.jpg");
background-size: cover;
background-position: center top;
width: 50%;
height: 360px;
}
.img-div2 {
background-image: url("img2.jpg");
background-size: cover;
background-position: center top;
width: 50%;
height: 180px;
}
.img-div3 {
background-image: url("img3.jpg");
background-size: cover;
background-position: center top;
width: 50%;
height: 180px;
}
}
@media(min-width: 992px) {
.navbar {
background-color: #353535;
width: 100%;
height: 60px;
}
.banner {
background-image: url("main_img.jpg");
background-size: cover;
background-position: center center;
width: 50%;
height: 700px;
}
.info {
background-color: white;
width: 50%;
height: 350px;
}
.info .info-container {
padding-left: 65px;
padding-right: 65px;
}
.img-div1{
background-image: url("img1.jpg");
background-size: cover;
background-position: center top;
width: 25%;
height: 350px;
}
.img-div2 {
background-image: url("img2.jpg");
background-size: cover;
background-position: center top;
width: 25%;
height: 175px;
}
.img-div3{
background-image: url("img3.jpg");
background-size: cover;
background-position: center top;
width: 25%;
height: 175px;
}
}본 내용은 Codeit의 '웹 퍼블리싱' 강의를
참고하여 작성한 내용입니다.
반응형
'Front-end > HTML&CSS' 카테고리의 다른 글
| [웹 퍼블리싱] 03. 반응형 웹 퍼블리싱 (0) | 2021.02.09 |
|---|---|
| [웹 퍼블리싱] 02. HTML/CSS 핵심개념 (0) | 2021.02.09 |
| [웹 퍼블리싱] 02. HTML/CSS 핵심개념 (0) | 2021.02.09 |
| [웹 퍼블리싱] 02. HTML/CSS 핵심개념 (0) | 2021.02.08 |
| [웹 퍼블리싱] 02. HTML/CSS 핵심개념 (0) | 2021.02.08 |