📌 학습한 내용

---

네이버 게임 실습 2

전체 코드 : 💾

메인 왼쪽 영역

banner & '게임 라운지 인기글'

👉 실무 tip
: 동일한 디자인이 반복적으로 사용될 때, 우선순위(class < id)를 이용해 작업하기

<div id="game-section-1" class="game-section">

위와 같이 html 작성 후, css에서 class 속성을 이용해, 공통적으로 적용되는 디자인을 적용하고(디폴트), id를 이용해 영역 별로 우선 적용되어야 할 디자인을 적용한다.

'생생 주요 게임 뉴스' & banner

• <ol>, <ul> 의 자식으로는 반드시 <li>가 있어야 한다.

'오리지널 시리즈'

• '생생 주요 게임 뉴스'의 상단부 코드를 재활용

'인기게임 영상'

'이번 달 출시 게임'

• '게임 라운지 인기글'의 코드를 재활용

'공식 게임 라운지'

• '생생 주요 게임 뉴스'의 코드를 재활용

📌 학습내용 중 어려웠던 점

---

📌 해결방법

---

📌 학습소감

---

이번에는 비슷한 영역의 코드를 작성할 때, <id>와 <class>를 이용해 공통 부분을 <class>로 작업하고, 세세하게 영역을 변경할 때 <id>를 이용해 설계도면과 디자인을 적용했다. 아직까지 익숙하지 않은 작업이라 그런지, '코드를 재활용해서 편하다!' 하는 생각보다는 어디서 어떤 코드를 사용했는지, 어떤 클래스를 공통 코드로 뺴놨는지가 더 헷갈려서 수업 내내 어려웠다. 하지만 마지막 영역을 작업할 때, 강의 내용과 현재 네이버 게임 페이지에서 실제 나타나는 디자인이 조금 달라 스스로의 힘으로 작업을 해보았다. 여전히 버벅거리는 감은 있으나, 확실히 완전히 코드를 새로 작성할 때 보다는 시간이 단축되는 느낌이었다. 좀 더 코드 재활용에 익숙해지고, 직접 변수명을 생각하게 된다면 더 잘할 수 있을 것이다. 😉