네이버 뉴스 카피캣

1) 학습한 내용

복습 및 새롭게 알게된 내용

Sub nav 파트일때 sub nav 는 마진오토값이 지정된

Container 안에 있었다

이때 나는 구분하기 편하기 위해서 미리 배경색을 흰색을 주려했지만, 사실상 중간 박스부분만 적용이되고 왼쪽 오른쪽 테두리부분은 적용되지않았다.

이때 콘테이너 밖으로 빼주는것이 포인트였다

이번 수업에서는 플렉스 값의 css를 미리 만들어 두었다.

News-flex-start
News-flex-end
News-flex-between

width: auto

• width 속성의 기본 값.
• 자동 확대 : left:0, right:0, width:auto 일 때 박스 모델이 자동 확대 된다.
• 자동 축소 : left:auto, right: auto, width: auto일 때 박스를 제외한 모든 박스 모델이 자동 축소된다.

​
width:100%

• 요소가 부모의 너비에 맞춰 늘어나긴 하지만 auto를 지정한 것과 달리 페이지를 처음 불러올 때에만 자동으로 늘어난다.
• 요소에 가로 마진, 테두리, 패딩을 지정하면 그 요소의 너비가 부모 너비를 넘어서 늘어난다.

x축 중앙 정렬 - text-align: center
y축 중앙 정렬 - line-height: (height값과 동일하게)

1) news nav바

2) news headline

24일차 네이버 뉴스 Github

2) 학습내용 중 어려웠던 점

처음에 놓친 기본기들이 나중에 응용단계까지오니 당연했다고 생각한 width 나
height 그리고 flex 속성까지 실습할때 톱니바퀴처럼 맞물리지 않은것이 몇몇 있었던거 같다.

3) 해결방법

네이버 블로그를 참고하거나 codepen 을 이용해 혼자서 부분적인부분을 실습해보았다.

4) 학습소감

유익한 학습시간이었다.