1교시 : naver-news-header
오늘은 네이버 블로그 서비스 구현에 이어 뉴스탭에 대한 서비스를 구현해보자.
만약 우리가 위와 같은 화면을 만들고자 한다면 어떻게 html구조를 만들어야할까???
우리는 앞서 위와 유사한 형태를 가진 서비스들을 클론코딩해보았다.
- html
(1) header
코드리뷰:
a.news-container
전체 화면에서 중앙정렬을 하는 클래스명(미리 css에서 코드를 정의하고 필요한 박스마다 사용)
b. news-flex-between(부모) -> news-header-left / news-header-right(자식)
- css
코드리뷰 :
.news-container : 컨텐츠 중앙정렬
.news-flex-between/.news-flex-start/.news-flex-end :
박스들의 x축 정렬이 필요한 경우 미리 클래스를 지정하고 그것을 태그의 class에 추가(중복방지)
2교시 : naver-news-main
header 밑에 main 중 headline 영역을 만들어보자.
- html
여기서 news-headline 영역은 조금 자세히 들여다볼 것들이 있다.
전체를 news-headline을 가장 큰 부모태그로 그 속에 menu-wrap -> main-lists/ sub-lists를 넣었다.
그리고 이 아래 news-headline-lists(ul)에 li 구조 속에서 a태그를 넣고 또 그속에 article 태그를 넣었다. article태그를 사용하면서 주의할 점은 h태그를 이용해서 머릿말을 넣는다. 머릿말 아래에 image-wrap를 넣는다.
- css
