반응형

HTML5를 이용하여 쿠팡 파트너스에 적용되는 레이아웃을 적용한 적이 있습니다. 아직 초보자 수준이기 때문에, 그 상황을 감안하고 봐주시길 바랍니다. 블로그를 여러 개를 운영하고 있지만, 해당 블로그는 수익형 블로그보다는 개인적인 공부 목적으로 한다는 점을 사전에 참고 바랍니다.

 

HTML5 및 CSS 레이아웃

HTML5

HTML5 태그

<!DOCTYPE html>

<html lang="ko">

    <!-- FHD, QHD, UHD 4K, 8K

    마크업 : 어떤 기능인지 애매모호할 때, 씨맨틱 마크업 : 어떤 기능인지 알 수 있음

    -->

    <head>

        <meta charset="UTF-8">

        <meta http-equiv="X-UA-compatible" content="IE=Edge, chrome=1">

        <title> HTML5.0 3일차 - 레이아웃 (20번 참조) </title>

        <link type="text/css" rel="stylesheet" href="./index19.css?v=11">

    </head>

    <!--

    <body>

        <div class="test">

            

        </div>

    -->

    <!--

        div 태그를 많이 사용하는 이유로 인하여 아웃라인을 표기하는 형태로 변경되었습니다.

        HTML5 아웃라인 태그가 나온 이유입니다.

    -->

        <header class="header"> 

         <div class="top">

            <ol class="olcss">

                <li class=licss>로그인</li>

                <li class=licss>회원가입</li>

                <li class=licss>고객센터</li>

            </div>

            </ol>

        </header>

 <!--상단 탑메뉴 및 탑 배너 부분-->

        <nav class="nav">

         <div class="menu">

             <label class="menu_left"> CI & BI</label>

             <label class="menu_right">

                <ol class="menu_ol">

                    <li class="menu_li">로켓배송</li>

                    <li class="menu_li">골드박스</li>

                    <li class="menu_li">정기배송</li>

                    <li class="menu_li">이벤트/쿠폰</li>

                    <li class="menu_li">기획전</li>

                    <li class="menu_li">여행/티켓</li>

                    <li class="menu_li">테마관</li>

                    <li class="menu_li" style="border: 0;">마이쿠팡</li>

            </ol>

                </label>

         </div>

        </nav>  <!--대메뉴, 소메뉴에 사용되는 메뉴 파트-->

    <section class="banner">  <!--배너출력 파트 : section은 여러번 사용 가능 -->

    </section>

    <main class="main">  <!-- main은 메인페이지 및 서브페이지에서 변경된 부분만 설정-->

    <article class="a_left"></article>  <!-- article은 구역을 설정하는 태그-->

    <article class="a_right"></article>

    <aside class="f_banner"></aside> 

    <!-- aside는 플로팅 배너, 날개 배너, 이벤트 배너를 적용할 때 사용-->

    </main>

    <footer class="copy"></footer>

 <!-- footer는 copyright 및 저작권 부분-->

    </body>

</html>

CSS 태그

body{margin: 0; padding: 0; font-size:12px; font-family: "돋움체";}

span,label {display: block;}

.a{width: 100px; height: 100px; background-color:red;}

ul,ol {list-style: none; margin: 0; padding: 0; }

a {text-decoration: none;}

/* 연습 */

.test{width: 100px; height: 100px; background-color: darkgoldenrod;

padding: 50px 0 0 50px;  box-sizing: border-box;

}

/* box-sizing : 안쪽여백 또는 border 모두 width, height에 맞춰서 자동으로 크기를 맞춰줌 */

 

/* 상단 탑 메뉴 */

.header{height: 30px; background-color: gray;}

.top {width: 1200px; height: 30px; border: 1px;

margin: 0 auto; 

/* 화면 사이즈에 맞게 정 가운데 정렬을 할 때 사용합니다. */

}

.olcss{float: right;}

.licss{

    width: 60px;

     height: 30px; 

     float: left;

    text-align: center;

    line-height: 30px; 

    color:white;

}

/* 메뉴파트 */

.nav{

    height: 50px; 

    background-color: darkblue; clear: both;

}

.menu{

width: 1200px; 

height: 50px; 

margin: 0 auto; position: relative;

}

.menu_left {width: 200px; /* CI & BI */

    height: 50px; 

    background-color: yellow;}

.menu_right{width: 800px; /* 대메뉴 부분 */

    height: 50px; 

    background-color: skyblue;

position: absolute; right: 0; TOP:0;

}

.menu_ol {width: 100%;

height: 50px;

}

.menu_li{width: 100px;

height: 50px;

line-height: 50px;

text-align: center;

float:left;

box-sizing: border-box;

border-right:1px solid darkblue;

}

.menu_li:hover {

    background-color: steelblue;

}

.banner{

    clear: both;

    height: 450px; background-color: gold;

}

.main{

    width: 1200px;

    height: 1000px;

    display: block; margin: 0 auto;

    position: relative;

    /* main : IE 버전에서는 확인 안됨. 단, display:block 사용시 적용됨 */

}

.a_left{width: 70%; 

    height: 1000px; 

    background-color: purple;

float: left;

}

.a_right{width: 30%;

height: 1000px;

background-color: pink;

float: left;

}

/* 날개배너 or 플로팅 배너*/

.f_banner {width:80px;

height: 200px;

background-color: blue;

position: absolute; left:100%; margin-left:20px;

}

/* copyright */

.copy{height: 60px; background-color: black; clear: both;}

'웹퍼블리싱' 카테고리의 다른 글

HTML5 레이아웃 만들기  (0) 2021.03.31
HTML5 Video 신규속성 태그 정리  (0) 2021.03.28
HTML4 태그 정리 (6)  (0) 2021.03.25
HTML4 태그 정리 (5)  (0) 2021.03.24
HTML4 및 CSS2 태그 정리 (3)  (0) 2021.03.20
HTML 4 태그 정리 (2)  (0) 2021.03.20

+ Recent posts