티스토리 뷰

CSS

22-12-23 CSS - 디자인 실습

JadeStone 2022. 12. 23. 19:04

금일 디자인 실습한 내용들은 모두 JadeStone 깃 허브 CSS 레파지토리에 올려져있음.

https://github.com/BigJadeStone/CSS.git

 

 

<기억할만한 것>

*똑같은 글자 찾기창 키는 단축키 : ctrl + f 

*특이했던 속성들

opacity: 0; /* 투명도 0 */
transition: opacity 0.25s ease-in-out;

-opacity : 투명도를 주는 속성.

-transition : 애니메이션 효과를 주는 속성.  -> https://www.w3schools.com/css/tryit.asp?filename=trycss3_transition1 참고

- background-color: rgb(0,0,0,0.7);     

 위에 속성이 원래  rgba라고 하셨음.

 rgba 속성 : 투명도를 준 색상.

 

위에 속성 사용 참고.

#section .conts .list_wrap ul li .hover_cont{
    position: absolute;
    left:0;
    top:0;
    width: 156px; /*부모영역기반*/
    height: 156px; /*부모영역기반*/
    background-color: rgb(0,0,0,0.7);
    text-align: center;
    opacity: 0; /* 투명도 0 */
    transition: opacity 0.25s ease-in-out;
}
#section .conts .list_wrap ul li:hover .hover_cont{
    opacity: 1;
}

 

 

#melon 화면 실습

 

html코드

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

<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">
    <title>Document</title>

    <link rel="stylesheet" href="melon.css">

</head>

