Web Study-2(HTML, CSS)

생활코딩 클론코딩

어제에 이어서 오늘 네이버 클론 강좌를 마치며, 바로 혼자서 생활코딩 메인 웹페이지를 클론코딩 해보기로 했다.(처음으로 혼자서 진행해보는 클론코딩ㅎㅎ)

분석

사이트의 가장 윗부분의 마크업을 보면 div.head아래 header 태그가 있고 여기에 제목과 부제목의 부모태그 hgroup이 있다. 이 아래에는 사이트 상단 좌/우에 있는 (ul) tag들이 있고 여기서 header가 끝나고 nav(main_menu)로 Navigation lists로 div.head.가 끝나는 걸 볼 수 있다.
어느정도 header 부분의 큰 레이아웃은 이해했고, 그다음은 div#body부분이다.

특이하게도 div#body내부에서 div#breadcrumb(생활코딩블럭)과 div#cols(본문)으로 한번 나누어지고, div#cols에서는 div.wrapper(좌우 margin: 434.667px border: 1px적용), div.entry-area(기입공간 확보) -> article태그가 들어가 있다.
이 뒤부터는 공백-사진-텍스트-동영상-... 이런 구조로 쭈욱 내려간다.

클론코딩 시작

아직 많이 부족해 보인다...;; 빨리 nav 완성시키고, div.body부분도 style 적용시켜야 하는데... 아직 css가 어색해서 개발자도구 찾아보고 서치도 해보고 하면서 시간이 오래 걸리는 거 같다.(External 구조의 css작성도 한몫하는 중...)

다음 스터디 계획

내일도 이어서 클론코딩 진행할 예정이다...