메가박스 사이트 만들기 02

메가박스 사이트 만들기 02 - 헤더 영역

yumino 2019. 12. 18. 22:56
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="author" content="webstoryboy">
    <meta name="description" content="메가박스 사이트 따라하면서 배우는 튜토리얼입니다.">
    <meta name="keywords" content="메가박스, 유투브, 영화, 최신영화, 영화관, CGV, 롯데시네마, 웹스토리보이, 웹스, 사이트 만들기, 따라하기">
    <title>메가박스 사이트 코딩하기</title>
    <!-- CSS -->
    <link rel="stylesheet" href="assets/css/reset02.css">  <!-- 스타일 css 선언해서 연동해주기-->
    <link rel="stylesheet" href="assets/css/style02.css">

     <!-- 파비콘 -->
     <link rel="shortcut icon" href="assets/icons/favicon.ico">
     <link rel="apple-touch-icon-precomposed" href="assets/icons/favicon_72.png" />
     <link rel="apple-touch-icon-precomposed" sizes="96x96" href="assets/icons/favicon_96.png" />
     <link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/icons/favicon_144.png" />
     <link rel="apple-touch-icon-precomposed" sizes="192x192" href="assets/icons/favicon_192.png" />

     <!-- 페이스북 메타 태그 -->
    <meta property="og:title" content="메가박스 사이트 만들기" />
    <meta property="og:url" content="https://github.com/webstoryboy/megabox2019" />
    <meta property="og:image" content="https://webstoryboy.github.io/megabox2019/mega.jpg" />
    <meta property="og:description" content="메가박스 사이트 따라하면서 배우는 튜토리얼입니다." />
   
    <!-- 트위터 메타 태그 -->
    <meta name="twitter:card" content="summary">
    <meta name="twitter:title" content="메가박스 사이트 만들기">
    <meta name="twitter:url" content="https://github.com/webstoryboy/megabox2019/">
    <meta name="twitter:image" content="https://webstoryboy.github.io/megabox2019/mega.jpg">
    <meta name="twitter:description" content="메가박스 사이트 따라하면서 배우는 튜토리얼입니다.">

    <!-- 웹 폰트-->
    <link href="https://fonts.googleapis.com/css?family=Noto+Sans+KR:100,300,400,500,700,900&display=swap&subset=korean" rel="stylesheet">
    <style>
    /* 여백 초기화 */
    body,div,ul,li,dl,dd,dt,ol,h1,h2,h3,h4,h5,h6,input,fieldset,legend,p,select,table,th,td,tr,textarea,button,form,figure,figcaption{margin:0; padding:0;}

    /* a 링크 초기화 */
    a {color: #222; text-decoration: none;}
    a:hover {color: #2698cb;}

    /* 폰트 초기화 */
    body, input, textarea, select, button, table {font-family:'Noto Sans KR', AppleSDGothicNeo-Regular,'Malgun Gothic','맑은 고딕',dotum,'돋움',sans-serif; color: #222; font-size: 13px; line-height: 1.5;}

    /* 폰트 스타일 초기화 */
    em,address {font-style: normal;}

    /* 블릿기호 초기화 */
    ul,li,ol {list-style:none;}

    /* 제목 태그 초기화 */
    h1,h2,h3,h4,h5,h6 {font-size: 13px; font-weight: normal;}

    /* 테두리 초기화 */
    img,fieldset {border:0 none;}

    /* 버튼 초기화 */
    button {border: 0;}

    /* 반응형 */
    video,img {width: 100%;}

    /* clearfix */
    .clearfix{*zoom:1;}
    .clearfix:before, .clearfix:after {display: block; content: '';line-height: 0;}
    .clearfix:after {clear: both;}
	</style>
    <style>
    </style>
    /* 레이아웃 */
    #header {width: 100%; height: 63px; border-bottom: 1px solid #c6c6c6; background: rgba(0,0,0,0);}

    /* 가운데 영역 */
    .container {position: relative; width: 1280px; margin: 0 auto; }
    /* 로우 영역 */
    .row {padding: 0 24px;}

    /* 헤더 영역 */
    .header { }
    .header h1 {float: left; }
    .header h1 em {padding: 15px 8px 5px 0; display: inline-block; }
    .header h1 em img {width: 155px; }
    .header h1 strong {display: block; position: absolute; left: 194px; top: 23px;}
    .header h1 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: 19px 10px; font-size: 17px; font-weight: 700; color: #444;}

    <!-- HTLM5shiv ie6~8 -->
    <!--[if lt IE 9]> 
      <script src="assets/js/html5shiv.min.js"></script>
      <script type="text/javascript">
         alert("현재 브라우저는 지원하지 않습니다. 크롬 브라우저를 추천합니다.!");
      </script>
   <![endif]-->
</head>
<body>
    <header id="header">
        <div class="container">
            <div class="row">
                <div class="header clearfix">
                    <h1>
                        <a href="#">
                            <em><img src="assets/img/logo.png" alt="MEGABOX"></em>
                            <strong><img src="assets/img/logo-sub.png" alt="LIFE THEATER"></strong>
                        </a>
                    </h1>
                    <nav class="nav">
                        <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>
            </div>
        </div>
    </header>
    <!-- //header -->



      <!-- 자바스크립트 라이브러리 -->
      <script src="assets/js/jquery.min_1.12.4.js"></script>
      <script src="assets/js/modernizr-custom.js"></script>
      <script src="assets/js/ie-checker.js"></script>
</body>
</html>



♡♡♡♡♡♡♡♡♡♡♡♡♡♡♡♡♡정리♡♡♡♡♡♡♡♡♡♡♡♡♡♡♡♡♡
구조가 깨진다는건 하이트 값이 없다는것이다.
블록구조는 한 영역을 차지한다. 즉 오른쪽에 누가 오는걸 싫어한다.
인라인은 그 반대.
그래서 블록구조는 오른쪽을 정렬시켜주려면 float의 도움이 필요하다.
float을 사용하면 사용한 상위 박스(플롯을 감싸고있는)의 하이트값이 0으로 설정이 된다. 
즉, 영역이 사라진다.
이 문제를 해결하려면 영역을 다시 살려줘야 한다. 
하이트 값을 인식할 수 있도록 해주어야 한다.
1. 똑같이 float을 사용한다.
2.clear:both;를 사용한다.
3. 상위박스한테 overflow:hidden;을 사용한다.
4. clearfix를 만들어 사용한다.

clearfix - 가상으로 영역을 만들어 하이트 값을 인식하도록 만드는 방법
float을 사용한 상위박스에 .clearfix를 설정하면 된다.