몽땅뚝딱 개발자

[반응형 웹디자인] 세번째 시안 - Musicake 본문

STUDY/2021

[반응형 웹디자인] 세번째 시안 - Musicake

레오나르도 다빈츠 2021. 9. 21. 15:01

🚩 반응형 웹디자인 수업 (2021.07~2021.09)

 

⭐ 목적

· 전체적인 레이아웃을 위한 엘리먼트를 배치할 수 있다.

· 디바이스의 폭에 따라 반응형으로 동작하는 웹페이지를 만들 수 있다.

· 자식, 부모 속성을 부여하여 원하는 위치에 요소를 배치할 수 있다.

 

🔗 URL

https://hvsundev.github.io/my-portpolio/project1/index.html

 

 

 

 

 

혹시나 전체적으로 구현된 모습이나 소스를 보고싶은 분이 계시다면

해당 파일 다운로드 후 알집을 풀고

index.html을 크롬으로 실행하면 볼 수 있습니다!

3번시안_Musicake.zip
3.80MB

 

 

 

 

 

🎨 Design

 

 

 

 

📁 tree

├─ css

│  ├─ common.css

├─ img

│  ├─ 이미지들..

├─ index.html

 

 

 

 

 

📄 index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Musicake</title>
    <link rel="stylesheet" href="css/common.css" type="text/css">
    
    <!-- Google Font -->
    <link href="https://fonts.googleapis.com/earlyaccess/notosanskr.css" rel="stylesheet">
</head>

