Html,Css/ Table을 활용하자

과제

결과

 

과정

div 가 만만했던 나는 div를 무진장 활용해서 만들었다..

    <div class="colors">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>

.colors{
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.colors>div{
  height: 320px;
  width: 200px;
  margin: 10px;
}

.colors>div:first-child{
  background-color: #ef798a;
}
.colors>div:nth-child(2){
  background-color: #f7a9a8;
}
.colors>div:nth-child(3){
  background-color: #613f75;
}
.colors>div:nth-child(4){
  background-color: #e5c3d1;
}
.colors>div:last-child{
  background-color: #988b8e;
} 

 

 

솔루션

솔루션에서는 테이블을 활용하고 있었다. 처음에는 솔루션이 달라서 더 깔끔한 코드라고 생각했는데,

지금 와서 보니 깔끔함 정도는 크게 다르지 않은것 같지만 코드를 제대로 알고 쓰는 느낌이 든다.

 

    <table class='art'>
      <tr>
        <td id='one'></td>
        <td id='two'></td>
        <td id='three'></td>
        <td id='four'></td>
        <td id='five'></td>
      </tr>
    </table>

.art{
  margin:auto;
}
td{
  background-color: black;
  height: 300px;
  width: 150px;
}

#one{
    background-color: #ef798a;
}
#two{
    background-color: #f7a9a8;
}
#three{
    background-color: #613f75;
}
#four{
    background-color: #e5c3d1;
}
#five{
    background-color: #988b8e;
}