국비지원 29일차

※ 실습 mumu 웹사이트

 

 

@animation을 이용한 슬라이드

- 이번에 animation을 이용해서 자동으로 banner의 이미지가 바뀌는 걸 해보도록 하겠습니다.

- 원래는 자바스크립트로 하면 되는데 아직 배우진 않아서 css로 해보는 시간을 가졌습니다.

 

1. main_banner 박스에  banner 박스 3개를 넣어줍니다.

 

2. main_banner 박스에 가로 * 세로 ( 100%* 850px )를 적용하고 position:relative를 적용하고 banner 박스에다가  position : absolute (사방값 필히 기재) 적용해서 3개의 이미지를 main_banner 박스에 모아줍니다 

그리고 opacity:0으로 해당 이미지를 가려줍니다.

 

3.  키프레임을 아래와 같이 3가지 만들어서 똑같은 개수와 퍼센트로 적용해 각 퍼센트마다 해당 opacity:1로 되게 해서 

그 해당 키프레임 가진 이미지가 그 퍼센트에 맞게끔 나와주도록 해줍니다.

마지막 100% 에는 opacity 1을 할애하여 첫 번째 이미지가 나와주도록 해줍니다.

@keyframes slide {

    0% { opacity: 1;}

    20% { opacity: 1;}

    40% { opacity: 0;}

    60% { opacity: 0;}

    80% { opacity: 0;}

    100% { opacity: 1;}

}

@keyframes slide2 {

    0% { opacity: 0;}

    20% { opacity: 0;}

    40% { opacity: 1;}

    60% { opacity: 1;}

    80% { opacity: 0;}

    100% { opacity: 0;}

}

@keyframes slide3 {

    0% { opacity: 0;}

    20% { opacity: 0;}

    40% { opacity: 0;}

    60% { opacity: 0;}

    80% { opacity: 1;}

    100% { opacity: 0;}

}

- banner1 이미 지일 때는 slide1 적용, banner2 이미 지일때는 slide2 적용,banner3 이미지일떄는 slide3 적용

을 해줍니다 

.banner1 {

    background: url(../img/mumu/main_banner/main_banner1.jpg) no-repeat center / cover;

    animation: slide 10s infinite;

}

.banner2 {

    background: url(../img/mumu/main_banner/main_banner2.jpg) no-repeat center / cover;

   

    animation: slide2 10s infinite;

}

.banner3 {

    background: url(../img/mumu/main_banner/main_banner3.jpg) no-repeat center / cover;

   

    animation: slide3 10s infinite;

 

※ story 박스

 

@ story 박스에 아래박스를 위로 겹치기.

 

1. story  박스 안에  크게 박스 2가지로 나눠준다

- story라는 글씨와 main 이미지가 들어갈 박스 1번

- sec_head 박스에 width: 100% height: 300px

  background: url(../img/mumu/story_bg.jpg) no-repeat top center / cover; (메인이미지 적용)

- sec_title라는 박스에 font-weight: 400; letter-spacing: 5 px5 px;(글자 간 간격조정)

- sec_bar라는 박스 width:width: 50px height: 2px background: #000(배경색 검정)  margin: 0 auto;(중앙정렬)

작대기 만들어준다.

 

<section class="story ">

            <div class="sec_head bg_story">

                <h2 class="sec_title">STORY</h2>

                <div class="sec_bar"></div>

                <!-- <p class="sec_desc">심플함 속 위트 있는 디테일 아이템 단독 최대 45%</p> -->

            </div>

2. 2번째 이미지와 txt 박스가 들어가 박스 2번

 

- sec_body 박스에 s_banner_img (2번째 이미지 상자) , s_banner_desc (2번째 텍스트 상자)

- sec_body 박스에 display: flex, (이미지와 텍스트 상자 자동으로 정렬해 준다.)  margin-top: -100px (상자를 위로 -100px 만큼 이동시켜 준다)

-> 위에 방법 말고도   transform: translateY(-100translateY(-100px)를 사용해서 올려주는 방법도 있다. 보통 이런 웹페이지 만들 시에는 나중에 반응형도 생각하여 웬만하면 float 나 position으로 옮긴다고 하면 땅에 영역이 사라져서 밑에 있는 박스들이 위로 올라올 것이다. 그래서 땅에 영역을 갖고 있는 상태로 해당박스를 옮길 수 있는 방법으로 구상해서 적용하는 게 좋을 것이다.

부모박스가 따로 높이를 가지지 않을 시 자식박스 중에 띄워져 있는 박스가 있다면 그 박스의 높이를 못 잡아서 땅에 있는 박스들만 영역을 잡을 것이기 때문이다.

<div class="sec_body content_area_sm">

                <div class="s_banner_img">

                    <img src="./img/mumu/story1.jpg" alt="">

                </div>

                <div class="s_banner_desc">

                    <h1 class="s_banner_desc_title">더 좋은 내일을 꿈꾸게</h1>

                    <p class="s_banner_desc_txt">편안함을 중점으로 베이직하지만 담백한 감성을 토대로 누구든 거부감 없이 쉽게 입을 수 있는 상품들을 소개합니다. 컬러를 재해석하여 쉽게 스타일링이 가능하고 입을 수 있는 워크웨어 감성과 더불어 무무에서만 볼 수 있는 특별한 상품까지 여러분에게 제안합니다.</p>

                    <div class="btn_s_banner">MUMU STORY</div>

                </div>

            </div>