CSS3

1931 No

웹 표준 사이트 만들기 - webstandard2019 (webstoryboy) - 1 레이아웃 구조 실습

2022-09-19 15:57:52 By 라이트 0 527 댓글수 4 포스트 하기
5월 2024
일월화수목금토
   1234
567891011
12131415161718
19202122232425
262728293031 

 

 

유튜브 강의목록 : https://www.youtube.com/playlist?list=PL4UVBBIc6giKixok-bC7XVEx0ZFsngr5Z

인프런 강의 :  https://www.inflearn.com/course/웹-표준-사이트-만들기/dashboard

 

 

 

강의 참고자료

 

 

 

1.레이아웃 구조 실습

 

1. 01. 웹 표준 사이트 만들기(2019) - layout01

 

 

 

01.layout01.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{background: #c8e6c9;}
        #wrap{width: 1000px;   height: 900px;   margin: 0 auto; font-size: 40px; color: #fff;
            text-align: center;text-transform: uppercase}
        #header{width: 1000px; height:100px; line-height: 100px; background: #2e7d32;}
        #nav{ width: 1000px; height: 100px;  line-height: 100px; background: #388e3c;}
        #side{float:left; width: 300px; height: 600px;  line-height: 600px; background: #43a047;}
        #contents{float:left;width: 700px; height: 600px;   line-height: 600px; background: #4caf50;}
        #footer{float:left;width: 1000px;height: 100px;  line-height: 100px; background: #66bb6a;}
    </style>
</head>
<body>
    <div id="wrap">
        <div id="header">header</div>
        <div id="nav">nav</div>
        <div id="side">side</div>
        <div id="contents">contents</div>
        <div id="footer">footer</div>
    </div>
</body>
</html>

 

 

 

 

02. 웹 표준 사이트 만들기(2019) - layout02

 

 

 

