웹페이지 표준 레이아웃

결과: Skeleton 사이트(Html + CSS)

***프레임워크 없는 웹개발용으로 사용***

 

Html

<div class="container">
	<!--상단-->
    <header>
    	<h1></h1>
    </header>
    <nav>
    	<ul>
    	  <li><a href="#">  </a></li>
          <li><a href="#">  </a></li>
          <li><a href="#">  </a></li>
          <li><a href="#">  </a></li>
        </ul>
    </nav>
    
    <!--메인-->
    <main>
    	<section id="main">
            <article>
               <h2></h2>
               <p></p>
            </article>
        </section>
        <aside>
            <h3></h3>
            <p></p>
        </aside>
    </main>
    
    <!--하단-->
    <div class="clearfix"></div>
    <footer> Copyright &copy;2021 webdoli.tistory.com </footer>
    
</div>

 

복사 & 붙여넣기 사용가능

 

CSS

/*****************************************
            Default Setting
*****************************************/
@import url('https://fonts.googleapis.com/css2?family=Do+Hyeon&family=IBM+Plex+Sans+KR:wght@200;300&family=Nanum+Gothic&display=swap');

body{
    font-family:'IBM Plex Sans KR', sans-serif;
    font-size:13px;
    /* background:lightgray */
}

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

.container{
    width:50%;
    /* background:#fff; */
    margin:10px auto;
    overflow:auto;
}

/*****************************************
            Header Setting
*****************************************/

header#main{
    padding:10px;
    /* background:lightcyan; */
}

nav{
    /* background:lightsteelblue; */
    overflow:hidden;
    height:40px;
    padding:0 10px 0 10px;
}

nav li{
    float:left;
    padding:10px 10px 0 10px;
}

nav a{
    text-decoration:none;
    color:white;
    font-weight:bold;
}

nav a:hover{
    color:lightseagreen;
}


/*****************************************
            Main Section Setting
*****************************************/
main{
    padding:20px;
}

section#main{
    
    float:left;
    width:70%;
}

aside{
    float:right;
    width:20%;
    
}


/*****************************************
            Footer Setting
*****************************************/
.clearfix::before,
.clearfix::after{
    content:" ";
    display:table;
}

.clearfix::after{
    clear:both;
}

footer{
    padding:20px;
    text-align:center;
}


/*****************************************
            Mobile Setting
*****************************************/
@media (max-width:700px){
    section#main{
        /* background:lightgoldenrodyellow; */
        float:none;
        width:100%;
        text-align:center;
    }
    
    aside{
        /* background:lightpink; */
        float:none;
        width:100%;
        text-align:center;
    }
}