<body>
    <div id="wrap">
        <div id="header">
            <div class="top_header">
                <div class="inner">
                    <ul class="site">
                        <li>개인</li>
                        <li>기업</li>
                        <div class="space"></div>
                    </ul>
                    <ul class="util">
                        <li>로그인</li>
                        <li>회원가입</li>
                        <li>회사소개</li>
                        <li>ENCLISH</li>
                        <div class="space"></div>
                    </ul>
                    <div class="space"></div>
                </div>
            </div>
            <div class="bottom_header">
                <div class="inner">
                    <ul class="menu">
                        <li>차트</li>
                        <li>최신음악</li>
                        <li>장르음악</li>
                        <li>매거진</li>
                        <div class="space"></div>
                    </ul>
                    <div class="logo">
                        <img src="img/logo.png">
                    </div>
                    <div class="sub_menu">
                        <ul class="side">
                            <li>
                                <img src="img/ico_chanel.png">특별혜택관
                            </li>
                            <li>
                                <img src="img/ico_fee.png">이용권 구매하기
                            </li>
                        </ul>
                        <div class="search">
                            <img src="img/ico_search.png">
                        </div>
                        <div class="m_menu">
                            <img src="img/ico_menu.png">
                        </div>
                    </div>
                    <div class="space"></div>
                </div>
            </div>
        </div>
        <div id="mainimg"></div>
        <div id="contents">
            <div class="playlist_set">
                <div class="inner">
                    <div class="playlist_title">
                        <h2>오늘의 플레이리스트</h2>
                        <p>이럴 땐, 이런 음악!</p>
                    </div>
                    <div class="playlist_slider">
                        <div class="btn_prev">
                            <img src="img/slick-prev.png" alt="이전">
                        </div>
                        <div class="playlist_list">
                            <div class="slide">
                                <img src="img/play_01.png">
                            </div>
                            <div class="slide">
                                <img src="img/play_02.png">
                            </div>
                            <div class="slide">
                                <img src="img/play_03.png">
                            </div>
                            <div class="space"></div>
                        </div>
                        <div class="btn_next">
                            <img src="img/slick-next.png" alt="다음">
                        </div>
                    </div>
                    <div class="playlist_picker">
                        <div class="playlist_box">
                            <dl>
                                <div>
                                    <dt>#시대별선곡</dt>
                                    <dd>
                                        <div class="btn_select">
                                            들으러가기
                                        </div>
                                    </dd>
                                </div>
                            </dl>
                            <dl>
                                <div>
                                    <dt>#장르별추천</dt>
                                    <dd>
                                        <div class="btn_select">
                                            들으러가기
                                        </div>
                                    </dd>
                                </div>
                            </dl>
                            <dl class="last">
                                <div>
                                    <dt>#기분따라</dt>
                                    <dd>
                                        <div class="btn_select">
                                            들으러가기
                                        </div>
                                    </dd>
                                </div>
                            </dl>
                            <div class="space"></div>
                        </div>
                        <div class="playlist_btn">
                            <img src="img/make_btn.png">
                        </div>
                        <div class="space"></div>
                    </div>
                </div>
                <div class="t_mini_banner">
                    <div class="inner">
                        <h2>텅 빈 눈동자에 사랑의 색을 입혀, 공상 [Colors]</h2>
                        <p>Special 비하인드 컷</p>
                    </div>
                </div>
                <div class="album_set">
                    <h2>최신앨범</h2>
                    <div>
                        <div class="album_slider">
                            <div class="btn_prev">
                                <img src="img/slick-prev.png">
                            </div>
                            <div class="album_list">
                                <div class="slide">
                                    <img src="img/alb_01.png">
                                    <h4>꿈을 꾸는 루미너스</h4>
                                    <h5>루미너스</h5>
                                    <p class="title">꿈을 꾸는 루미너스</p>
                                    <p class="date">2021.08.16</p>
                                </div>
                                <div class="slide">
                                    <img src="img/alb_02.png">
                                    <h4>Queendom</h4>
                                    <h5>Red Velvet(레드벨벳)</h5>
                                    <p class="title">Queendom</p>
                                    <p class="date">2021.08.16</p>
                                </div>
                                <div class="slide">
                                    <img src="img/alb_03.png">
                                    <h4>ready.set.summer!</h4>
                                    <h5>OVCOCO (오브코코)</h5>
                                    <p class="title">ready.set.summer!</p>
                                    <p class="date">2021.08.19</p>
                                </div>
                                <div class="space"></div>
                            </div>
                            <div class="btn_next">
                                <img src="img/slick-next.png">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="station_set">
                    <h2>STATION</h2>
                    <ul>
                        <li>
                            <img src="img/ico_stat_01.png">
                            <p class="title">인디스웨이</p>
                            <p class="contents">인디음악으로 향하는길 </p>
                        </li>
                        <li>
                            <img src="img/ico_stat_02.png">
                            <p class="title">정기고의 SOULBY SEL</p>
                            <p class="contents">KRNB 뮤직 토크쇼</p>
                        </li>
                        <li>
                            <img src="img/ico_stat_03.png">
                            <p class="title">POPCAST</p>
                            <p class="contents">글로벌 뮤직 트렌드 & 이슈</p>
                        </li>
                        <li>
                            <img src="img/ico_stat_04.png">
                            <p class="title">SMing</p>
                            <p class="contents">With SM ENTERTAINMENT</p>
                        </li>
                        <div class="space"></div>
                    </ul>
                </div>
                <div class="f_mini_banner"></div>
                <div class="board_set">
                    <div class="inner">
                        <h2>공지사항</h2>
                        <p>개인정보처리방침 개정 안내</p>
                        <ul>
                            <li class="date">2021-08-25</li>
                            <li class="more">MORE</li>
                            <div class="space"></div>
                        </ul>
                        <div class="space"></div>
                    </div>
                </div>
            </div>
        </div>
        <div id="footer">
            <div class="top_footer">
                <div class="inner">
                    <ul>
                        <li>이용약관</li>
                        <li class="bold">위치기반서비스 이용약관</li>
                        <li class="bold">개인정보처리방침</li>
                        <li>청소년보호정책</li>
                        <li>제휴/프로모션문의</li>
                        <li>이메일주소무단수집거부</li>
                        <li>파트너센터</li>
                        <div class="space"></div>
                    </ul>
                </div>
            </div>
            <div class="bottom_footer">
                <div class="inner">
                    <div class="f_logo">
                        <img src="img/logo_btm.png">
                    </div>
                    <div class="copyright">
                        <ul>
                            <li>
                                <span>주소</span>
                                경기도 성남시 분당구 판교역로 235 4층
                            </li>
                            <li>
                                <span>대표자</span>
                                이제욱
                            </li>
                            <li>
                                <span>이메일</span>
                                musicake@kakao.com
                            </li>
                        </ul>
                        <p>
                            © Musicake Company Corp.
                        </p>
                    </div>
                    <div class="info">
                        <ul>
                            <li>
                                <span>고객센터</span>
                                1877-8000
                            </li>
                            <li>
                                070-8100-1000 <span>(인터넷 무료전화)</span>
                            </li>
                            <div class="space"></div>
                        </ul>
                    </div>
                    <div class="space"></div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

 

 

 

