button , footer 영역

오늘 하려고 한 곳은 이 3가지 영역이였다.

위에서 했던 경험들이 있어서 30분도 안걸려서 뚝 딱 뚝 딱 할 수 있었다.

 <div class="Link-collection">
              <span class="Link-button">카카오 소식 모아보기</span>
            </div>
          </section>
          <div class="Button-wraps">
            <a href="#Header-nav">
              <button>↑</button>
            </a>
          </div>
        </article>
      </div>
    </main>
    <hr class="Line" />
    <footer>
      <div class="Footer-content">
        <div class="Footer-wraps">
          <div class="Footer-items">
            <span class="Footer-items-title">소개</span>
            <span class="Footer-items-text">카카오 문화</span>
            <span class="Footer-items-text">공동체</span>
            <span class="Footer-items-text">연혁</span>
          </div>
          <div class="Footer-items">
            <span class="Footer-items-title">이야기</span>
            <span class="Footer-items-text">콘텐츠 저장소</span>
            <span class="Footer-items-text">뚝딱뚝딱 성장기</span>
            <span class="Footer-items-text">숫자로 보는 카카오</span>
            <span class="Footer-items-text">카카오 나무</span>
          </div>
          ...

버튼을 누르면 위의 header 로 넘어가게 a 태그를 이용해서 연결시켜줬다.

지금 배우고 있는 자바스크립트가 익숙해지면 부드럽게 스크롤이 된다거나 그런 것도 구현해봐야겠다.

전체 완성본

회고

• 프로젝트 기간 : 11월 28일 ~ 12월 6일
• 프로젝트 회차 : 5회차
• 회차 별 소요 시간 : 1~3회차 에는 4시간 , 4회차에는 2시간 , 5회차 에는 30분

어찌 저찌 8일만에 클론 코딩을 모두 끝낼 수 있었다.

클론 코딩 해보기 전에는 레이아웃을 어떻게 구성하는지 , display 가 뭔지도 몰랐는데

확실히 해보길 잘했다는 생각이 든다. 하면서 많이 배웠다.

전체 페이지 레이아웃

내 html 태그들의 레이아웃이 어떻게 나뉘어져있는지 보려고 한 번 노드를 그리고 살펴보았다.

나름 header , main , footer , article , section 등 시맨틱 태그는 열심히 썼지만

처음인지라 불필요한 레이아웃들이 많아 보인다.

여기서도 불필요한 div 태그들이 많이 쓰인 것 같다.

왜이렇게 불필요한 div 태그들을 많이 나열했나 생각해보면

적절하게 클래스를 붙여서 스타일링 하는 방법을 잘 몰라서

그냥 클래스 붙은 div 태그만 우다다닥 많이 만들어 버려놓고 하나씩 컨트롤 하려고 하니 그런 것 같다.

불필요한 태그들이 많이 쌓여있으면 생길 수 있는 문제

• 가독성 유지 보수의 어려움
  HTML 코드가 깊어질 수록 코드의 가독성이 떨어져 유지보수하는데 시간이 오래 걸림
• 의미론적인 부적절성
  불필요한 div 태그는 문서의 의미를 혼란스럽게 만들 수 있음
• 성능 저하
  불필요한 태그를 해석하고 표시하는데 시간이 오래 걸릴 수 있고 CSS 스타일링이 더 복잡해지고 무거워 질 수 있음

다음번에는 미리 구조를 잘 계획 해두고 해야겠다.

또한 클래스 명을 지을 때 공통점 있게 지어서 관리를 잘 할 수 있도록 해야겠다.

이번에는 처음이란 이유로 클래스 하나 하나마다 CSS 스타일을 정해줬는데 사실 카카오 홈페이지에서는 공통된 스타일을 갖는 클래스들을 하나로 묶어서 스타일링 해줬다.

그렇게 하면 유지보수에 훨씬 도움이 될 것 같더라

나도 다음번엔 구조를 잘 짜고, 클래스 명도 잘 짜고 그래야겠다.

다음번엔 반응형 웹 공부 가보자구 ~~!!!