💻정적 웹사이트 클론 코딩 프로젝트 #2💻

몸통 부분의 section에 대해서 살펴보자 

사진들을 포함한 부분들을 section으로 묶었다.

     <section>
            <section class="thumbnail">
                <div class="main__image">
                    <a href="">
                        <img src="thumbs/01.jpg">
                        <h3>Lorem ipsum dolor sit amet</h3>
                    </a>
                    <a href="">
                        <img src="thumbs/02.jpg">
                        <h3>Lorem ipsum dolor sit amet</h3>
                    </a>
                </div>
                <div class="main__image">
                    <a href="">
                        <img src="thumbs/03.jpg" alt="">
                        <h3>Lorem ipsum dolor sit amet</h3>
                    </a>
                    <a href="">
                        <img src="thumbs/04.jpg" alt="">
                        <h3>Lorem ipsum dolor sit amet</h3>
                    </a>
                    <a href="">
                        <img src="thumbs/05.jpg" alt="">
                        <h3>Lorem ipsum dolor sit amet</h3>
                    </a>
                </div>
                <div class="main__image">
                    <a href="">
                        <img src="thumbs/06.jpg" alt="">
                        <h3>Lorem ipsum dolor sit amet</h3>
                    </a>
                    <a href="">
                        <img src="thumbs/07.jpg" alt="">
                        <h3>Lorem ipsum dolor sit amet</h3>
                    </a>
                </div>
            </section>
	</section>

 

처음에 사진들을 어떻게 묶어야 될지 궁금했다

<section>
	<!-- div 하나 당 a 두개씩 묶으면 된다! -->
	<div>
    </div>
    <div>
    </div>
    <div>
    </div>
</section>

이런 방식으로 하면 된다~!

html 부분은 이정도면 딱히 어려운 부분은 없다

 

다음 CSS부분에 대해서 살펴보자

/* 사진 정렬 왼쪽-> 오른쪽 */
.thumbnail {
    display: flex;
    margin-left: 1rem; /* 약간 왼쪽으로 치우침 */
}
.thumbnail .main__image {
  
    margin-right: 1.5rem;
    flex-grow: 1;
    margin-top: 3rem;

}

flex-grow에 대하여 이번 기회에 알게 되었다.

flex-gorw는 증가 너비 비율을 설정한다.

즉 flex-gorw: 1 이면 div 3개가 각각 1/3 간격으로 배치된다.

 

/* 사진 간격 */
.thumbnail .main__image a {
    text-decoration: none;
    display: block;
    margin-bottom: 1.5rem;
   
}
/* 사진 간격 = display: block */
.thumbnail .main__image a img {
    width: 100%;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    display: block;
}
/* 약간의 여백 */
.thumbnail .main__image a h3 {
    font-size: 1em;
    border-bottom: 1px solid rgba(255,255,255, 0.3);
    border-left: 1px solid rgba(255,255,255, 0.3);
    border-right: 1px solid rgba(255,255,255, 0.3);
    margin: 0 auto;
    text-align: center;
    padding: 1em;
    color: rgba(255,255,255, 0.7);
    font-weight: 250;
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;

}

 

display를 block으로 설정해야 margin-bottom을 조정할 수 있다.

div, li, p, h 태그들이 block이 기본값이고 a 태그는 block이 기본값이 아니므로 설정해주어야 한다.

.thumbnail .main__image a:hover {
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    background-color: rgba(255, 255, 255, 0.25);
    /* hover 그림자 */
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25), 0 0 0.5em 0 #FF6382;
}

 

 

 

이미지에 커서를 대면 반응하는 hover에 대해서 설정했다.

border로 hover효과를 내려하니까 원본과 다르게 이상해서 

찾아보니까 box-shadow로 설정한 것이었다

 

 

(그리고 여담으로 #FF6382 색깔이 참 이쁘다ㅋㅋ 나중에 다른 페이지 만들 때도 써먹어야지)

 

 

px 대신 rem을 쓰는 이유는 유연성 때문이다. 화면 크기가 작아져도 px는 그대로 사이즈를 고수하지만 

rem은 반응형처럼 알맞게 조절되기 때문이다!

 

마지막으로 반응형 페이지로 만들어 보자!! 

 

간단하다

 이런 식으로 만들 거다 

@media (max-width: 768px) {
    .thumbnail {
        display: block;
        margin-left: 1rem;
    }
}

. thumbnail이 원래 flex였는데 일정 크기가 되면 block으로 만들어서 

이미지들이 수직으로 오게끔 설정하는 원리이다

약간 왼쪽으로 붙은 거 같으니 margin-left를 주자~

 

이런 식으로 웹페이지를 만들어 보았다.

 

 

 

이제 footer영역만 하면 된다.

사실 지금 이렇게만 해도 충분히 완성본 같아서 footer까지 하기 귀찮지만...

 

다음 포스트에서 마무리 짓도록 하겠다~