<body>

    <header id="header">
        <div class="wrap"><!--border-->
            <div class="top"><!--margin: 0 auto-->
                <div class="top_left"><!--left-->
                    멜론티켓
                </div>
                <div class="top_right">
                    <ul>
                        <li><a href="#"><span>이용권구매</span></a></li>
                        <li><a href="#">멜론혜택관</a></li>
                        <li><a href="#">이벤트</a></li>
                        <li><a href="#">공지사항</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="wrap"><!--border-->
            <div class="mid">
                <a href="" class="mid_left"><!--left-->
                    <img src="img/melon_logo.png">
                </a>
                <fieldset class="mid_left2"><!--left-->
                    <input type="text">
                    <button type="button"></button>
                </fieldset>
                <a href="#" class="mid_right"><!--right-->
                    <img src="img/right_logo.jpg">
                </a>
            </div>
            <div class="bottom">
                <ul class="bottom_left">
                    <li><a href="#">멜론차트</a></li>
                    <li><a href="#">최신음악</a></li>
                    <li><a href="#">장르음악</a></li>
                    <li><a href="#">멜론DJ</a></li>
                    <li><a href="#">멜론TV</a></li>
                    <li><a href="#">스타포스트</a></li>
                    <li><a href="#">매거진</a></li>
                    <li><a href="#">뮤직어워드</a></li>
                    <li><a href="#">어학</a></li>
                </ul>
                <ul class="bottom_right">
                    <li><a href="#">마이뮤직</a></li>
                </ul>
            </div>
        </div>
    </header>

    <section id="section">
        <div class="wrap"><!-- margin : 0 auto -->
            <h3 style="margin-top: 20px;">최신앨범</h3>

            <div class="conts"><!-- overflow -->
                <div class="list_wrap"><!-- 사진영역 -->
                    <ul>
                        <li>
                            <a href="#">
                                <img src="img/album.jpg">
                                <span class="singer">이무진</span>
                            </a>
                            <div class="hover_cont">
                                <a href="#">
                                    이별 후 첫 번째<br>
                                    전상근
                                </a>
                            </div>
                        </li>
                        <li>
                            <a href="#">
                                <img src="img/album.jpg">
                                <span class="singer">이무진</span>
                            </a>
                            <div class="hover_cont">
                                <a href="#">
                                    이별 후 첫 번째<br>
                                    전상근
                                </a>
                            </div>
                        </li>
                        <li>
                            <a href="#">
                                <img src="img/album.jpg">
                                <span class="singer">이무진</span>
                            </a>
                            <div class="hover_cont">
                                <a href="#">
                                    이별 후 첫 번째<br>
                                    전상근
                                </a>
                            </div>
                        </li>
                        <li>
                            <a href="#">
                                <img src="img/album.jpg">
                                <span class="singer">이무진</span>
                            </a>
                            <div class="hover_cont">
                                <a href="#">
                                    이별 후 첫 번째<br>
                                    전상근
                                </a>
                            </div>
                        </li>
                        <li>
                            <a href="#">
                                <img src="img/album.jpg">
                                <span class="singer">이무진</span>
                            </a>
                            <div class="hover_cont">
                                <a href="#">
                                    이별 후 첫 번째<br>
                                    전상근
                                </a>
                            </div>
                        </li>
                        <li>
                            <a href="#">
                                <img src="img/album.jpg">
                                <span class="singer">이무진</span>
                            </a>
                            <div class="hover_cont">
                                <a href="#">
                                    이별 후 첫 번째<br>
                                    전상근
                                </a>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="slide_wrap"><!-- 프로모션영역 -->
                    <img src="img/slide01.png">
                </div>
                <div class="user_wrap"><!-- 로그인영역 -->
                    <div class="login_wrap">
                        <div class="top">
                            <p class="left">멜론을 더 안전하게 이용하세욜</p>
                            <p class="right">회원가입</p>
                        </div>
                        <button type="button" class="login_btn">로그인</button>
                    </div>
                    <div class="promo_wrap"><img src="img/melon_promotion.png"></div>
                </div>
            </div>

            <div class="hot_issue">
                <h4>
                    인기있어요
                    <span>지금 이슈가 되는 아티스트의 인기 컨텐츠입니다.</span>
                </h4>
                <ul>
                    <li style="margin-left: 0;">
                        <a href="#">
                            <img src="img/issue01.jpg" style="width: 223px; height: 148px;">
                        </a>
                        <div class="inner">
                            <a href="#">
                                <span class="title">기다렸던 LISA의 첫 솔로!</span>
                                <span class="cont">걸크러시 뿜뿜 'LALISA' 뮤직비디오</span>
                                <span class="hit">
                                    멜론Tv 
                                    <span>조회20,783</span>
                                </span>
                            </a>
                        </div>
                    </li>
                    <li>
                        <a href="#">
                            <img src="img/issue01.jpg" style="width: 223px; height: 148px;">
                        </a>
                        <div class="inner">
                            <a href="#">
                                <span class="title">기다렸던 LISA의 첫 솔로!</span>
                                <span class="cont">걸크러시 뿜뿜 'LALISA' 뮤직비디오</span>
                                <span class="hit">
                                    멜론Tv 
                                    <span>조회20,783</span>
                                </span>
                            </a>
                        </div>
                    </li>
                    <li>
                        <a href="#">
                            <img src="img/issue01.jpg" style="width: 223px; height: 148px;">
                        </a>
                        <div class="inner">
                            <a href="#">
                                <span class="title">기다렸던 LISA의 첫 솔로!</span>
                                <span class="cont">걸크러시 뿜뿜 'LALISA' 뮤직비디오</span>
                                <span class="hit">
                                    멜론Tv 
                                    <span>조회20,783</span>
                                </span>
                            </a>
                        </div>
                    </li>
                    <li style="margin-left: 0;">
                        <a href="#">
                            <img src="img/issue01.jpg" style="width: 223px; height: 148px;">
                        </a>
                        <div class="inner">
                            <a href="#">
                                <span class="title">기다렸던 LISA의 첫 솔로!</span>
                                <span class="cont">걸크러시 뿜뿜 'LALISA' 뮤직비디오</span>
                                <span class="hit">
                                    멜론Tv 
                                    <span>조회20,783</span>
                                </span>
                            </a>
                        </div>
                    </li>
                    <li>
                        <a href="#">
                            <img src="img/issue01.jpg" style="width: 223px; height: 148px;">
                        </a>
                        <div class="inner">
                            <a href="#">
                                <span class="title">기다렸던 LISA의 첫 솔로!</span>
                                <span class="cont">걸크러시 뿜뿜 'LALISA' 뮤직비디오</span>
                                <span class="hit">
                                    멜론Tv 
                                    <span>조회20,783</span>
                                </span>
                            </a>
                        </div>
                    </li>
                    <li>
                        <a href="#">
                            <img src="img/issue01.jpg" style="width: 223px; height: 148px;">
                        </a>
                        <div class="inner">
                            <a href="#">
                                <span class="title">기다렸던 LISA의 첫 솔로!</span>
                                <span class="cont">걸크러시 뿜뿜 'LALISA' 뮤직비디오</span>
                                <span class="hit">
                                    멜론Tv 
                                    <span>조회20,783</span>
                                </span>
                            </a>
                        </div>
                    </li>
                </ul>
            </div>
        </div>

    </section>


</body>

</html>

css코드

*{margin: 0; padding: 0; list-style: none;}
a{text-decoration: none;}
img{max-width: 100%; height: auto;}

