☭DEVELOPER/#2 웹개발(자바기반 풀스택)

비주얼 스튜디오 코드 59_하이시네마 웹페이지 만들기

조반짝 2023. 7. 3. 17:44
728x90
반응형

● 파비콘 링크하기  

header 영역 

html 마크업

h1 > a > em / strong 마크업

nav 마크업 (nav 두개 만들예정 , pc네비게이션, 모바일 네비게이션)

css편집

#header

.container

.row

모바일 네비게이션 편집

#mNav 편집

.ham span 편집

.ham span 가상요소 만들기

#mNav

display:none; 숨겨놓기

반응형 로고 만들기

.header .logo  편집

.nav (pc버전)편집

nav float 띄우기 > html > header에 clearfix 넣기 

반응형 적용하기

media.css 만들기

max-width: 1290px

.container

max-width: 1024px

.header .nav 숨겨주기

햄버거 메뉴 나오게하기

max-width: 960px

로고 가운데 정렬하기

float 해지하기

화면이 축소됨에 따라 .row 값 줄이기

max-width: 600px

메인 로고 왼쪽 위치하고 서브로고는 삭제하기

banner 영역 

html 마크업

banner 부분

banner 메뉴 부분 나눠서 영역 잡기

css 편집

.banner_menu 

배너 이미지 고정하기

.slider 

li에 각 class 지정하기

css 편집

.bm_left 편집

li_total 편집

mouse over 효과

.bm_right 편집

반응형 1060px 

배너메뉴 숨기기

960px 에서 왼쪽 배너메뉴 숨기기

<html>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>하이시네마_1</title>
    <!-- CSS -->
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="./css/media.css">
    <!-- 파비콘 -->
    <link rel="shortcut icon" href="./image/ICON.png">
</head>
<body>
    <header id="header">
        <div class="container">
            <div class="row">
                <div class="header clearfix">
                    <h1 class="logo">
                        <a href="#">
                            <em><img src="./image/logo.png" alt="하이시네마"></em>
                            <strong><img src="./image/logo_sub.png" alt="하이미디어영화관"></strong>
                        </a>
                    </h1>
                    <nav id="mNav">
                        <h2 class="ir_su">하이시네마 전체메뉴(모바일)</h2>
                        <a href="#" class="ham"><span></span></a> <!--span으로 가상요소 만들 예정-->
                    </nav>
                    <nav class="nav">
                        <h2 class="ir_su">하이시네마 전체메뉴(PC)</h2>
                        <ul class="clearfix">
                            <li><a href="#">영화</a></li>
                            <li><a href="#">큐레이션</a></li>
                            <li><a href="#">영화관</a></li>
                            <li><a href="#">특별관</a></li>
                            <li><a href="#">스토어</a></li>
                            <li><a href="#">이벤트</a></li>
                            <li><a href="#">로그인</a></li>
                        </ul>
                    </nav>
                </div><!--//.header-->
            </div><!--//row-->
        </div><!--//container-->
    </header><!--//#header-->
    <section id="banner">
        <h2 class="ir_su">최신 영화 소식</h2>
        <!-- 베너메뉴 -->
        <div class="banner_menu clearfix">
            <div class="container">
                <div class="row">
                    <div class="bm_left">
                        <ul class="clearfix">
                            <li class="total"><a href="#">전체메뉴</a></li>
                            <li class="line"><a href="#">필름 소사이어티</a></li>
                            <li><a href="#">클래식 소사이어티</a></li>
                        </ul>
                    </div>
                    <div class="bm_right clearfix">
                        <ul class="clearfix">
                            <li class="line"><a href="#">고객센터</a></li>
                            <li class="line"><a href="#">멤버십</a></li>
                            <li><a href="#">VIP</a></li>
                        </ul>
                        <ul class="clearfix">
                            <li class="white"><a href="#">상영시간표</a></li>
                            <li class="purple"><a href="#">빠른예매</a></li>
                        </ul>
                    </div>
                </div><!--row-->
            </div><!--container-->
        </div>
        <!-- 이미지 -->
        <div class="slider">
            <img src="./image/banner2.jpg" alt="배너이미지">
        </div>
    </section><!--//banner-->
</body>
</html>

<style.css>

@charset "utf-8";

#header{
    width: 100%;
    border-bottom: 1px solid #c6c6c6;
}
#mNav{
    position: absolute;
    top: 10px;
    right: 14px;
    display: none;
}
#banner{
    /* banner_menu의 기준점 */
    position: relative;
}

.container{
    width: 1280px;
    margin: 0 auto;
    position: relative;
    /* background-color: rgba(0, 0, 0, 0.1); */
}
.row{
    padding: 0 28px;
}

/* 모바일 네비게이션 편집 */
.ham{
    display: block;
    width: 25px;
    height: 10px;
    /* background-color: rgba(0, 0, 0, 0.3); */
    padding: 15px 10px 10px 10px;
}
.ham span{
    display: block;
    width: 25px;
    height: 4px;
    background-color: #30106a;
    position: relative;
}
.ham span::before,.ham span::after{
    content: "";
    width: 25px;
    height: 4px;
    background-color: #30106a;
    position: absolute;
    left: 0;
    top: 8px;
}
.ham span::after{
    top: -8px;
}

