#1. css slide 애니메이션 적용하기
복습
- flex box - 주축 정렬
- button , a 태그 <사이트 소개란>
- position 속성 - relative
새롭게 적용한 코드
- position 속성 - absolute
- @keyframes - slide
- animation 태그
new
- @keyframes를 사용하여 애니메이션 적용
@keyframes slide{
0%{
left: -100px;
opacity: 0;
}
100%{
left: 100px;
opacity: 1;
}
}
- 시작점을 원래의 위치에서 왼쪽으로 -100px으로 설정한다. 투명도를 0으로 설정한다.
- 최종 위치를 left:100px로 지정한다. 투명도를 1로 설정한다.
- *처음에 from, to를 사용하여 코드를 작성하였는데 실행되지 않았음. 이후 다른 사람들의 블로그를 참고하여 0과 100으로 설정하니 실행이 되었음.. 참고한 유튜버는 from과 to를 사용하였는데 난 왜 실행이 되지 않았을까.. ㅜ
html/css
<1>
// html
<body>
<h1>bebedepino</h1>
<section>
<h2 class="main">child fashion</h2>
</section>
</body>// css
body{
margin: 0;
height: 2000px;
}
section{
background: url(https://www.bebedepino.com/web/upload/img/23W_bottom_img_1.jpg) fixed;
height: 500px;
}
.main{
display: block;
position: absolute;
top: 200px;
left: 150px;
width: 250px;
font-size: 60px;
color: white;
animation-name: slide;
animation-duration: 3s;
}<2>
// html
<body>
<!-- <section class="top">
<h1>BeBedepPino</h1>
</section> --> <!--section과 div 태그의 사용*/-->
<div class="top">
<div id="h1">
<h1>bebedepPino</h1>
</div>
</div>
<section>
<div class="main">
<div id="h2">
<h2>child fashion</h2>
<p>KATIE and RYAN have the same philosophy of beautiful life.<br />
Bebe De Pino’s story began in 2010.</p>
</div>
<div id="button">
<button>
<a href="https://www.bebedepino.com/about.html">>> 자세히
</button>
</div>
</div>
</section>
</body>// css
body{
margin: 0;
height: 2000px;
}
.top{
display: block;
margin: 0;
height: 50px;
background-color: white;
opacity: 0.5;
}
#h1{
display: inline;
text-align: center;
color: black;
margin: 0;
}
section{
background: url(https://www.bebedepino.com/web/upload/img/23W_bottom_img_1.jpg) fixed;
height: 500px;
}
/* h1{
font-family: ;
} */
.main{
display: block;
position: absolute;
top: 180px;
left: 100px;
width: 250px;
font-size: 60px;
color: white;
animation: slide 3s ease-out;
}
#h2{
color: white;
text-align: left;
}
h2{
margin: 0px;
font-size: 50px;
}
p{
position:relative;
top: 0;
font-size: 15px;
color: white;
text-align: left;
}
#button{
display: flex;
justify-content: end;
position: relative;
top:5px;
}
button{
text-align: right;
background: 0;
border: 0;
color: white;
animation: slide 3s ease-out;
}
a{
text-align: right;
border: 0;
color: white;
}
-
margin을 0으로 하여 브라우저에 사진이 꽉차보이게 하였다.
-
section/ background 이미지를 링크로 첨부한 후 fixed 스타일을 사용하여 스크롤을 할 때 이미지를 고정하여 스크롤을 따라가지 않도록 하였다.
-
position 속성에 relative값을 적용하여 section속 div의 위치를 지정하였다.
-
h2/p/button 모두 동일하게 absolute로 위치를 지정하고 싶었지만 브라우저에 실행하면 원하는 위치에 있지 않았다...
고민하다 이전에 배운 flex box - 주축 정렬 / position 속성 - relative값을 사용하여 해결해보기로 하였다.
각각 개별적으로 적혀있던 h1,p,button을 div로 나눈 후 서로 형제관계로 만들어 top으로 간격을 조절하였다.
이때 button은 display 속성을 flex로 변경하고
justify-content: end; 로 주축 정렬을 해주었다. button의 위치를 end로 지정하였다.
버튼의 위치를 오른쪽 정렬로 하고 싶고 스타일 적용을 개별적으로 하고 싶어 나누었다.
이때 섹션의 width가 250px; 따라서 섹션의 크기에 따라 그 속에 맞춰 주축 정렬이 되었나..?
수정할 점
- 코드를 여러번 수정하다 보니 코드가 지저분하게 작성된 부분이 있어 다시 깔끔하게 작성하기.
- 폰트 변경해보기
- 반응형 웹 적용하기