#header{border-top:3px solid #00d344;}
#header .wrap{border-bottom: 1px solid #999 ;}
#header .wrap .top{margin:0 auto; width: 1008px; overflow: hidden;}
#header .wrap .top .top_left{float: left; padding: 11px 7px;}
#header .wrap .top .top_right{float: right;}
.top_right ul li{display:inline; border-left: 1px solid #999;}
.top_right ul li a{display:inline-block;  color:#999; font-weight:700; padding:11px 7px; }
.top_right ul li a span{}

.mid{
    overflow: hidden;
    width: 1008px;
    margin:0 auto;
}
.mid .mid_left{float: left;} 
.mid .mid_left2{
    float: left;
    width: 330px;
    height: 40px;
    border: none;
    margin: 36px 0 0 11px;
    background-image: url('img/bg_cmn_search322.png');
    overflow: hidden;
}
.mid .mid_left2 input{
    float: left;
    width: 260px;
    height: 25px;
    margin: 7px 0 0 18px;
    border: none;
}
.mid .mid_left2 button{
    float: right;
    width:45px;
    height:40px;
    margin: 0;
    border: none;
    cursor: pointer;
    background-image: url('img/btn_search_bar.png');
    background-color: #fff;
}
.mid .mid_right{
    float: right;
    margin-top: 10px;
}

.bottom{
    width: 1008px;
    margin: 0 auto;
    overflow: hidden;
}
.bottom .bottom_left{
    float: left;
}
.bottom .bottom_left li{
    display: inline-block;
    padding-right: 10px;
}
.bottom .bottom_right{
    float: right;
    display: inline-block;

}
.bottom_left li a,
.bottom_right li a{
    display: inline-block;
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    width: 75px;
    height: 40px;
    color: #000;
}

/*****************section******************/

#section .wrap {
    width: 1008px;
    margin: 0 auto;
}
.conts {
    overflow: hidden;
}
.conts .list_wrap {width: 480px; float: left;}
.conts .slide_wrap {width: 236px; float: left;   margin-left: 4px;}
.conts .user_wrap {width: 280px; float: left; border: 1px; margin-left: 8px;}

.conts .list_wrap ul {overflow: hidden;}
.conts .list_wrap ul li {
    float: left; 
    width: 33.3333%; 
    height: 159px; 
    box-sizing: border-box;

    position: relative;
}


#section .conts .list_wrap ul li a{
    position: relative;
}
#section .conts .list_wrap ul li .singer{
    position: absolute;
    bottom: 4px;
    left: 0;
    width: 100%;
    background-color: #000;
    color: #fff;
    height: 22px;
    line-height: 22px;
    font-size: 13px;
    text-align: center;
}
#section .conts .list_wrap ul li .hover_cont{
    position: absolute;
    left:0;
    top:0;
    width: 156px; /*부모영역기반*/
    height: 156px; /*부모영역기반*/
    background-color: rgb(0,0,0,0.7);
    text-align: center;
    opacity: 0; /* 투명도 0 */
    transition: opacity 0.25s ease-in-out;
}
#section .conts .list_wrap ul li:hover .hover_cont{
    opacity: 1;
}

#section .conts .list_wrap ul li .hover_cont a{
    margin-top: 55px;
    display: block;
    color: #fff;
    font-weight: 900;
    font-size:12px;
}


.user_wrap .login_wrap {
    border: 1px solid #777;
    height: 118px;
    margin-bottom: 8px; 
    padding: 0 15px;
    
}
.user_wrap .promo_wrap {
    /* border: 1px solid #777; 
    height: 155px;  */
}

.login_wrap .top {overflow: hidden; margin-top: 30px;}
.login_wrap .top .left {float: left; font-size: 13px; color: #555;}
.login_wrap .top .right {float: right; font-size: 13px; color: #555;}
.login_wrap .login_btn {
    background-color: #00d344;
    width: 100%;
    border: none;
    cursor: pointer;
    color: #fff;
    font-size: 15px;
    padding: 10px 0;
    margin-top: 10px;
}


/*----------------hot_issue----------------*/

.wrap .hot_issue{
    width: 704px;
    margin-top: 20px
}
.wrap .hot_issue h4 span{
    font-size: 9px;
    color: #999
}
.wrap .hot_issue h4{
    border-bottom: 1px solid #999;
    padding: 5px;
}

.wrap .hot_issue ul{
    overflow: hidden;
}
.wrap .hot_issue ul li{
    float: left;
    margin: 16px 0 0 16px;
}
/* .wrap .hot_issue ul li.m0 {
    margin-left: 0;
} */

.wrap .hot_issue .inner span{display: block;}
.wrap .hot_issue .inner .title{
    font-size: 15px;
    color: #000;
    margin-top:5px ;
}
.wrap .hot_issue .inner .cont{
    font-size: 10px;
    color: #777;
    margin-top:5px ;
}
.wrap .hot_issue .inner .hit{
    font-size: 10px;
    color: green;
    margin-top:5px ;
}
.wrap .hot_issue .inner .hit span{
    display: inline;
    color: #777;
}

 

#실습

https://parkinwook.github.io/TEST1_1.github.io/

 

Web Flavor

Main Article Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in magna libero. Sed nec pharetra nunc. Proin eget magna id ipsum eleifend cursus sit amet nec lectus. Nunc quis lacus magna. Aliquam blandit, sapien ut viverra fermentum, elit

parkinwook.github.io

싸이트에 들어가서 개발자 도구를 이용해서 어떻게 만들어졌는지 살펴보자.

 

저작자표시

'CSS' 카테고리의 다른 글

22-12-27 부트스트랩 이용한 디자인 실습 , FLEX 문법  (0) 2022.12.27
22-12-26 반응형 디자인, 부트스트랩  (0) 2022.12.26
22-12-22 css - 박스레이아웃(position)  (1) 2022.12.22
22-12-21 css기초- 패딩과마진 , 박스사이징,박스레이아웃, float  (0) 2022.12.21
22-12-20 css기초 - 단위, 선택자, 폰트, border속성, 텍스트 속성, 텍스트 정렬, display속성, background속성  (0) 2022.12.20
댓글