Ostrict

코드보기

HTML

index.html


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <link rel="stylesheet" href="style.css" />
        <title>Ostrich</title>
    </head>
    <body>
        <div class="grid">
          <div class="child big">Ostrich</div>
          <div class="child big">Ostrich</div>
          <div class="child big">Ostrich</div>
          <!---->
          <div class="child small">Ostrich</div>
          <div class="child small">Ostrich</div>
          <div class="child small">Ostrich</div>
          <div class="child small">Ostrich</div>
        </div>
    </body>
</html>

CSS(SASS)

style.css


@import url("https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css");

body {
  background-color:#DDE1D4;
  /*padding:15px;*/
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  width: 100%;
  height: 100vh;
  margin:0 auto;
}

.grid {
  width: 100%;
  height: 100vh;
  margin:0 auto;
  color: #dae7de;
  font-weight: bold;
  font-family: Georgia, 'Times New Roman', Times, serif;

  display: grid;
  
  grid-template: 
    "white green green" 2fr
    "red pink purple" 1fr 
    "red yellow coral" 1fr 
    / 2fr 1fr 1fr; /* column 폭. */
}

.child {
  font-size: 1.5em;
  text-align: center;
  line-height: 50vh;
}

.child.big {
  font-size: 3em;
}

.child.small {
  line-height: 25vh;
}

.child:nth-child(1){
  background-color: #dae7de;
  grid-area: white;
  color: #f44607;
}

.child:nth-child(2){
  background-color: #018868;
  grid-area: green;
}

.child:nth-child(3){
  background-color: #eb5017;
  grid-area: red;
}

.child:nth-child(4){
  background-color: #f7abc5;
  grid-area: pink;
  color: #f44607;
}

.child:nth-child(5){
  background-color: #5e5ea6;
  grid-area: purple;
}

.child:nth-child(6){
  background-color: #fec128;
  grid-area: yellow;
  color: #f44607;
}

.child:nth-child(7){
  background-color: #f67172;
  grid-area: coral;
}

CSS