1) media_ex.html
<!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>
<link rel="stylesheet" href="./media_ex.css">
</head>
<body>
<div>
<header>
<h1><img src="IMG/diy_logo.jpg"></h1>
<div>
<h2>다이정글은 업계선두주자로 오랜 실무 경험과 축적된 전문지식을 자랑하는 DIY 가구 전문 쇼핑몰입니다.</h2>
<p>DIY와 리폼에 대해 생소한 소비자에게 리폼을 알리고 장려하며 초보자도 쉽게 도전할 수 있도록 다양한 콘텐츠와 소비자 중심의 쇼핑몰로 거듭나기 위해 노력하고 있습니다. 즐거운 DIY와 리폼, 다이정글과 함께 시작하세요!</p>
</div>
</header>
<div>
<ul>
<li>
<img src="IMG/diy_item01.jpg" alt="">
<h3>내츄럴 수저꽂이</h3>
<p>내추럴 수저꽃이 입니다. 군더더기 없는 깔끔한 박스 디자인에 앞면 아크릴에 귀여운 수저 그림이 그려져 있어요. 원목나무의 내추럴함을 느낄 수 있는 수저꽃이 입니다.</p>
</li>
<li>
<img src="IMG/diy_item02.jpg" alt="">
<h3>우드 사각 컵받침</h3>
<p>내추럴 수저꽃이 입니다. 군더더기 없는 깔끔한 박스 디자인에 앞면 아크릴에 귀여운 수저 그림이 그려져 있어요. 원목나무의 내추럴함을 느낄 수 있는 수저꽃이 입니다.</p>
</li>
<li>
<img src="IMG/diy_item03.jpg" alt="">
<h3>정글 삼나무 서류 보관함</h3>
<p>내추럴 수저꽃이 입니다. 군더더기 없는 깔끔한 박스 디자인에 앞면 아크릴에 귀여운 수저 그림이 그려져 있어요. 원목나무의 내추럴함을 느낄 수 있는 수저꽃이 입니다.</p>
</li>
</ul>
</div>
<footer>
COPYRIGHT(C) 2006-2015 DIYJUNGLE. Allrights reserved DIYJUNGLE
</footer>
</div>
</body>
</html>2) media.css(self)
* { margin: 0; padding: 0; box-sizing: border-box;}
a { text-decoration: none; color: inherit;}
li { list-style: none;}
body {
width: 100%;
max-width: 1200px;
margin: 0 auto;
border: 1px solid #ccc;
}
/* img { vertical-align: top;} */
ul img { width: 100%;}
ul {
display: flex;
justify-content: space-between;
padding: 20px;
}
li {
width: 32%;
}
@media screen and (max-width: 1025px) {
ul li:nth-child(3) {
display: none;
}
li {
width: 49%;
}
}
@media screen and (max-width: 769px) {
ul li:nth-child(2), ul li:nth-child(3) {
display: none;
}
header {
display: flex;
flex-direction: column;
align-items: center;
}
li {
width: 100%;
}
}
header, footer {
padding: 20px;
}
header {
display: flex;
align-items: center;
}
li h3 {
text-align: center;
padding: 10px;
background-color: bisque;
}
li p {
padding: 10px;
}
footer {
text-align: center;
background-color: #333;
color: #fff;
margin: 20px;
}
3)
4)
'노력이 좋아서' 카테고리의 다른 글
| <step21>'css_nots 홈페이지 따라하기' (0) | 2022.04.18 |
|---|---|
| <step21>'css_갤럭시 홈페이지 따라하기' (0) | 2022.04.18 |
| <step19>'css_flex실습' (0) | 2022.04.15 |
| <step19>'css_flex' (0) | 2022.04.14 |
| <step18>'css_hover,position_실습' (0) | 2022.04.13 |