괴발개발/Html+CSS

CSS_홈페이지 메인페이지 등분하기

moonday 2021. 6. 12. 21:24

내가만든 예시

<!DOCTYPE html>
<html lang="en">
<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>메인페이지 구조 틀 만들기</title>
  <style>
    *{font-size: 20px; color: black; text-align: center; line-height: 50px;
    font-weight: bold;}
    .header1, .footer1{background-color:lightskyblue; 
    height: 50px; width: 100%;}
    .header1{margin-bottom: 10px;}
    .footer1{margin-top: 10px;}

    .main::after{clear: both; content: ''; display: block;}
    .main{height: 500px; text-align: center; }
    nav, aside{background-color:lightskyblue; width: calc(20% - 5px); 
      height: 100%;float: left; line-height: 500px;}
    aside{float: right;}
    
    section{background-color: rgb(200, 132, 240); width: calc(60% - 10px);
      height: 100%; float: left; margin-left: 10px;}
    section>.header2{background-color: lightskyblue; margin: 0 10px;
      height: 50px;}
    section>article{background-color: lightskyblue; margin: 10px;
      height: calc(100% - 170px - 30px); line-height: 300px;}
    section>.footer2{background-color: lightskyblue; margin: 10px;
      height:70px; line-height: 70px;}

  </style>

</head>
<body>
  <header class="header1">&lt;header&gt;</header>

  <div class="main">
    <nav>&lt;nav&gt;</nav>
    <section>&lt;section&gt;
      <header class="header2">&lt;header&gt;</header>
      <article>&lt;article&gt;</article>
      <footer class="footer2">&lt;footer&gt;</footer>
    </section>
    <aside>&lt;aside&gt;</aside>
  </div>
  
  <footer class="footer1">&lt;footer&gt;</footer>
</body>
</html>

 

쌤이만든 예시

 

<!DOCTYPE html>
<html lang="en">
<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>구조예제</title>
  <style>
    *{font-weight: bold; color: white; font-size: 20px;  text-align: center;}
    .header, footer{height: 50px; text-align: center; line-height: 50px; background-color: indianred;
      font-size: 20px;}
    .container::after{content: ''; clear: both; display: block;}
    .container{margin: 10px 0;}
    nav,aside{width: 100px; height: 400px; float: left; line-height: 400px;
     background-color: indianred;}
    aside{float: right;}
    section{height: 400px; background-color: indianred; float: left;
     width: calc(100% - 200px - 20px); margin-left: 10px; padding: 10px; box-sizing: border-box;
    }

    .title{ height: 30px; line-height: 30px;}
    .container > section > header{ height: 50px; background-color: darkkhaki; line-height: 50px;}
    .container > section > footer{ height: 80px; background-color: darkkhaki; line-height: 80px;}
    .container > section > article{ height: calc(100% - 160px - 20px); background-color: darkkhaki; 
      line-height: 180px; margin: 10px 0;}

  </style>
</head>
<body>
  <header class="header">&lt;header&gt;</header>
  <div class="container">
    <nav>&lt;nav&gt;</nav>
    <section>
      <div class="title">&lt;section&gt;</div>
      <header>&lt;header&gt;</header>
      <article>&lt;article&gt;</article>
      <footer>&lt;footer&gt;</footer>

    </section>
    <aside>&lt;aside&gt;</aside>

  </div>
  <footer>&lt;footer&gt;</footer>
</body>
</html>

 

저작자표시

'괴발개발 > Html+CSS' 카테고리의 다른 글

CSS_transition  (0) 2021.06.12
CSS_z-index  (0) 2021.06.12
CSS_가로로 사각형 등분하기  (0) 2021.06.11
CSS_크기가 불규칙한 박스 4등분하기  (0) 2021.06.11
CSS_박스 나란히 삼등분하기  (0) 2021.06.10

'괴발개발/Html+CSS'의 다른글

  • 현재글CSS_홈페이지 메인페이지 등분하기

관련글

댓글

티스토리툴바