📄 common.css

@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);



/* 공통 */
* {
    padding: 0;
    margin: 0;
}

ul {
    list-style: none;
}

body {
    overflow-x: hidden;
    font-family: 'Noto Sans KR', sans-serif;
    background-color: #000000;
}

.space {
    clear: both;
}

.inner {
    width: 1280px;
    margin: 0 auto;
}



/* Header */
/* 위쪽 상단 */
#header {
    background-color: #000000;
    color: white;
}

.top_header {
    width: 100%;
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid #393939;
    font-size: 13px;
    text-align: center;
}

.site {
    width: 274px;
    float: left;
    color: #6e6e6e;
    font-weight: bold;
}

.site > li {
    width: 32.9%;
    float: left;
    background-color: #393939;
    font-weight: normal;
    color: #fff;
}

.site li:nth-child(1) {
    background-color: #fdfdfd;
    color: #000;
}

.util {
    float: right;
}

.util > li {
    float: left;
    text-align: center;
}

.util > li:before {
    display: inline-block;
    content: "";
    width: 1px;
    height: 10px;
    background-color: #e1e1e1;
    margin: 0 12px;
}

.util > li:nth-child(1):before {
    display: none;
}



/* 아래쪽 상단 */
.bottom_header {
    width: 100%;
    height: 92px;
    line-height: 92px;
    font-size: 15px;
    text-align: center;
}

.bottom_header .inner {
    width: 1280px;
    height: 92px;
    position: relative;
}

.logo {
    position: absolute;
    width: 212px;
    margin: 0 auto;
    left: 0;
    right: 0;
}

.logo img {
    vertical-align: middle;
}

.menu {
    width: 372px;
    float: left;
}

.menu li {
    width: 22%;
    float: left;
    padding: 0 2%;
    font-weight: 600;
    font-size: 17px;
}

.menu li:nth-child(1) {
    padding: 0;
}

.menu li:nth-child(4) {
    padding: 0;
}

.sub_menu {
    float: right;
}

.side {
    width: 321px;
    float: left;
}

.side li {
    float: left;
    padding-right: 30px;
}

.side > li > img {
    padding-right: 10px;
    vertical-align: middle;
}

.search {
    float: left;
    padding-right: 30px;
}

.m_menu {
    float: right;
}

.search img {
    vertical-align: middle;
}

.m_menu img {
    vertical-align: middle;
}



/* mainimg */
#mainimg {
    width: 100%;
    height: 640px;
    background-image: url(../img/mainimg.png);
    background-size: cover;
    background-position: center;
}



/* contents */
/* 플레이리스트 */
.playlist_set {
    margin: 0 auto;
    padding-top: 90px;
    background-image: url(../img/bg_playlist.png);
}

