학습내용

네이버 게임 main-left 전부
github소스코드

반복되는 부분 default 클래스 만들기

• section, section-title, section-body 등 많은 부분의 속성이 겹쳐서 default 클래스를 만들어 활용하였다.

더보기 버튼 만들기

• 모든 버튼은 내부 아이콘만 다르고 같은 속성을 가지고 있어서 btn-circle클래스로 속성을 지정했다.
• 중앙정렬 공식: left: 50% + transform: translateX(-50%)

.game-section .btn-circle {
    position: absolute;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0 2px 30px 0 rgb(0 0 0 / 6%);
    left: 50%;
    transform: translateX(-50%);
    bottom: -27.5px;
    
    background-image: url(../img/plus.png);
    background-repeat: no-repeat;
    background-position: 17px 15px;
}

• background-image를 이용해 안에 들어가는 아이콘 모양만 바꾸어 주었다. background-image와 그 관련 속성들 (background-repeat 등)이 같은 클래스에 있지 않아도 잘 적용될지 긴가민가했는데 해보니 잘 됐다.

.game-section .btn-circle.icon-arrow {
    background-image: url(../img/expand-button.png);
}
.game-section .btn-circle.icon-plus {
    background-image: url(../img/plus.png);
}

어려웠던 점

1. 예전에 class만 가진 요소를 복사해서 사용해서 세부 속성을 바꾸기 애매했던 일이 있었다.

해결방법

1. 오늘 배운 것처럼 공통 속성을 담는 class와 구별을 위한 id를 분리해서 사용하면 css 선택자가 길어지는 일 없이 사용할 수 있다.

소감

강의를 들을수록 공통 부분을 default 클래스로 만드는 비율이 늘어나고 있다. 기초부터 시작해서 효율적으로 응용하는 단계까지 순차적으로 배우고 있어서 마음에 든다.