[DAY 66] HTML5 & CSS3 : transition 속성 응용

ㆍStudy/HTML5 & CSS3

2022.11.02.


[DAY 65]

  • UI/UX 반응형 웹디자인&웹퍼블리셔 개발자 과정 - DAY 34



Review


 확실히 transform 속성을 배우고부터는 더 흥미가 생기긴 했지만 더 머리가 아프다 ㅎㅎ
움직이는 페이지를 구현하니 빨리 typescript나 react 도 배우고 싶다.
다른 분들 블로그를 보면 C언어를 배우게 되면 흥미가 확 떨어진다고 하시던데,
나도 그럴려나 겁이 나긴 하지만 그래도 배움은 늘 즐겁다.

필라테스 일도 이제 잘 적응하고 있다.
이젠 회원님과 소통도 하고, 상담도 직접 해드리고 있다.
다양한 분들을 만나면서 커뮤니케이션하는 일을 하니 일을 하면서도 활력이 생긴다.
체력관리 잘하면서 공부도 일도 열심히 해야지-

 

 

  • UI/UX 반응형 웹디자인&웹퍼블리셔 개발자 과정 - DAY 34



<해피바스 움직이는 메뉴 만들기>


- HTML

<!DOCTYPE html>
<html lang="ko">
<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">
    <link rel="stylesheet" href="../1101/06style.css">
    <title>menu_transition</title>
</head>
<body>
    <nav>
        <ul>
            <li>
                <a href="#">HappyBath 이야기</a>
                <ul class="subs">
                    <li><a href="#">HappyBath 이야기</a></li>
                    <li><a href="#">HappyBath 이야기</a></li>
                    <li><a href="#">HappyBath 이야기</a></li>
                    <li><a href="#">HappyBath 이야기</a></li>
                </ul>
            </li>
            <li>
                <a href="#">해피바스선물</a>
                <ul class="subs">
                    <li><a href="#">HappyBath 이야기</a></li>
                    <li><a href="#">HappyBath 이야기</a></li>
                    <li><a href="#">HappyBath 이야기</a></li>
                    <li><a href="#">HappyBath 이야기</a></li>
                </ul>
            </li>
            <li><a href="#">해피바스뷰티톡</a></li>
            <li><a href="#">해피바스제품</a></li>
            <li><a href="#">해피바스함께하기</a></li>
        </ul>
    </nav>
    <div class="bg"></div>
    <div class="visual"><img src="../../images/happybath/images/visual.png" alt="visual"></div>
</body>
</html>



- CSS

@charset "utf-8";
@font-face {
    font-family: Opensans;
    src: url(../fontawesome-free-6.2.0-web/webfonts/OpenSans-Regular.woff);
}
* {
    padding: 0;
    margin: 0;
}
ul {
    list-style: none;
}
a {
    text-decoration: none;
    color: #fff;
}
body {
    font: 1em Opensans;
    background: #633c5f;
}
nav {
    width: 1000px;
    margin: 0 auto;
}
nav > ul {
    display: flex;
    justify-content: space-evenly;
    margin-top: 30px;
}
nav > ul > li {
    position: relative;
    width: 20%;
    text-align: center;
}
nav > ul > li > a {
    position: relative;
    display: inline-block;
    line-height: 50px;
}
nav > ul > li > a::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 3px;
    background: #ffef64;
    bottom: 2px;
    left: 0;
    transform: scale(0);
    transition: all 0.5s;
}
nav > ul > li:hover > a {
    color: #ffef64;
}
nav > ul > li:hover > a::after {
    transform: scale(1);
}
.subs {
    width: 100%;
    background: #fff;
    position: absolute;
    top: 50px;
    height: 0;
    overflow: hidden;
    transition: all 1s;
    z-index: 1;
}
.subs li a {
    color: #633c5f;
    line-height: 40px;
}
nav:hover .subs, nav:hover ~ .bg{
    height: 160px;
}
.bg {
    position: absolute;
    width: 100%;
    height: 0;
    background: #fff;
    top: 80px;
    overflow: hidden;
    transition: all 1s;
}
.visual {
    width: 1000px;
    margin: 0 auto;
    margin-top: 30px;
}

 

0
예제 완성

 



<해피바스 움직이는 배너 만들어보기>


- HTML

<!DOCTYPE html>
<html lang="ko">
<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">
    <link rel="stylesheet" href="../1102/01style.css">
    <title>menu_transition</title>
</head>
<body>
    <div class="left">
        <h2>해피바스 선물</h2>
        <div class="ps_wrap">
           <div class="ps_left"></div>
           <div class="ps_center"></div>
           <div class="ps_right"></div>
        </div>
    </div>
    
</body>
</html>



- CSS

