portfolio 1 과제 중 해결이 되지 않는 부분이 있습니다.

[서상원]

```
<article>
        <div class="container-WWCD">
            <div class="item-WWCD">
                <div style="position: relative">
                    <div class="overlay-wrap">
                        <h3>Stationary</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing edit.</p>
                    </div>
                    < img src="Pic/portfolio-1.jpg">
                </div>
            </div>
            <div class="item-WWCD">
                <div style="position: relative">
                    <div class="overlay-wrap">
                        <h3>Stationary</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing edit.</p>
                    </div>
                    < img src="Pic/portfolio-2.jpg">
                </div>
            </div>
            <div class="item-WWCD">
                <div style="position: relative">
                    <div class="overlay-wrap">
                        <h3>Stationary</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing edit.</p>
                    </div>
                    < img src="Pic/portfolio-3.jpg">
                </div>
            </div>
            <div class="item-WWCD">
                <div style="position: relative">
                    <div class="overlay-wrap">
                        <h3>Stationary</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing edit.</p>
                    </div>
                    < img src="Pic/portfolio-4.jpg">
                </div>
            </div>
        </div>
    </article>
```
```
.container-WWCD {
    width: 80%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /*중앙 정렬을 위한 추가*/
    margin: auto;
}
.item-WWCD {
    flex-basis: 25%;
}
.overlay-wrap {
    position: absolute;
    width: 100%;
    height: 100%;
    color: white;
}
.overlay-wrap>h3 {
    margin: 0;
    padding-left: 70px;
    padding-top: 70px;
    font-size: 150%;
}
.overlay-wrap>p {
    padding-left: 70px;
    padding-top: 10px;
}
```
해결되지 않는 부분은 다음과 같습니다.

1. class명이 'item-WWCD'와 'overlay-wrap' 그리고 'img' 각각의 width와 height가 다르게 나옵니다. 결과적으로 박스보다 이미지가 길어서 박스끼리 딱 붙지 않습니다.

2. 네 개의 박스 중 첫번째 박스에만 애니메이션을 넣으려고 하는데 제가 생각하는 방법은 첫번째 이미지div(overlay-wrap)와 크기가 같은 div를 형성하고 이 div에 hover 했을 때
border를 주는 방식으로 구현하고자 합니다. 그런데 제가 overlay-wrap을 감싸는 div에 position: relative를 주어서 인지 생각처럼 구현이 되지 않습니다. 제가 생각하는
방법이 잘못된 것일까요?

더불어 선생님의 시니컬하지만 다정한.. 강의에 즐거운 마음으로 배워나가고 있습니다.

[codingapple]

코드 복붙해보니까 다 같은 width로 나오는듯요
.overlay-wrap에 border주면 잘나올거같은데요

[서상원]

1. img에 vertical-align 속성을 주어서 해결했습니다!

[글쓴이]

글