◼︎ 오늘 학습한 내용
10. 국내외 사이트 카피캣 (네이버 블로그 2편)
1~3) 블로그 메인 오른쪽/푸터 영역, 블로그 챌린지 프로그램
어제에 이어서 네이버 블로그 페이지 카피캣작업을 했다. 오른쪽 영역에 만들어둔 광고 배너 밑에 로그인 영역을 만들어 로그인 버튼을 넣어주었다. 그 밑으로 배너를 추가해주고, 세로로 공지사항과 안내사항 배너들을 쭉 만들어주었다.
푸터 영역에는 전에 작업했던 것과 같이 이용약관, 저작권 표기 등을 넣어주었다.
상단 메뉴 바에서 챌린치 프로그램을 선택하면 blog-detail.html로 넘어가게끔 처리해주고, 네이버 블로그 챌린지 프로그램 페이지를 만들어주었다. 상단 영역은 블로그 메인 페이지와 유사하여 크게 어려움이 없었고, 레이아웃이나 디자인도 비교적 깔끔한 편이었다.
각 콘텐츠 영역을 display: block을 통해 가로로 정렬해주었다.
◼︎ 어려웠던 점 & 해결못한 것들
blog-helper 영역에 체크박스 이미지가 삽입되어있는데, css에서 background-image 에 대한 url을 걸었음에도 불구하고 이미지가 들어가지 않는 문제가 발생했었다.
◼︎ 해결방법
내가 ..img/checkbox.png 대신 img/checkbox.png 라고 적은 것 때문이었다. css파일에서 넣어준 것이기 때문에 css폴더의 상위폴더인 naver폴더로 가서 다시 거기에서 img폴더로 들어가 checkbox.png파일을 찾아야하는데, ../가 빠지는 바람에 css 폴더 안에서 이미지 파일을 찾고 있었던 것..! css에서 이미지를 넣는 것 보다 html 파일에서 img src로 넣어주는게 익숙해서 일어난 바보같은 실수였다.
◼︎ 소감
developer tool을 보면서 디버깅을 할 수 있어야한다고 하는데, 나는 아직 왜안되는거지?!?!?에서 벗어나지 못하고 있다ㅠㅠ 봐도 봐도 모르겠는걸...? 나름 문제의 근원지를 찾아가보려 노력은 하지만.. 쉽지않다ㅠㅠㅠ 남들도 다 이런건지 나만 그런건지, 온라인으로 혼자 하다보니 확인할 방법도 없고 조언을 구하기도 쉽지않다. 이럴땐 참 코시국이라 오프라인으로 못하고 있는 현실이 정말 너무너무 아쉽다.
