□ 트위치 2/2

★ 작성코드

Git 링크.트위치

1. 트위치 메인 콘텐츠 영역

● background: url()을 이용하여 이미지를 넣을 때, 이미지가 공간에 맞지 않을 경우와 수정방법

• 위와 같이 이미지가 맞지 않을 경우, background-size: cover를 이용하여 공간에 맞춰서 조절(확대, 축소)하는 기능을 이용함(원본 비율은 유지함)
  ※ background-size: cover를 이용하면, 공간에 따라 콘텐츠들이 가운데로 모이도록 기능을 하기에 이에 맞춰서 코드를 작성해야 함

• background: center는 이미지의 기준점을 공간의 가운데로 설정함

예시)

.content #content-banner {
    position: relative;
    width: 100%;
    height: 350px;
    background: url(../img/notebook.jpg) no-repeat center;
    background-size: cover;
}

● background에서 layer를 적용하기

• layer를 이용하여 배경이미지에 여러 가지 효과를 적용할 수 있음
• background-color: rgba()를 이용하여 음영을 줄 수 있음

예시)

.content #content-banner .layer {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);

    top: 0;
    left: 0;
}

● 결과 스크린샷(메인 content)

● 결과 스크린샷(footer)

□ 어려웠던 점

position이 3차원일 때, top이나 bottom 등을 이용한 좌표 설정에 대한 이해가 조금 어려웠습니다.

□ 해결방법

강의 내용을 복습하고, 직접 코드를 작성하고 수정해보면서 이해하였습니다.

□ 학습 소감

이제까지 해왔던 NAVER 사이트 카피캣과는 차이점이 많아서, 이를 코드로 구현하는 것이 재미있었습니다.