02.layout01.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>layout02</title>
    <style>
        body{background: #b3e5fc;}
        #wrap{width: 1000px; height: 900px; margin:0 auto; font-size: 40px; color: #fff; text-align: center;text-transform: uppercase;}
        #header{width: 1000px; height: 100px; line-height: 100px; background-color: #0277bd;}
        #nav{width: 1000px; height: 100px; line-height: 100px;background-color: #0288d1;}
        #side_left{float: left;   width: 300px; height: 600px; line-height: 600px;background-color: #039be5;}
        #contents{float: left; width: 400px; height: 600px; line-height: 600px;background-color: #03a9f4;}
        #side_right{float: left; width: 300px; height: 600px; line-height: 600px;background-color: #29b6f6;}
        #footer{ clear: both;   width: 1000px; height: 100px; line-height: 100px;background-color: #0288d1;}
    </style>
</head>
<body>
    <div id="wrap">
        <div id="header">header</div>
        <div id="nav">nav</div>
        <div id="side_left">side_left</div>
        <div id="contents">contents</div>
        <div id="side_right">side_right</div>
        <div id="footer">footer</div>
    </div>
    
</body>
</html>

 

 

 

 

03.  layout03

 

03.layout03.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>layout03</title>
    <style>
        body{background:#d1c4e9;font-size: 40px; color: #fff;text-align: center; text-transform: uppercase;}
        #wrap{width: 1000px; height: 900px; line-height: 900px; margin: 0 auto;}
        .side{float: left;  width: 300px; height: 900px ;  line-height: 900px; background-color: #4527a0;}
        .header{float: left; width: 700px; height: 300px;  line-height: 300px; background-color: #512da8;}
        .contents{ float:left; width: 700px; height: 300px;  line-height: 300px; background-color: #5e35b1;}
        .footer{float: left;  width:700px;  height: 300px;   line-height: 300px;background-color: #673ab7; }
    </style>
</head>
<body>
    <div id="wrap">
        <div class="side">side</div>
        <div class="header">header</div>
        <div class="contents">contents</div>
        <div class="footer">footer</div>
    </div>
</body>
</html>

 

 

 

 

04.  layout04


 

04.layout04.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>layout04</title>
    <style>
        body{background-color: #ffe0b2;}
        #wrap{width: 1000px; height: 900px; margin: 0 auto; color: #fff; font-size: 40px; text-transform: uppercase;text-align: center }
        #header{ width: 1000px;  height: 100px; line-height: 100px; background-color: #ef6c00;}
        #nav{width: 1000px;  height: 100px; line-height: 100px;background-color: #f57c00;}
        #side{float: left;  width: 300px; height: 600px;line-height: 600px; background-color: #fb8c00;}
        #content1{float:left;width: 700px; height: 300px;line-height: 300px; background-color: #ff9800;}
        #content2{float:left; width: 700px; height: 300px;line-height: 300px; background-color: #ffa726;}
        #footer{clear: both; width: 1000px; height: 100px;line-height: 100px; background-color: #ffb74d;}
    </style>
</head>
<body>


    <div id="wrap">
        <div id="header">header</div>
        <div id="nav">nav</div>
        <div id="side">side</div>
        <div id="content1">content1</div>
        <div id="content2">content2</div>
        <div id="footer">footer</div>
    </div>
    
    
</body>
</html>

 

 

 

 

 

05.  layout05

 

 

 

05.layout05.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>layout05</title>
    <style>
        *{margin: 0; padding: 0;}
        #wrap{color: #fff; font-size: 30px; text-align: center; text-transform: uppercase;}
        #header-wrap {width:100%; background-color: #8d6e63; }
        #banner-wrap {width:100%;  background-color: #a1887f;}
        #content-wrap {width:100%; background-color: #bcaaa4;}
        #footer-wrap {width:100%;  background-color: #d7ccc8;}

        .header-container{ width: 1000px; margin: 0 auto;  height: 100px; line-height: 100px;  background-color: #3e2723;}
        .banner-container{ width: 1000px; margin: 0 auto;  height: 300px; line-height: 300px; background-color: #4e342e;}
        .content-container{width: 1000px; margin: 0 auto; height: 500px; line-height: 500px; background-color: #5d4037;}
        .footer-container{width: 1000px;  margin: 0 auto; height: 100px; line-height: 100px; background-color: #6d4c41;}
    </style>
</head>
<body>
    <div id="wrap"> 
        <div id="header-wrap">
            <div class="header-container">header</div>
        </div>

        <div id="banner-wrap">
            <div class="banner-container">banner</div>            
        </div>

        <div id="content-wrap">
            <div class="content-container">content</div>
        </div>

        <div id="footer-wrap">
            <div class="footer-container">footer</div>
        </div>        
    </div>
    
</body>
</html>

 

 

 

 

 

 

 

 

 

 

06.  layout06

 

 

 

06.layout06.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>layout06</title>
    <style>
        *{margin: 0; padding: 0;}
        #wrap{text-align: center; font-size: 30px; color: #fff; text-transform: uppercase}
        #header{height:140px;  line-height: 140px; background: #ffe1e4 }
        #banner{ height:450px ;  line-height: 450px; background: #fbd6e3;}
        #contents{ height:950px;  line-height: 950px; background: #ead5ee}
        #footer{ height:220px;  line-height: 220px; background: #d6ebfd}

        /* .header-container{width: 1100px; height: 140px; margin: 0 auto; background: #999}
        .banner-container{width: 1100px; height: 450px;  margin: 0 auto; background: #888}
        .contents-container{width: 1100px; height: 950px;  margin: 0 auto; background: #777}
        .footer-container{width: 1100px; height:220px;   margin: 0 auto; background: #666} */
        .container{width: 1100px; height:inherit;   margin: 0 auto; background: rgba(0, 0, 0,0.3) }
    </style>
</head>
<body>
    <div id="wrap">
        <div id="header">
            <div class="container header-container">header</div>
        </div>
        <div id="banner">
            <div class="container banner-container">banner</div>
        </div>
        <div id="contents">
            <div class="container contents-container">contents</div>
        </div>
        <div id="footer">
            <div class="container footer-container">footer</div>
        </div>
    </div>
</body>
</html>

 

 

 

 

 

 

 

 

 

07.  layout07

 

 

 

 

07.layout07.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>layout07</title>
    <style>
        /* 리셋 */
        *{margin: 0; padding: 0;}
        
        /* 전체 레이아웃 */
        #wrap{ text-align: center; color: #fff; text-transform: uppercase; font-size: 30px;}
        #header{ height: 140px;  background: #111;}
        #banner{ height: 450px; line-height: 450px; background: #4dd0e1}
        #contents{ height: 950px; background: #333}
        #footer{ height: 220px; background: #444}

        /* 레이아웃 */
        #header-top{height: 70px;  line-height: 70px; background: #b2ebf2}
        #header-nav{ height: 70px; line-height: 70px; background: #80deea}
        #content1{ height: 90px; line-height: 90px;     background-color: #26c6da;}
        #content2{ height: 480px; line-height: 480px;    background-color: #00bcd4;}
        #content3{ height: 380px;line-height: 380px;     background-color: #00acc1;}
        #footer-nav{ height: 60px;line-height: 60px;    background-color: #0097a7;}
        #footer-info{ height: 160px;line-height: 160px; background-color: #00838f;}

        /* 컨테이너 */
        .container{width: 1100px; margin: 0 auto; height: inherit; background: rgba(0, 0, 0, 0.3);}


    </style>
</head>
<body>

    <div id="wrap">
        <div id="header">
            <div id="header-top">
                <div class="container">header-top</div>
            </div>
            <div id="header-nav">
                 <div class="container">header-nav</div>
            </div>
        </div>
        <!-- //header -->

        <div id="banner">
                 <div class="container">banner</div>
        </div> <!-- //banner -->

        <div id="contents">
                <div id="content1">
                     <div class="container">content1</div>
                </div>
                <div id="content2">
                     <div class="container">content2</div>
                </div>
                <div id="content3">
                     <div class="container">content3</div>
                </div>
        </div> <!-- //contents -->

        <div id="footer">
            <div id="footer-nav">
                <div class="container">footer-nav</div>
            </div> 
            <div id="footer-info">
                <div class="container">footer-info</div>
            </div>            
        </div> <!-- //footer -->

    </div>
    
</body>
</html>

 

 

 

 

 

 

 

 

08.  layout08

 

 

index.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="웹 표준을 준수한 사이트 예제입니다.">
    <meta name="keywords" content="웹스토리보이, 웹표준, 웹접근성, 사이트만들기">
    <meta name="generator" content="Visual Studio Code">
    <title>WEBSTNDARD SITE</title>

    <!-- CSS STYLE -->
    <link rel="stylesheet"  href="./css/reset.css" />
    <link rel="stylesheet"  href="./css/style.css" />
    
</head>
<body>
    <div id="wrap">
        <div id="header"></div>
        <div id="contents"></div>
        <div id="footer"></div>
    </div>
    
</body>
</html>

 

reset.css

@charset "utf-8";

/* 여백 초기화 */
body,div,ul,li,dl,dt,ol,h1,h2,h3,h4,h5,h6,input,fieldset,legend,p,select,table,option,optgroup,th,tr,td,textarea,button,form{margin: 0; padding: 0;}

 

style.css

@charset "utf-8";

/* 레이아웃 */
#wrap{width: 100%;}
#header{width: 100%; height: 325px; background: #111;}
#contents{width: 100%; height: 800px; background: #222;}
#footer{width: 100%; height: 200px; background: #333;}

 

 

 

 

09.  layout09

 

 

index.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="웹 표준을 준수한 사이트 예제입니다.">
    <meta name="keywords" content="웹스토리보이, 웹표준, 웹접근성, 사이트만들기">
    <meta name="generator" content="Visual Studio Code">
    <title>WEBSTNDARD SITE</title>

    <!-- CSS STYLE -->
    <link rel="stylesheet"  href="./css/reset.css" />
    <link rel="stylesheet"  href="./css/style.css" />
    
</head>
<body>
    <div id="wrap">
        <div id="header">
            <div class="container">header</div>
        </div>
        <!-- //header -->

        <div id="contents">
            <div id="cont_nav">
                <div class="container">cont_nav</div>   
            </div>
            <!-- //cont_nav -->    

            <div id="cont_tit">
                <div class="container">cont_tit</div>   
            </div>
            <!-- //cont_tit -->

            <div id="cont_ban">
                <div class="container">cont_ban</div>   
            </div>
            <!-- //cont_ban -->

            <div id="cont_cont">
                <div class="container">cont_cont</div>   
            </div>
            <!-- //cont_cont -->

        </div>
        <!-- //contents -->

        <div id="footer">
             <div class="container">footer</div>   
        </div>
        <!-- //footer -->

    </div>
      <!-- //wrap -->
    
</body>
</html>

 

reset.css

@charset "utf-8";

/* 여백 초기화 */
body,div,ul,li,dl,dt,ol,h1,h2,h3,h4,h5,h6,input,fieldset,legend,p,select,table,option,optgroup,th,tr,td,textarea,button,form{margin: 0; padding: 0;}

 

style.css

@charset "utf-8";

/* 레이아웃 */
#wrap{width: 100%;  color: #fff;
/* font-size: 30px;text-transform: uppercase; color: #fff;text-align: center; */
}
#header{width: 100%; height: 325px; background: #111;}
#contents{width: 100%; height: 800px; background: #222;}
#footer{width: 100%; height: 200px; background: #333;}


/* 컨텐츠 레이아웃 */
#cont_nav{width: 100%; height: 200px; background: #333;}
#cont_tit{width: 100%; height: 200px; background: #444}
#cont_ban{width: 100%; height: 200px; background: #555}
#cont_cont{width: 100%; height: 200px; background: #666}


/* 컨테이너 */
.container{width: 990px; margin: 0 auto; height: inherit; background: rgba(255, 255, 255, 0.3);}

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

about author

PHRASE

Level 60  라이트

장가들러 가는 놈이 불알 떼어 놓고 간다 , 가장 중요한 것을 잊거나 잃어버렸을때 하는 말.

댓글 ( 4)

댓글 남기기

작성

CSS3 목록    more

? Copyright 2016 JunHo | Powered by Codeigniter | Powered by jQuery Rain

| Powered by Bootstrap

macaronics.net 는 그어떠한 동영상, 이미지, 파일등을 직접적으로 업로드 제공을 하지 않습니다. 페이스북, 트위터 등 각종 SNS 처럼 macaronics.net 는 웹서핑을 통하여 각종 페이지위치등을 하이퍼링크, 다이렉트링크, 직접링크등으로 링크된 페이지 주소만을 수집 저장하여 제공하고 있습니다. 저장된 각각의 주소에 연결된 페이지등은 그 페이지에서 제공하는 "서버, 사이트" 상황에 따라 페이지와 내용이 삭제 중단 될 수 있으며 macaronics.net 과는 어떠한 연관 관련이 없음을 알려드립니다. 또한, 저작권에 관련된 문제있는 글이나 기타 저작권에 관련된 문제가 있는 것은 연락주시면 바로 삭제해 드리겠습니다.

개인정보 처리방침 | 서비스 이용약관

관리자 문의: braverokmc79@gmail.com 혹은 가입후 관리자 1:1 게시판