Stack/CSS
[CSS] Indigo (+ 반응형)
7ingout
2022. 4. 15. 14:31
indigo_media.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="shortcut icon" href="images/favicon.ico" type="image/x-icon"> <!-- 웹브라우저 주소창 홈페이지 이름 앞에 붙는 16X16 또는 32X32 아이콘 -->
<link rel="icon" href="images/favicon.ico" type="image/x-icon">
<style>
* { margin: 0 ; padding: 0; box-sizing: border-box; }
li { list-style: none; }
a { text-decoration: none; color: inherit; }
img { border: 0; vertical-align: top; }
.inner_con {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
body {
font-family: '나눔 고딕', sans-serif;
font-size: 14px;
line-height: 1.6;
color: #2d2d2d;
}
header {
display: flex;
justify-content: space-between;
height: 80px;
align-items: center;
padding-left: 20px;
}
.mobile {
display: none;
}
header ul {
display: flex;
}
header ul li {
padding: 0 20px;
}
img { width: 100%; }
.title {
display: flex;
padding: 30px 0;
align-items: center;
}
.title h2 {
color: #3f51b5;
font-size: 36px;
}
#weare .title h2 {
width: 30%;
position: relative;
}
#weare .title h2::after {
content: "";
display: block;
width: 3px;
height: 30px;
background: #ccc;
position: absolute;
top: 16px;
right: 50px;
}
#weare .title p {
width: 70%;
}
#weare ul {
display: flex;
}
#weare ul li {
width: 25%;
text-align: center;
}
#weare ul li img {
height: 60px;
width: auto;
}
#weare h3 {
padding: 30px;
color: #3f51b5;
}
section:not(#visual){
padding: 50px 0;
}
#work ul {
display: flex;
flex-wrap: wrap; /* 여러 줄 쓰겠다 */
}
#work ul li {
width: 25%;
position: relative;
overflow: hidden;
}
.bluebg {
position: absolute; /* absolute는 크기 지정 해줘야 함 */
top: 0;
left: 0;
background: rgba(63, 81, 171, 0); /* opacity 이용하면 글자까지 투명해짐, 안에 뭐 없으면 opacity도 가능 */
width: 100%;
height: 100%;
color: #fff;
transition: 0.5s;
}
.bluebg h3 {
position: absolute;
top: -100px;
left: 50px;
transition: 0.5s;
}
.bluebg p {
position: absolute;
top: -70px;
left: 50px;
transition: 0.5s;
}
#work ul li:hover .bluebg h3 {
top: 50px;
}
#work ul li:hover .bluebg p {
top: 80px;
}
#work ul li:hover .bluebg {
background: rgba(63, 81, 171, 0.5);
}
#blog {
display: flex;
align-items: flex-start;
}
#blog .title {
width: 35%;
}
#blog ul {
width: 65%;
display: flex;
justify-content: space-between;
}
#blog ul li {
width: 32.5%;
}
#contact {
display: flex;
align-items: flex-start;
}
#contact .title {
width: 35%;
}
#contact #formdiv {
width: 65%;
}
#inputdiv {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 200px;
}
#inputdiv input {
width: 45%;
line-height: 60px;
border: none;
border-bottom: 1px solid #ccc;
outline: none; /* 클릭했을 때 나타나는 테두리 없애기 */
}
#inputdiv textarea {
width: 45%;
border: none;
border-bottom: 1px solid #ccc;
outline: none; /* 클릭했을 때 나타나는 테두리 없애기 */
height: 183px;
}
#formdiv button {
width: 160PX;
height: 60px;
border: none;
outline: none;
background: #3f51b5;
color: #fff;
float: right;
}
footer {
text-align: center;
padding: 40px;
color: #3f51b5;
}
#work h2 {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
@media screen and (max-width: 1024px) {
.title {
text-align: center;
}
#weare .title{
flex-direction: column;
}
#weare .title h2::after {
display: none;
}
#weare ul {
flex-wrap: wrap;
}
#weare ul li {
width: 50%;
text-align: center;
padding: 20px 0;
}
#weare ul li p {
margin: 0 30px;
}
#work ul li {
width: 50%
}
#blog, #contact {
flex-direction: column;
align-items: center;
}
#blog ul {
width: 100%;
}
#contact #formdiv {
width: 100%;
}
#blog h2, #contact h2 {
width: 100%;
}
}
@media screen and (max-width: 768px) {
header ul {
display: none;
}
.mobile {
display: block;
}
.mobile span {
display: block;
width: 35px;
height: 5px;
background-color: #3f51b5;
margin: 4px;
margin-right: 20px;
}
#weare ul li {
width: 100%;
text-align: center;
padding: 20px 0;
}
#work ul li {
width: 100%
}
#blog ul {
flex-wrap: wrap;
}
#blog ul li {
width: 100%;
}
#inputdiv {
flex-wrap: nowrap;
height: 350px;
}
#inputdiv input {
width: 100%;
}
#inputdiv textarea {
width: 100%;
}
#formdiv button {
width: 120PX;
height: 50px;
}
}
</style>
</head>
<body>
<div id="wrap">
<header>
<h1>INDIGO</h1>
<nav>
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">WE ARE</a></li>
<li><a href="#">WORK</a></li>
<li><a href="#">BLOG</a></li>
<li><a href="#">CONTACT US</a></li>
</ul>
</nav>
<div class="mobile">
<span></span>
<span></span>
<span></span>
</div>
</header>
<div id="container">
<!-- 비쥬얼영역 -->
<section id="visual">
<img src="images/p-images/slide01.jpg" alt="">
</section>
<!-- 비쥬얼영역 /-->
<!-- WE ARE영역 -->
<section class="inner_con" id="weare">
<div class="title">
<h2>WE ARE</h2>
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.</p>
</div>
<ul>
<li>
<img src="images/s-images/promo01.png" alt="">
<h3>HOME</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</li>
<li>
<img src="images/s-images/promo02.png" alt="">
<h3>WE ARE</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</li>
<li>
<img src="images/s-images/promo03.png" alt="">
<h3>WORK</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</li>
<li>
<img src="images/s-images/promo04.png" alt="">
<h3>BLOG</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</li>
</ul>
</section>
<!-- WE ARE영역 /-->
<!-- WORK영역 -->
<section id="work">
<div class="title">
<h2>WORK</h2>
</div>
<ul>
<li>
<img src="images/p-images/work01.jpg" alt="">
<div class="bluebg">
<div>
<h3>Running</h3>
<p>WEB/PRINT</p>
</div>
</div>
</li>
<li>
<img src="images/p-images/work02.jpg" alt="">
<div class="bluebg">
<div>
<h3>Running</h3>
<p>WEB/PRINT</p>
</div>
</div>
</li>
<li>
<img src="images/p-images/work03.jpg" alt="">
<div class="bluebg">
<div>
<h3>Running</h3>
<p>WEB/PRINT</p>
</div>
</div>
</li>
<li>
<img src="images/p-images/work04.jpg" alt="">
<div class="bluebg">
<div>
<h3>Running</h3>
<p>WEB/PRINT</p>
</div>
</div>
</li>
<li>
<img src="images/p-images/work05.jpg" alt="">
<div class="bluebg">
<div>
<h3>Running</h3>
<p>WEB/PRINT</p>
</div>
</div>
</li>
<li>
<img src="images/p-images/work06.jpg" alt="">
<div class="bluebg">
<div>
<h3>Running</h3>
<p>WEB/PRINT</p>
</div>
</div>
</li>
<li>
<img src="images/p-images/work07.jpg" alt="">
<div class="bluebg">
<div>
<h3>Running</h3>
<p>WEB/PRINT</p>
</div>
</div>
</li>
<li>
<img src="images/p-images/work08.jpg" alt="">
<div class="bluebg">
<div>
<h3>Running</h3>
<p>WEB/PRINT</p>
</div>
</div>
</li>
</ul>
</section>
<!-- WORK영역 /-->
<!-- BLOG영역 -->
<section class="inner_con" id="blog">
<div class="title">
<h2>BLOG</h2>
</div>
<ul>
<li>
<img src="images/p-images/blog01.jpg" alt="">
<p>
OCT 30.2016<br/>
There are many variations of passages of Lorem Ipsum
</p>
</li>
<li>
<img src="images/p-images/blog02.jpg" alt="">
<p>
OCT 30.2016<br/>
There are many variations of passages of Lorem Ipsum
</p>
</li>
<li>
<img src="images/p-images/blog03.jpg" alt="">
<p>
OCT 30.2016<br/>
There are many variations of passages of Lorem Ipsum
</p>
</li>
</ul>
</section>
<!-- BLOG영역 /-->
<section class="inner_con" id="contact">
<div class="title">
<h2>CONTACT</h2>
</div>
<div id="formdiv">
<form action="message.php" method="post">
<div id="inputdiv">
<input type="text" name="username" placeholder="name">
<input type="text" name="usereamil" placeholder="email">
<input type="text" name="useraddr" placeholder="address">
<textarea name="message" id="message" cols="30" rows="10"></textarea>
</div>
<button type="submit">send me</button>
</form>
</div>
</section>
</div>
<footer>INDIGO</footer>
</div>
</body>
</html>
indigo_media_teacher.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="shortcut icon" href="images/favicon.ico" type="image/x-icon"> <!-- 웹브라우저 주소창 홈페이지 이름 앞에 붙는 16X16 또는 32X32 아이콘 -->
<link rel="icon" href="images/favicon.ico" type="image/x-icon">
<style>
* { margin: 0 ; padding: 0; box-sizing: border-box; }
li { list-style: none; }
a { text-decoration: none; color: inherit; }
img { border: 0; vertical-align: top; }
.inner_con {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
body {
font-family: '나눔 고딕', sans-serif;
font-size: 14px;
line-height: 1.6;
color: #2d2d2d;
}
header {
display: flex;
justify-content: space-between;
height: 80px;
align-items: center;
padding-left: 20px;
}
.mobile {
display: none;
}
header ul {
display: flex;
}
header ul li {
padding: 0 20px;
}
img { width: 100%; }
.title {
display: flex;
padding: 30px 0;
align-items: center;
}
.title h2 {
color: #3f51b5;
font-size: 36px;
}
#weare .title h2 {
width: 30%;
position: relative;
}
#weare .title h2::after {
content: "";
display: block;
width: 3px;
height: 30px;
background: #ccc;
position: absolute;
top: 16px;
right: 50px;
}
#weare .title p {
width: 70%;
}
#weare ul {
display: flex;
}
#weare ul li {
width: 25%;
text-align: center;
}
#weare ul li img {
height: 60px;
width: auto;
}
#weare h3 {
padding: 30px;
color: #3f51b5;
}
section:not(#visual){
padding: 50px 0;
}
#work ul {
display: flex;
flex-wrap: wrap; /* 여러 줄 쓰겠다 */
}
#work ul li {
width: 25%;
position: relative;
overflow: hidden;
}
.bluebg {
position: absolute; /* absolute는 크기 지정 해줘야 함 */
top: 0;
left: 0;
background: rgba(63, 81, 171, 0); /* opacity 이용하면 글자까지 투명해짐, 안에 뭐 없으면 opacity도 가능 */
width: 100%;
height: 100%;
color: #fff;
transition: 0.5s;
}
.bluebg h3 {
position: absolute;
top: -100px;
left: 50px;
transition: 0.5s;
}
.bluebg p {
position: absolute;
top: -70px;
left: 50px;
transition: 0.5s;
}
#work ul li:hover .bluebg h3 {
top: 50px;
}
#work ul li:hover .bluebg p {
top: 80px;
}
#work ul li:hover .bluebg {
background: rgba(63, 81, 171, 0.5);
}
#blog {
display: flex;
align-items: flex-start;
}
#blog .title {
width: 35%;
}
#blog ul {
width: 65%;
display: flex;
justify-content: space-between;
}
#blog ul li {
width: 32.5%;
}
#contact {
display: flex;
align-items: flex-start;
}
#contact .title {
width: 35%;
}
#contact #formdiv {
width: 65%;
}
#inputdiv {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 200px;
}
#inputdiv input {
width: 45%;
line-height: 60px;
border: none;
border-bottom: 1px solid #ccc;
outline: none; /* 클릭했을 때 나타나는 테두리 없애기 */
}
#inputdiv textarea {
width: 45%;
border: none;
border-bottom: 1px solid #ccc;
outline: none; /* 클릭했을 때 나타나는 테두리 없애기 */
height: 183px;
}
#formdiv button {
width: 160PX;
height: 60px;
border: none;
outline: none;
background: #3f51b5;
color: #fff;
float: right;
}
footer {
text-align: center;
padding: 40px;
color: #3f51b5;
}
#work h2 {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
@media screen and (max-width: 1024px) {
#weare ul {
flex-wrap: wrap;
}
#weare ul li {
width: 50%;
padding: 30px;
}
.title {
flex-direction: column;
text-align: center;
padding: 30px;
}
#weare .title h2 {
width: 100%;
}
#weare .title h2::after {
display: none;
}
#weare .title p {
width: 100%;
}
#work ul li {
width: 50%;
}
#blog {
flex-direction: column;
}
#blog .title {
width: 100%;
}
#blog ul li {
align-items: center;
}
#contact {
flex-direction: column;
}
#contact .title {
width: 100%;
}
#contact #formdiv {
width: 100%;
}
}
@media screen and (max-width: 768px) {
.mobile {
width: 80px;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.mobile span {
width: 50%;
height: 5px;
background: #3f51b5;
}
.mobile span:not(:last-child) {
margin-bottom: 5px;
}
header ul {
display: none;
}
#weare ul li {
width: 100%;
}
}
</style>
</head>
<body>
<div id="wrap">
<header>
<h1>INDIGO</h1>
<nav>
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">WE ARE</a></li>
<li><a href="#">WORK</a></li>
<li><a href="#">BLOG</a></li>
<li><a href="#">CONTACT US</a></li>
</ul>
</nav>
<div class="mobile">
<span></span>
<span></span>
<span></span>
</div>
</header>
<div id="container">
<!-- 비쥬얼영역 -->
<section id="visual">
<img src="images/p-images/slide01.jpg" alt="">
</section>
<!-- 비쥬얼영역 /-->
<!-- WE ARE영역 -->
<section class="inner_con" id="weare">
<div class="title">
<h2>WE ARE</h2>
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.</p>
</div>
<ul>
<li>
<img src="images/s-images/promo01.png" alt="">
<h3>HOME</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</li>
<li>
<img src="images/s-images/promo02.png" alt="">
<h3>WE ARE</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</li>
<li>
<img src="images/s-images/promo03.png" alt="">
<h3>WORK</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</li>
<li>
<img src="images/s-images/promo04.png" alt="">
<h3>BLOG</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</li>
</ul>
</section>
<!-- WE ARE영역 /-->
<!-- WORK영역 -->
<section id="work">
<div class="title">
<h2>WORK</h2>
</div>
<ul>
<li>
<img src="images/p-images/work01.jpg" alt="">
<div class="bluebg">
<div>
<h3>Running</h3>
<p>WEB/PRINT</p>
</div>
</div>
</li>
<li>
<img src="images/p-images/work02.jpg" alt="">
<div class="bluebg">
<div>
<h3>Running</h3>
<p>WEB/PRINT</p>
</div>
</div>
</li>
<li>
<img src="images/p-images/work03.jpg" alt="">
<div class="bluebg">
<div>
<h3>Running</h3>
<p>WEB/PRINT</p>
</div>
</div>
</li>
<li>
<img src="images/p-images/work04.jpg" alt="">
<div class="bluebg">
<div>
<h3>Running</h3>
<p>WEB/PRINT</p>
</div>
</div>
</li>
<li>
<img src="images/p-images/work05.jpg" alt="">
<div class="bluebg">
<div>
<h3>Running</h3>
<p>WEB/PRINT</p>
</div>
</div>
</li>
<li>
<img src="images/p-images/work06.jpg" alt="">
<div class="bluebg">
<div>
<h3>Running</h3>
<p>WEB/PRINT</p>
</div>
</div>
</li>
<li>
<img src="images/p-images/work07.jpg" alt="">
<div class="bluebg">
<div>
<h3>Running</h3>
<p>WEB/PRINT</p>
</div>
</div>
</li>
<li>
<img src="images/p-images/work08.jpg" alt="">
<div class="bluebg">
<div>
<h3>Running</h3>
<p>WEB/PRINT</p>
</div>
</div>
</li>
</ul>
</section>
<!-- WORK영역 /-->
<!-- BLOG영역 -->
<section class="inner_con" id="blog">
<div class="title">
<h2>BLOG</h2>
</div>
<ul>
<li>
<img src="images/p-images/blog01.jpg" alt="">
<p>
OCT 30.2016<br/>
There are many variations of passages of Lorem Ipsum
</p>
</li>
<li>
<img src="images/p-images/blog02.jpg" alt="">
<p>
OCT 30.2016<br/>
There are many variations of passages of Lorem Ipsum
</p>
</li>
<li>
<img src="images/p-images/blog03.jpg" alt="">
<p>
OCT 30.2016<br/>
There are many variations of passages of Lorem Ipsum
</p>
</li>
</ul>
</section>
<!-- BLOG영역 /-->
<section class="inner_con" id="contact">
<div class="title">
<h2>CONTACT</h2>
</div>
<div id="formdiv">
<form action="message.php" method="post">
<div id="inputdiv">
<input type="text" name="username" placeholder="name">
<input type="text" name="usereamil" placeholder="email">
<input type="text" name="useraddr" placeholder="address">
<textarea name="message" id="message" cols="30" rows="10"></textarea>
</div>
<button type="submit">send me</button>
</form>
</div>
</section>
</div>
<footer>INDIGO</footer>
</div>
</body>
</html>