즐겁게 성장하고 싶은 개발자, 사자입니다./CSS Layout Studies/
Art Exhibition

Art Exhibition

학습내용
GRID
FLEXBOX
Interactive
 
notion imagenotion image
 
코드보기
HTML
  • index.html
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="style.css" />
  <title>Art Exhibition</title>
</head>
<body>
  <div class="filters">
    <ul>
      <li>Year: </li>
      <li>Programme: </li>
      <li>Themes: </li>
      <li>Practice: </li>
      <li>Students</li>
    </ul>
  </div>
  <div class="main">
    <div class="item">
      <div class="header">
        <span class="std">Kate Bedford</span>
        <span class="course">PGDIPFA</span>
      </div>
      <article class="work">
        <img src="https://cdn.pixabay.com/photo/2016/09/07/16/19/pile-1651945__340.jpg"/>
        <img src="https://cdn.pixabay.com/photo/2014/11/30/14/11/cat-551554__340.jpg"/>
      </article>
      <div class="footer">
        <span class="year">2016</span>
        <a href="#">Read more</a>
      </div>
    </div>
    <div class="item">
      <div class="header">
        <span class="std">Vincent van GogH</span>
        <span class="course">BFA(HONS)</span>
      </div>
      <article class="work">
        <img src="https://cdn.pixabay.com/photo/2014/04/13/20/49/cat-323262__340.jpg"/>
      </article>
      <div class="footer">
        <span class="year">2016</span>
        <a href="#">Read more</a>
      </div>
    </div>
    <div class="item">
      <div class="header">
        <span class="std">Saza Yeo</span>
        <span class="course">PGDIPFA</span>
      </div>
      <article class="work">
        <img src="https://cdn.pixabay.com/photo/2015/06/19/14/20/cat-814952__340.jpg"/>
      </article>
      <div class="footer">
        <span class="year">2016</span>
        <a href="#">Read more</a>
      </div>
    </div>
    <div class="item">
      <div class="header">
        <span class="std">Kristina</span>
        <span class="course">BFA(HONS)</span>
      </div>
      <article class="work">
        <img src="https://cdn.pixabay.com/photo/2015/03/27/13/16/cat-694730__340.jpg"/>
      </article>
      <div class="footer">
        <span class="year">2016</span>
        <a href="#">Read more</a>
      </div>
    </div>
    <div class="item">
      <div class="header">
        <span class="std">Kate Bedford</span>
        <span class="course">PGDIPFA</span>
      </div>
      <article class="work">
        <img src="https://cdn.pixabay.com/photo/2012/10/12/17/12/cat-61079__340.jpg"/>
      </article>
      <div class="footer">
        <span class="year">2016</span>
        <a href="#">Read more</a>
      </div>
    </div>
    <div class="item">
      <div class="header">
        <span class="std">Vincent van GogH</span>
        <span class="course">BFA(HONS)</span>
      </div>
      <article class="work">
        <img src="https://cdn.pixabay.com/photo/2015/03/26/09/54/pug-690566__340.jpg"/>
      </article>
      <div class="footer">
        <span class="year">2016</span>
        <a href="#">Read more</a>
      </div>
    </div>
    <div class="item">
      <div class="header">
        <span class="std">Saza Yeo</span>
        <span class="course">PGDIPFA</span>
      </div>
      <article class="work">
        <img src="https://cdn.pixabay.com/photo/2017/04/11/15/55/animals-2222007__340.jpg"/>
      </article>
      <div class="footer">
        <span class="year">2016</span>
        <a href="#">Read more</a>
      </div>
    </div>
    <div class="item">
      <div class="header">
        <span class="std">Kristina</span>
        <span class="course">BFA(HONS)</span>
      </div>
      <article class="work">
        <img src="https://cdn.pixabay.com/photo/2015/10/12/14/57/dogs-984015__340.jpg"/>
      </article>
      <div class="footer">
        <span class="year">2016</span>
        <a href="#">Read more</a>
      </div>
    </div>
  </div>
</body>
</html>
HTML
CSS(SASS)
  • style.css
@import url("https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css");

* {
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 
    'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
    'Open Sans', 'Helvetica Neue', sans-serif;
  width: 100vw;
  height: 100vh;
  background-color: white;
  font-weight: 500;
  overflow-x: hidden;
}

/*************************/

.filters ul {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: solid 5px black;
}

.filters ul li {
  border-bottom: solid 5px black;
  border-right: solid 5px black;
  padding: 7px 10px 7px 10px;
}
.filters ul li:first-child {
  border-left: 0px;
}
.filters ul li:last-child {
  border-right: 0px;
}

/**********************/

.main {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  grid-auto-rows: 300px;
}

.main > .item {
  width: 100%;
  padding: 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-bottom: solid 5px black;
  border-right: solid 5px black;

}

.work {
  align-self: center;
  display: flex;
  justify-content: center;
  height: 70%;
  max-width: 90%;
}

.work img {
  margin: 3px;
  max-width: 100%;
}

.header, .footer {
  display: flex;
  font-size: 16px;
  justify-content: space-between;
}

.footer a {
  color: black;

}
CSS