2021.06.15. 개발일지

◼︎ 오늘 학습한 내용

10. 국내외 사이트 카피캣 (네이버 블로그 1편)

1~2) 블로그 메인 상단 / 블로그 메인 왼쪽 영역

• 오늘은 네이버 메인 페이지, 쇼핑 페이지, 웹툰 페이지에 이어 블로그 메인 페이지를 카피캣해보았다.
• 어제까지 진행했던 웹툰 페이지와 비슷하게 상단에 검색창을 만들고, nav 메뉴바를 만들어주었다.
• 하단 좌측 영역에는 블로그 게시물들이 소개되는 배너 3개와 페이지 넘김을 할 수 있는 숫자 버튼을 넣었지만 링크는 하지 않았다.
• 그 밑으로는 이웃의 새 글을 확인할 수 있는 배너를 세로로 정렬해주었다. 이웃의 글은 작성자의 이름, 작성 시간, 제목과 글의 미리보기(말줄임 처리), 그리고 이미지가 들어갈 배너 공간을 넣어주었고 하단에 구분선을 만들었다.
• 우측으로는 광고가 들어가는 배너 자리를 마련해주었고, 마찬가지로 페이지 넘김을 할 수 있는 숫자 버튼을 삽입해주었다.

• 오늘의 Tip)
  가변적인 width나 height 값을 줄 때 calc를 사용하면 편하다.

  width: calc(100% - 40px);

  

◼︎ 어려웠던 점 & 해결못한 것들

이웃 새글을 여러개 넣었을 때 세로로 주르륵 나오게 만들어야 했는데 계속 겹쳐보여서 고치는데 한~참 걸렸다...ㅜㅜ

◼︎ 해결방법

버그를 찾지 못해서 강의를 다시 들으면서 차근차근 다시 했다.

◼︎ 소감

비슷한 구조들이 많이 나오고 같은 형식을 자주 반복하다보니 이제 조금 익숙해진 것 같다. 그럼에도 불구하고 아직 허덕이는 내 스스로가 너무 아메바같다..ㅎ