/* header */
.header{}
.header .logo{
    float: left;
}
.header .logo a{}
/* 하이시네마 */
.header .logo a em{
    padding: 15px 8px 5px 0;
    display: inline-block;
}
.header .logo a em img{
    /* 너비값만 넣어주어 비율 맞게 들어가게한다. */
    width: 155px;
}
/* 하이미디어영화관 */
.header .logo a strong{
    display: block;
    /* container에 기준점이 있음 */
    position: absolute;
    left: 194px;
    top: 24px;
}
.header .logo a strong img{
    width: 126px;
}


.header .nav{
    float: right;
}
.header .nav ul{
    border-left: 1px solid #c6c6c6;
}
.header .nav ul li{
    float: left;
    width: 103px;
    text-align: center;
    border-right: 1px solid #c6c6c6;
}
.header .nav ul li a{
    display: block;
    padding: 20px 10px;
    font-weight: 700;
    font-size: 17px;
    color: #444;
}

/* banner_menu */
.banner_menu{
    position: absolute;
    left: 0;
    width: 100%;
    top: 20px;
}
.banner_menu a{
    color: #fff;
    font-size: 16px;
    transition: all 0.3s;
}
.banner_menu a:hover{
    color: #000;
}
/* 왼쪽 정렬 */
.banner_menu .bm_left{
    float: left;
}
.banner_menu .bm_left ul{
    margin-top: 7px;
}
.banner_menu .bm_left ul li{
    /* 옆으로 나열 */
    display: inline;
}
.banner_menu .bm_left ul li.total{
    margin-right: 20px;
}
.banner_menu .bm_left ul li.total a{
    border: 1px solid #fff;
}
.banner_menu .bm_left ul li.total a:hover{
    background-color: #fff;
    color: #000;
}
.banner_menu ul li.line{
    margin-right: 30px;
    position: relative;
}
.banner_menu ul li.line::after{
    position: absolute;
    content: "";
    right: -18px;
    top: 0;
    width: 1px;
    height: 16px;
    background-color: #fff;
}
.banner_menu .bm_left ul li a{
    display: inline-block;
    padding: 3px 10px;
}

/* 오른쪽 정렬 */
.banner_menu .bm_right{
    float: right;
}
.banner_menu .bm_right ul{
    float: left;
   
}
.banner_menu .bm_right ul:first-child{
    margin-top: 10px;
}

.banner_menu .bm_right ul li{
    float: left;
    margin-right: 30px;
}

.banner_menu .bm_right ul li.line::after{
    top: 6px;
}

/* .banner_menu .bm_right ul li.line{
    margin-right: 30px;
    position: relative;

}
.banner_menu .bm_right ul li.line::after{
    content: "";
    position: absolute;
    width: 1px;
    height: 16px;
    top: 3px;
    right: -9px;
    background-color: #fff;
} */
.banner_menu .bm_right ul li.white{}
.banner_menu .bm_right ul li.white a{
    display: inline-block;
    width: 80px;
    background-color: #fff;
    color: #3a0e6a;
    padding: 7px 30px;
    border: 1px solid #30106a;
    text-align: center;
}
.banner_menu .bm_right ul li.purple{}
.banner_menu .bm_right ul li.purple a{
    display: inline-block;
    background-color: #30106a;
    padding: 7px 30px;
    width: 80px;
    text-align: center;
    border: 1px solid #6e40c4;
}



.banner_menu a{
    color: #fff;
    font-size: 16px;
    transition: all 0.3s;
}
.banner_menu a:hover{
    color: #c1c1c1;
}

.slider{}
.slider img{
    width: 100%;
}

<media.css>

@charset "utf-8";
@media(max-width:1290px){
    .container{
        width: 100%;    
    }
    .header .nav ul li{width: 93px;}
}
@media(max-width:1060px){
    .banner_menu .bm_right ul:first-child{display: none;}
}

/* 노트북 */
@media(max-width:1024px){
    .row{padding: 0 20px;}
    .header .nav{display: none;}
    #mNav{display: block;}
}

@media(max-width:960px){
    .row{padding: 0 20px;}
    /* 로고 가운데 정렬하기 > float 해제 */
    .header .logo{float: none; text-align: center; width: 100%;}
    .header .logo a strong{left: 15px;}
    .banner_menu .bm_left ul li.line{display: none;}
    .banner_menu .bm_left ul li:nth-of-type(3){display: none;}

}
/* 태블릿 */
@media(max-width:768px){
    .row{padding: 0 13px;}
}
/* 모바일폰 */
@media(max-width:600px){
    .row{padding: 0 10px;}
    .header .logo{float: none; text-align: left; width: 100%;}
    .header .logo a strong{display: none;}
    .banner_menu .bm_right ul li.white a{padding: 3px 15px;}
    .banner_menu .bm_right ul li.purple a{padding: 3px 15px;}
}
@media(max-width:480px){
    .row{padding: 0 7px;}
}
@media(max-width:360px){}
728x90
반응형
저작자표시 비영리 변경금지

'☭DEVELOPER > #2 웹개발(자바기반 풀스택)' 카테고리의 다른 글

비주얼 스튜디오 코드 61 _ 비교연산자  (0) 2023.07.04
비주얼 스튜디오 코드 60_ parallax 06  (0) 2023.07.04
비주얼 스튜디오 코드 58_햄버거 메뉴 복습  (0) 2023.07.03
비주얼 스튜디오 코드 57 _ parallax 05  (0) 2023.06.30
비주얼 스튜디오 코드 56_ 반응형 메뉴(모바일 네비게이션)  (0) 2023.06.30

'☭DEVELOPER/#2 웹개발(자바기반 풀스택)'의 다른글

  • 현재글비주얼 스튜디오 코드 59_하이시네마 웹페이지 만들기

관련글

티스토리툴바