◼︎ 오늘 학습한 내용
10. 국내외 사이트 카피캣 (네이버 블로그 1편)
1~2) 블로그 메인 상단 / 블로그 메인 왼쪽 영역
- 오늘은 네이버 메인 페이지, 쇼핑 페이지, 웹툰 페이지에 이어 블로그 메인 페이지를 카피캣해보았다.
- 어제까지 진행했던 웹툰 페이지와 비슷하게 상단에 검색창을 만들고, nav 메뉴바를 만들어주었다.
- 하단 좌측 영역에는 블로그 게시물들이 소개되는 배너 3개와 페이지 넘김을 할 수 있는 숫자 버튼을 넣었지만 링크는 하지 않았다.
- 그 밑으로는 이웃의 새 글을 확인할 수 있는 배너를 세로로 정렬해주었다. 이웃의 글은 작성자의 이름, 작성 시간, 제목과 글의 미리보기(말줄임 처리), 그리고 이미지가 들어갈 배너 공간을 넣어주었고 하단에 구분선을 만들었다.
- 우측으로는 광고가 들어가는 배너 자리를 마련해주었고, 마찬가지로 페이지 넘김을 할 수 있는 숫자 버튼을 삽입해주었다.
-
오늘의 Tip)
가변적인 width나 height 값을 줄 때 calc를 사용하면 편하다.width: calc(100% - 40px);
◼︎ 어려웠던 점 & 해결못한 것들
이웃 새글을 여러개 넣었을 때 세로로 주르륵 나오게 만들어야 했는데 계속 겹쳐보여서 고치는데 한~참 걸렸다...ㅜㅜ
◼︎ 해결방법
버그를 찾지 못해서 강의를 다시 들으면서 차근차근 다시 했다.
◼︎ 소감
비슷한 구조들이 많이 나오고 같은 형식을 자주 반복하다보니 이제 조금 익숙해진 것 같다. 그럼에도 불구하고 아직 허덕이는 내 스스로가 너무 아메바같다..ㅎ