.playlist_set .playlist_title {
    width: 100%;
    height: 80px;
    text-align: center;
    position: relative`;
}

.playlist_set > .inner > .playlist_title > h2 {
    font-size: 38px;
    font-weight: bold;
    color: #fff;
    text-align: center;
    letter-spacing: -1px;
}

.playlist_set > .inner > .playlist_title > h2:before {
    content: "";
    display: inline-block;
    background-image: url(../img/img_sound.png);
    background-repeat: no-repeat;
    width: 80px;
    height: 30px;
    margin-right: 20px;
}

.playlist_set > .inner > .playlist_title > h2:after {
    content: "";
    display: inline-block;
    background-image: url(../img/img_sound.png);
    background-repeat: no-repeat;
    width: 80px;
    height: 30px;
    margin-left: 20px;
}

.playlist_title > p {
    padding-top: 7px;
    color: white;
    font-size: 18px;
}

.playlist_slider {
    width: 1280px;
    height: 570px;
    position: relative;
    padding-top: 15px;
}

.btn_prev {
    position: absolute;
    left: 0;
    top: 45%;
}

.btn_next {
    position: absolute;
    right: 0;
    top: 45%;
}

.playlist_list {
    position: absolute;
    width: 1050px;
    margin: 0 auto;
    left: 0;
    right: 0;
    padding: 46px 5% 0 5%;
}

.slide {
    width: 33.3%;
    float: left;
}

.playlist_list .slide img {
    padding: 0 7%;
}

.playlist_picker {
    width: 100%;
    height: 130px;
    margin-top: 80px;
    text-align: center;
    padding-bottom: 130px;
}

.playlist_box {
    width: 89%;
    height: 130px;
    float: left;
    background-color: #212121;
    border-radius: 8px 0 0 8px;
    position: relative;
}

.playlist_btn {
    height: 50px;
    float: left;
    position: relative;
}

.playlist_btn img {
    position: absolute;
    top: -30px;
    left: -40px;
}

.playlist_box > dl {
    float: left;
    width: 33%;
    height: 105px;
    padding-top: 25px;
    border-right: 1px solid #474747;
}

.playlist_box > dl > div > dt {
    font-size: 24px;
    font-weight: bold;
    color: #f76ec0;
}

.playlist_box > dl > div > dd {
    font-size: 11px;
    padding-top: 7px;
    color: #666666;
}

.playlist_box > .last {
    border-right: none;
}

.btn_select {
    width: 90px;
    height: 30px;
    line-height: 30px;
    border: 2px solid #fff;
    border-radius: 20px;
    font-size: 13px;
    color: #fff;
    margin: 0 auto;
}



/* 상단 미니배너 */
.t_mini_banner {
    width: 100%;
    height: 263px;
    background-color: #dcd8d5;
    background-image: url(../img/mini_banner.png);
    background-repeat: no-repeat;
    background-position: 85%;
}

.t_mini_banner > .inner > h2 {
    padding: 90px 0 5px 0;
    font-size: 32px;
    letter-spacing: -1px;
    color: #2b2b2b;
}

.t_mini_banner > .inner > p {
    font-size: 25px;
    color: #2b2b2b;
}



/* 앨범 영역 */
.album_set {
    width: 100%;
    height: 810px;
    background-color: #1c1c1c;
}

.album_set > h2 {
    font-size: 36px;
    text-align: center;
    font-weight: bold;
    color: #fff;
    padding-top: 120px;
    padding-bottom: 50px;
    letter-spacing: -1px;
}

.album_slider {
    width: 1280px;
    height: 494px;
    position: relative;
    color: #fff;
    margin: 0 auto;
}

.album_list {
    width: 969px;
    margin: 0 auto;
    left: 0;
    right: 0;
}

.album_lis .slide img {
    width: 90%;
}

.album_list > .slide > img {
    width: 80%;
    margin: 0 10%;
}

.album_list > .slide > h4 {
    font-size: 22px;
    font-weight: bold;
    padding: 20px 10% 5px 10%;
}

.album_list > .slide > h5 {
    font-size: 15px;
    font-weight: bold;
    padding: 0 10%;
    color: white;
}

.album_list > .slide > .title {
    font-size: 15x;
    font-weight: 500;
    padding-bottom: 15px;
    color: white;
}

.album_list > .slide > .title:before {
    display: inline-block;
    content: "title";
    background-color: #9850c5;
    width: 45px;
    text-align: center;
    border-radius: 11px;
    margin-right: 6px;
    margin-top: 20px;
    height: 23px;
}

.album_list > .slide > p {
    font-size: 15px;
    color: #dcd8d5;
    padding: 0 10%;
    color: white;
    color: #acacac;
}



/* 스테이션 */
.station_set {
    text-align: center;
    padding-top: 110px;
    padding-bottom: 120px;
    background-color: #2c2c2c;
}

.station_set > h2 {
    color: white;
    font-size: 36px;
    padding-bottom: 50px;
}

.station_set .title {
    font-size: 22px;
    color: white;
    padding-top: 25px;
}

.station_set .contents {
    font-size: 18px;
    color: white;
    padding-top: 5px;
    font-weight: normal;
}

.station_set > ul {
    width: 60%;
    margin: 0 auto;
    font-size: 20px;
    font-weight: bold;
}

.station_set > ul > li {
    width: 25%;
    float: left;
    color: white;
}



/* 하단 미니배너 */
.f_mini_banner {
    background-image: url(../img/f_mini_banner.png);
    height: 279px;
}



/* 하단 공지사항 */
.board_set {
    height: 80px;
    line-height: 80px;
    margin: 0 auto;
    font-size: 14px;
    color: #000100;
    background-color: white;
}

.board_set > .inner > h2 {
    float: left;
    width: 136px;
    font-size: 16px;
}

.board_set > .inner > p {
    float: left;
}

.board_set > .inner > ul {
    float: right;
}

.board_set > .inner > ul > .date {
    float: left;
    color: #979996;
}

.board_set > .inner > ul > .more {
    width: 110px;
    float: left;
    text-align: right;
    text-decoration: underline;
}



/* footer */
#footer {
    width: 100%;
    height: 260px;
    background-color: #1e1f21;
}

.top_footer {
    width: 100%;
    height: 73px;
    line-height: 73px;
    border-bottom: 1px solid #303133;
    font-size: 12px;
    color: #5e605d;
}

.top_footer > .inner > ul > li {
    float: left;
    color: #5e605d;
    padding-right: 32px;
}

.top_footer > .inner > ul > .bold {
    color: #fff;
}

.bottom_footer {
    padding-top: 42px;
    font-size: 8px;
    color: #999999;
}

.f_logo {
    float: left;
    padding-right: 54px;
}

.copyright {
    float: left;
}

.copyright > p {
    padding-top: 20px;
}

.copyright > ul > li {
    height: 20px;
}

.copyright > ul > li > span {
    width: 110px;
    display: inline-block;
}

.info {
    float: right;
    font-size: 17px;
    color: #ff7bbc;
}

.info > ul > li {
    float: left;
}

.info > ul > li:nth-child(1) > span {
    color: #5e605b;
    font-size: 12px;
    padding-right: 5px;
}

.info > ul > li:nth-child(2) > span {
    font-size: 12px;
    padding-left: 5px;
}

.info > ul > li:nth-child(2):before {
    content: "";
    display: inline-block;
    background-color: #565955;
    width: 1px;
    height: 13px;
    margin-left: 12px;
    margin-right: 8px;
}


@media (max-width:1279px) {

    #header {
        width: 100%;
        height: 132px;
        position: relative;
    }

    .top_header {
        display: none;
    }

    .bottom_header {
        width: 100%;
    }

    .bottom_header > .inner {
        width: 100%;
    }

    .menu {
        float: none;
        margin: 0 auto;
        padding-top: 60px;
    }

    .logo {
        top: 10px;
    }

    .side {
        display: none;
    }

    .search {
        display: none;
    }

    .m_menu {
        float: none;
        position: absolute;
        left: 5%;
        top: 18%;
    }

    #mainimg {
        height: 0;
        padding-top: calc(1052/767*100%);
        background-image: url(../img/mainimg_m.png);
    }


    .playlist_set > .inner {
        width: 100%;
    }

    .playlist_set > .inner > .playlist_title > h2 {
        font-size: 30px;
    }

    .playlist_set .playlist_title {
        width: 98%;
        margin: 0 auto;
        height: auto;
    }

    .playlist_slider {
        width: 80%;
        margin: 0 auto;
        height: auto;
        padding-top: 30px;
    }

    /* 플레이리스트 */
    .playlist_list {
        width: 35%;
        height: 0;
        padding: calc(280/499*100%) 0 0 0;
        position: relative;
    }

    .playlist_list > .slide {
        position: absolute;
        top: 0;
        width: 100%;
        padding: 0;
    }

    .playlist_list > .slide > img {
        width: 100%;
        padding: 0;
    }

    .playlist_list > .slide:nth-child(2),
    .playlist_list > .slide:nth-child(3) {
        display: none;
    }

    .btn_select {
        margin: 0 auto;
        float: left;
    }

    /* 플레이 리스트 */
    .playlist_picker {
        height: 303px;
        margin-top: 60px;
        padding-bottom: 0;
    }

    .playlist_box {
        width: 100%;
        height: auto;
        float: none;
        border-radius: 0;
    }

    .playlist_box > dl {
        width: 100%;
        float: none;
        height: 75px;
        border-right: none;
        border-bottom: 1px solid #474747;
        padding-top: 25px;
    }

    .playlist_box > dl > div {
        margin: 0 auto;
    }

    .playlist_box > dl > div > dt {
        width: 49%;
        float: left;
        line-height: 41px;
        margin: 0 auto;
        text-align: right;
        padding-right: 1%;
    }

    .playlist_box > dl > div > dd {
        width: 49%;
        float: left;
        padding-left: 1%;
    }

    .playlist_btn {
        display: none;
    }

    /* 미니배너 */
    .t_mini_banner {
        height: 0;
        padding-top: calc(290/474 * 100%);
        background-image: url(../img/mini_banner_m.png);
        background-position: unset;
        background-color: revert;
        background-size: cover;
        position: relative;
    }

    .t_mini_banner > .inner {
        position: absolute;
        width: 100%;
        background: none;
        top: 0;
    }

    .t_mini_banner > .inner > h2 {
        font-size: 40px;
        width: 60%;
        padding: 10% 0 0 5%;
        word-break: keep-all;
    }

    .t_mini_banner > .inner > p {
        padding: 2% 0 0 5%;
    }

    /* 최신앨범 */
    .album_set {
        height: 0;
        padding-top: calc(1500/1920*100%);
        position: relative;
    }

    .album_set > h2 {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        margin: 0 auto;
        padding-top: 50px;
    }

    .album_slider {
        width: 100%;
        position: absolute;
        top: 25%;
    }

    .album_slider > .btn_prev {
        display: none;
    }

    .album_slider > .btn_next {
        display: none;
    }

    .album_list {
        width: 70%;
        height: 0;
        padding-top: calc(1012/680*100%);
        position: relative;
    }

    .album_list > .slide {
        width: 50%;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        margin: 0 auto;
        float: none;
    }

    .album_list > .slide:nth-child(2),
    .album_list > .slide:nth-child(3) {
        display: none;
    }

    /* 스테이션 */
    .station_set {
        padding-bottom: 60px;
        padding-top: 60px;
    }

    .station_set > ul {
        width: 100%;
    }

    .station_set > ul > li {
        width: 50%;
        padding-bottom: 50px;
    }


    /* 하단배너 */
    .f_mini_banner {
        height: 0;
        padding-top: calc(277/768 * 100%);
        background-image: url(../img/f_mini_banner_m.png);
        background-size: cover;
    }


    /* footer */
    .board_set {
        width: 1oo%;
    }

    .more {
        display: none;
    }

    .top_footer {
        border-bottom: none;
        line-height: normal;
    }

    .inner {
        width: 95%;
    }

    .top_footer > .inner > ul {
        padding-top: 1%;
    }

    .top_footer > .inner > ul > li {
        width: 25%;
        text-align: center;
        padding: 1% 0;
    }

    .bottom_footer {
        padding-top: 0;
        position: relative;
        width: 100%;
        height: 73px;
    }

    .f_logo {
        display: none;
    }

    .info {
        display: none;
    }

    .copyright {
        float: none;
        position: absolute;
        top: 55%;
        width: 80%;
        left: 0;
        right: 0;
        margin: 0 auto;
        text-align: center
    }

    .copyright > ul > li {
        width: 33%;
        float: left;
        font-weight: bold;
        color: #b8b8b8
    }

    .copyright > ul:after {
        display: block;
        content: "";
        clear: both;
    }

    .copyright > ul > li > span {
        width: auto;
        padding-right: 5px;
        font-weight: normal;
        color: #868686;
    }

    #footer {
        height: 195px;
        padding-top: 2%;
    }
}

/* 여기 해주기!!!!!! */
@media (max-width:1024px) {
}

@media (max-width:768px) {

    .menu {
        display: none
    }

    #header {
        height: 92px
    }

    .bottom_header {
        height: 92px
    }

    .logo {
        top: 30px
    }

    .m_menu {
        top: 38px
    }

    .playlist_title > h2 {
        width: 35%
    }

    .banner_set > .inner > ul {
        width: 98%
    }

    .album_set {
        padding-top: calc(3000/1920*100%)
    }

    .album_list > .slide > p {
        display: none
    }

    .album_list > .slide {
        width: 100%
    }

    .f_mini_banner {
        height: 100px;
        line-height: revert
    }

    .f_mini_banner > h2 {
        float: none
    }

    .f_mini_banner > p {
        float: none;
        width: 90%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        line-height: 40px
    }

    .f_mini_banner > ul {
        display: none
    }

    .top_footer {
        display: none
    }

    .copyright > ul > li > span {
        display: block;
        height: 30px
    }
}

 

 

 

개인적으로 공부한 내용을 정리하는 블로그로
잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.

 

 

'STUDY > 2021' 카테고리의 다른 글

[반응형 웹디자인] 두번째 시안 - 하나투어  (0) 2021.09.18
[반응형웹디자인] 첫번째 시안 - 스타벅스  (0) 2021.08.30
[웹디자인] 포토샵 단축키 정리  (0) 2021.07.17
'STUDY/2021' Related Articles more
Comments

티스토리툴바