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