♥ 코딩(Coding)/심화
( 공부복습 ) 레이아웃 설계 응용
디자이너 윈썸
2021. 12. 24. 20:17
< 지금까지 공부한 것을 사용하여 만들어보기! >
<!-- headerTitle -->
<header>
<!-- title -->
<h1>
my <br>web-design <br>
<span>
portfolio <br> collection
</span>
</h1>
<!-- title -->
<!-- object -->
<div id="object">
<div class="border"></div>
<img src="img/ani.png" alt="">
</div>
<!-- object -->
</header>
<!-- //headerTitle -->
<!-- section -->
<section>
<!-- cots01 -->
<div class="contents">
<a href="#"><img src="img/img1.jpg" alt="" /></a>
<a href="#"><img src="img/img2.jpg" alt="" /></a>
<a href="#"><img src="img/img3.jpg" alt="" /></a>
<a href="#"><img src="img/img4.jpg" alt="" /></a>
<a href="#"><img src="img/img5.jpg" alt="" /></a>
<a href="#"><img src="img/img16.jpg" alt="" /></a>
</div>
<!--// cots01 -->
<!-- cots02 -->
<div class="contents">
<a href="#"><img src="img/img6.jpg" alt="" /></a>
<a href="#"><img src="img/img7.jpg" alt="" /></a>
<a href="#"><img src="img/img8.jpg" alt="" /></a>
<a href="#"><img src="img/img9.jpg" alt="" /></a>
<a href="#"><img src="img/img10.jpg" alt="" /></a>
</div>
<!--// cots02 -->
<!-- cots03 -->
<div class="contents">
<a href="#"><img src="img/img11.jpg" alt="" /></a>
<a href="#"><img src="img/img12.jpg" alt="" /></a>
<a href="#"><img src="img/img13.jpg" alt="" /></a>
<a href="#"><img src="img/img14.jpg" alt="" /></a>
<a href="#"><img src="img/img17.jpg" alt="" /></a>
<a href="#"><img src="img/img19.jpg" alt="" /></a>
</div>
<!--// cots03 -->
</section>
<!-- section -->
<!-- nav -->
<nav>
<a href="#">
<span></span>
<span></span>
<span></span>
</a>
</nav>
<!-- //nav -->
<!-- footer -->
<footer>
<ul>
<li><a href="#"></a><i class="fab fa-facebook-f"></i></li>
<li><a href="#"></a><i class="fab fa-youtube"></i></li>
<li><a href="#"></a><i class="fab fa-instagram"></i></li>
</ul>
<p>copyright © 2021 hajeong jang</p>
</footer>
<!-- //footer -->
@importurl('https://fonts.googleapis.com/css2family=Raleway:wght@100;200;300;400;500;600;700;800;900&display=swap');
*{
padding: 0;
margin: 0;
font-family: 'Raleway', sans-serif;
}
a{
text-decoration: none;
color: inherit;
/* 부보값을 물려받음 */
/*
inherit >> 부모 태그의 속성값을 그대로 상속
initial 속성의 원래의 초깃값 즉 기본값을 요소에 적용
*/
}
ul,ol{
list-style: none;
}
img{
display: block;
width: 100%;
}
body{
color: #000;
}
/* header */
header{
width: 35%;
height: 100%;
position: fixed;
top: 0;
left: 0;
text-shadow: 40px 40px 30px rgba(0, 0, 0, 0.5);
}
header h1{
position: relative;
z-index: 12;
/* 원형요소보다 상위에 위치 */
font-weight: 800;
font-size: 85px;
margin-left: 10%;
margin-top: 300px;
}
header h1 span{
font-weight: 200;
font-size: 75px;
}
/* header object */
#object{
width: 100%;
height: 500px;
position: absolute;
top: 50px;
z-index: 5;
/* 12값보다 현저히 작게 > 글자 아래로 배치 */
}
#object .border{
width: 500px;
height: 500px;
position: absolute;
bottom: 0;
left: -100px;
border: 1px solid #d8d8d8;
border-radius: 50%;
animation-name: obj2;
animation-duration: 1s;
animation-delay: 0.7s;
animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
animation-fill-mode: both;
box-sizing: border-box;
/* 넘치는 보더 폭안으로 표현 */
}
#object img{
width: 500px;
height: 500px;
position: absolute;
bottom: 0;
left: -200px;
animation-name: obj1;
animation-duration: 1s;
animation-delay: 0.9s;
animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
animation-fill-mode: both;
/* 넘치는 보더 폭안으로 표현 */
}
@keyframes obj1{
0%{
opacity: 0;
transform: translateX(-500px) scale(0.5);
}
100%{
opacity: 1;
transform: translateX(30px) scale(1);
}
}
@keyframes obj2{
0%{
opacity: 0;
transform: translateX(-500px) scale(0.5);
}
100%{
opacity: 1;
transform: translateX(30px) scale(1);
}
}
/* section */
section{
width: 60%;
overflow: hidden;
padding: 100px 0;
margin-top: 200px;
margin-left: 30%;
}
.contents{
width: 33.3%;
/* 3등분으로 나눌 시 */
float: left;
overflow: hidden;
}
.contents a{
width: 90%;
display: block;
overflow: hidden;
margin: auto;
margin-bottom: 20px;
}
.contents a>img{
transition: all 0.2s;
}
.contents a>img:hover{
filter: grayscale(100%);
transform: scale(1.2);
}
/* nav */
nav{
width: 10%;
position: fixed;
right: 0;
top: 0;
height: 100%;
}
nav a{
width: 40px;
height: 30px;
float: right;
margin: 20%;
}
nav span{
width: 40px;
height: 5.3px;
display: block;
background-color: #000;
}
nav span:nth-child(2){
margin: 7px 0;
}
/* footer */
footer{
width: 100%;
padding: 50px 0;
overflow: hidden;
background-color: #000;
color: #fff;
text-align: center;
}
footer ul{
width: 30%;
margin: auto;
margin-bottom: 30px;
}
footer ul>li{
display: inline-block;
padding: 0 10px;
/* font-size: 20px; >> icon직접적용, 글자색상, hover */
}