@charset "utf-8";
@font-face {
    font-family: notosans;
    src: url(../fontawesome-free-6.2.0-web/webfonts/NotoSansKR-Regular.woff);
}
* {
    padding: 0;
    margin: 0;
}
ul {
    list-style: none;
}
a {
    text-decoration: none;
    color: #fff;
}
body {
    font: 1em notosans;
}
.left {
    width: 500px;
    height: 330px;
    margin: 30px auto;
    text-align: center;
}
.ps_wrap {
    width: 100%;
    display: flex;
    padding-top: 20px;
}
.ps_wrap > div {
    width: 33.333%;
    height: 330px;
    transition: all 1s;
}
.ps_wrap .ps_left {
    background: url(../../images/happybath/images/img1.jpg);
}
.ps_wrap .ps_center {
    background: url(../../images/happybath/images/img2.jpg);
}
.ps_wrap .ps_right {
    background: url(../../images/happybath/images/img3.jpg);
}
.ps_wrap > div:hover {
    width: 60%;
}
.ps_wrap:hover > div:not(:hover) {
    width: 20%;
}



0

여기까지만 해도 예쁘다. 글씨를 넣는게 오히려 더 이상할 것 같은데, 어쨋든 문구를 넣는
것까지 하는 예제니까 우선은 완성해보겠다.


- HTML

<body>
    <div class="left">
        <h2>해피바스 선물</h2>
        <div class="ps_wrap">
           <div class="ps_left">
            <p>내추럴 성분</p>
            <p>해피바스가 담고 있는 '내추럴성분'이 궁금하다면?</p>
           </div>
           <div class="ps_center">
            <p>풍부한 향</p>
            <p>해피바스에서 펼쳐지는 '풍성한 향'이 궁금하다면?</p>
           </div>
           <div class="ps_right">
            <p>즐거운 경험</p>
            <p>해피바스가 이끄는 '즐거운'경험이 궁금하다면?</p>
           </div>
        </div>
    </div>
</body>


ps_left, ps_center, ps_right div에 각각 p 태그로 문구를 넣어주었다.


- CSS

@charset "utf-8";
@font-face {
    font-family: notosans;
    src: url(../fontawesome-free-6.2.0-web/webfonts/NotoSansKR-Regular.woff);
}
* {
    padding: 0;
    margin: 0;
}
ul {
    list-style: none;
}
a {
    text-decoration: none;
    color: #fff;
}
body {
    font: 1em notosans;
}
.left {
    width: 500px;
    height: 330px;
    margin: 30px auto;
    text-align: center;
}
.ps_wrap {
    width: 100%;
    display: flex;
    padding-top: 20px;
}
.ps_wrap > div {
    width: 33.333%;
    height: 330px;
    transition: all 1s;
}
.ps_wrap .ps_left {
    background: url(../../images/happybath/images/img1.jpg);
}
.ps_left p:first-child {
    color: #fff;
    font-size: 20px;
    text-shadow: 3px 3px 3px gray;
    line-height: 330px;
}
.ps_left p:nth-child(2) {
    display: none;
    font-size: 20px;
    padding-top: 130px;
}
.ps_center p:first-child {
    color: #fff;
    font-size: 20px;
    text-shadow: 3px 3px 3px gray;
    line-height: 330px;
}
.ps_center p:nth-child(2) {
    display: none;
    font-size: 20px;
    padding-top: 130px;
}
.ps_right p:first-child {
    color: #fff;
    font-size: 20px;
    text-shadow: 3px 3px 3px gray;
    line-height: 330px;
}
.ps_right p:nth-child(2) {
    display: none;
    font-size: 20px;
    padding-top: 130px;
}
.ps_wrap .ps_center {
    background: url(../../images/happybath/images/img2.jpg);
}
.ps_wrap .ps_right {
    background: url(../../images/happybath/images/img3.jpg);
}
.ps_wrap > div:hover {
    width: 60%;
}
.ps_wrap:hover > div:not(:hover) {
    width: 20%;
}
.ps_wrap:hover > div p:first-child {
    display: none;
}
.ps_left:hover p:nth-child(2) {
    display: block;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.2)
}
.ps_center:hover p:nth-child(2) {
    display: block;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.2)
}
.ps_right:hover p:nth-child(2) {
    display: block;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.2)
}


각 div에 마우스를 올릴 때마다 문구가 달라지도록 설정했다.
div에 마우스를 올릴 때마다 첫번째 p 태그는 보이지 않도록 설정하고 난 뒤,
각 div마다 두번째 p 태그만 나타나도록 설정하고, background에 opacity까지 설정해
문구가 돋보이도록 했다.

각 문구에 text-shadow도 넣어주어 입체감을 살렸다.

0
예제 완성

완성 - !


반응형

'Study > HTML5 & CSS3' 카테고리의 다른 글

HTML5 & CSS3 : Google 메인 페이지 만들기  (0) 2022.11.04
HTML5 & CSS3 : transition 속성 응용 예제  (0) 2022.11.03
HTML5 & CSS3 : transform, transition 속성  (1) 2022.11.01
HTML5 & CSS3 : text-spacing, transform, perspective 속성  (0) 2022.10.31
HTML5 & CSS3 : Paul Smith 메인 페이지 만들기  (0) 2022.10.28

관련글

댓글 0

티스토리툴바