---

구현되기 전 화면

비효율적인 코드로 구현은 할 수 있으나, 효율적인 방법을 적용하고 싶어서 보류했었다..

---

구현된 화면

생각보다 간단했다!

---

코드

HTML

    <div class="portfolio__img">
      <div class="img__row1">
        <div class="item1">
          <div class="item__text">
            <h4>Portfoilo-1</h4>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio <br>maxime ratione sunt.</p>
          </div>
        </div>
        <div class="item2">
          <div class="item__text">
            <h4>Portfoilo-2</h4>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio <br>maxime ratione sunt.</p>
          </div>
        </div>
      </div>

      <div class="img__row2">
        <div class="item3">
          <div class="item__text">
            <h4>Portfoilo-3</h4>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio <br>maxime ratione sunt.</p>
          </div>
        </div>
        <div class="item4">
          <div class="item__text">
            <h4>Portfoilo-4</h4>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio <br>maxime ratione sunt.</p>
          </div>
        </div>
      </div>

CSS

.item1 {
  background-image: url(/picture/portfolio-1.jpeg);
  width: 50%;
  height: 500px;
  background-size: cover;
}

.item2 {
  background-image: url(/picture/portfolio-2.jpeg);
  width: 50%;
  background-size: cover;
}

.item3 {
  background-image: url(/picture/portfolio-3.jpeg);
  width: 50%;
  height: 500px;
  background-size: cover;
}

.item4 {
  background-image: url(/picture/portfolio-4.jpeg);
  width: 50%;
  height: 500px;
  background-size: cover;
}

.item__text {
  padding-top: 30px;
  padding-left: 30px;
  color: white;
  font-size: 20px;
}

---

구현하는 방법

1. div태그에 background-image속성을 활용해 사진을 넣어준다.
2. background-size: cover;를 활용해 사진이 설정한 div 태그 크기에 맞게 적용되게 해준다.
3. 문자를 담는 div태그에 padding으로 위치를 잡아준다.

---