반응형

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 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

M4미스터트롯4투표 & 프로그램 가이드투표하기 ↗

THE NEXT VOICE · MR. TROT 4

다시, 대한민국의 마음을 울릴 목소리.

미스터트롯4

당신의 응원이 시작되는 곳

투표 방법부터 참가자 소식, 순위와 방송 정보까지.
응원에 필요한 정보를 한곳에서 확인하세요.

미스터트롯4 투표하기 ↗

투표 방법·공지 안내 페이지로 이동합니다.

MR. TROT 4INDEPENDENT FAN GUIDE한 표에 담는 응원
참여 전 확인

투표 앱·문자번호·일정은 이번 시즌의 공식 공지를 기준으로 확인하세요.

방송사 공지 ↗

01 / VOTING GUIDE

응원하는 마음,
올바른 참여부터.

먼저 이번 시즌의 참여 조건을 확인하세요.
실제 투표는 방송사가 지정한 서비스에서 진행됩니다.

01

공식 안내 확인

방송사 공지에서 투표 개시 여부와 참여 경로를 확인합니다. 지난 시즌 정보를 그대로 사용하지 마세요.

02

참여 조건 확인

선택 인원, 참여 횟수, 집계 기간과 유료 여부를 확인합니다. 문자투표는 방송 중 공식 안내를 따르세요.

03

접수 완료 확인

공식 서비스에서 참가자를 선택한 뒤 최종 접수 여부를 확인합니다. 안내 버튼 클릭만으로 투표되지 않습니다.

미스터트롯4 투표 안내

참여 방법과 공지 확인 경로를 안내합니다.

미스터트롯4 투표하기 ↗
응원 소식을 더 가까이

지정 카카오톡 채널에서 게시되는 소식을 확인하세요.

카카오톡 채널 추가 ↗

02 / ARTISTS & RESULTS

목소리를 만나고,
무대의 기록을 읽다.

참가자와 순위는 공식 발표를 기준으로.
응원투표와 경연 결과를 구분해 확인하세요.

PARTICIPANTS

참가자 안내

참가자 명단과 소개는 방송사의 공식 공개 내용을 확인해 주세요. 확인되지 않은 출연자 명단은 게재하지 않습니다.

공식 프로그램 페이지 ↗
RANKINGS & RESULTS

순위·결과 확인

이 페이지에는 검증되지 않은 순위나 실시간 수치를 표시하지 않습니다. 발표일과 집계 기간을 함께 확인하세요.

미스터트롯4 결과 안내 ↗

03 / ON AIR

다음 무대를
기다리는 당신에게.

TV CHOSUN 프로그램 홈 ↗
프로그램
미스터트롯4
방송사
TV CHOSUN
방송·편성
공식 편성표와 프로그램 공지 확인
투표 일정
이번 시즌 공식 투표 공지 확인

방송 편성과 참여 조건은 변경될 수 있습니다. 투표 앱·문자번호·참여 횟수는 확인된 공식 공지 없이 안내하지 않습니다.

04 / QUESTIONS

참여 전에
궁금한 이야기.

정확하게 알고,
마음 편히 응원하세요.

이 블로그에서 바로 투표할 수 있나요?

이 블로그는 독립 팬 안내 공간입니다. 메인 버튼은 미스터트롯4 안내 페이지로 연결되며, 실제 접수와 집계는 방송사가 지정한 공식 투표 서비스에서 이루어집니다.

어떤 앱을 설치해야 하나요?

이번 시즌 공식 공지에서 지정한 앱과 참여 방법을 확인해 주세요. 과거 시즌의 앱이나 인터넷에 공유된 문자번호를 그대로 사용하지 마세요.

순위와 결과는 같은 의미인가요?

응원투표 순위와 방송 경연 결과는 집계 방식과 반영 비율이 다를 수 있습니다. 공식 발표의 기간·기준·발표일을 함께 확인하세요.

카카오톡 채널은 공식 투표 채널인가요?

지정된 소식 채널로 연결됩니다. 채널 추가만으로 투표되지 않으며, 실제 투표 경로는 방송사의 공식 공지를 기준으로 확인해야 합니다.

기존 블로그 글은 어디에서 보나요?

기존 글은 전체 글 목록에서 계속 확인할 수 있습니다.

전체 글 보기 →

05 / MORE TROT

현역가왕4도
함께 응원하시나요?

현역가왕4 투표와 참여 정보를 확인하려면 아래 안내 페이지를 이용하세요. 참여 전 프로그램명, 시즌, 공식 투표 기간과 접수 경로를 다시 확인해 주세요. 미스터트롯4와 참여 방식이 같다고 가정하지 마세요.

현역가왕4 투표하기 ↗미스터트롯4 관련 안내 ↗
미스터트롯4 투표하기 ↗카카오톡 채널

티스토리툴바