---

구현된 화면

기본 웹화면

창이 줄어들었을때 웹하면

---

코드

HTML

  <div class="portfolio">
    <div class="portfolio__text">
      <p>Portfolio</p>
      <h3>What We can Do</h3>
    </div>

    <div class="portfolio__img">
      <div class="img__row1">
        <!-- <div class="text1"></div> -->
        <img src="/picture/portfolio-1.jpeg" alt="">
        <img src="/picture/portfolio-2.jpeg" alt="">
      </div>

      <div class="img__row2">
        <img src="/picture/portfolio-3.jpeg" alt="">
        <img src="/picture/portfolio-4.jpeg" alt="">
      </div>
    </div>

CSS
사진에 해당하는 태그에 display:relative;를 적용하고, 글씨에 해당하는 태그를 display: absolute;로 적용한 후에 top, left, bottom, right 값을 조정해주면 되지만 너무 비효율적이기에 추후 공부를 더 한후에 다시 시도해보려고 한다.

.portfolio {
  margin: 50px 30px;
}

.portfolio__text {
  font-size: 20px;
  text-align: center;
}

.portfolio__text p {
  margin-bottom: 0;
}

.portfolio__text h3 {
  margin-top: 0;
}

.portfolio__img {
  margin-top: 50px;
}

.img__row1 {
  display: flex;
  justify-content: center;
  background-size: cover;
}

.img__row2 {
  display: flex;
  justify-content: center;
  background-size: cover;
}





@media screen and (max-width: 980px) {
  .header {
    flex-direction: column;
    align-items: center;
  }

  .header__title {
    text-align: center;
  }

  .main__bottom {
    flex-direction: column;
  }

  .main__bottom-icons {
    flex-direction: column;
  }

  .icon {
    padding-top: 20px;
    padding-right: 0;
  }

  .img__row1 {
    flex-direction: column;
  }

  .img__row2 {
    flex-direction: column;
  }
  
}

---

더 공부해야할 부분

1. 사진을 배치할때 좀 더 효율적인 코드 작성법 공부하기.
2. 사진위에 글씨를 적용할때 효율적인 코드 작성법 공부하기.