07.29 네이버뉴스

네이버 뉴스 카피캣

---

• flex css 코드를 미리 작성하고 html 구조를 짤 때, 필요한 css 코드를 넣는 방식으로 진행하였다.
• 뉴스홈이라는 영역에 언더바와 글자색이 변하는 코드는 'on'이라는 css코드를 추가하여 수정하였다.

<style> 
#news-header .sub-nav ul li a.on {
    border-bottom: solid 2px #3f63bf;
    color: #3f63bf;
}
*on이라는 클래스명이 붙은 li에는 다음과 같은 글자와 border값을 부여한다.
</style>

• 로그인에 line-height값을 25px으로 설정하여 옆의 버튼과 함께 y축으로 정렬할 수 있도록 한다.

---

• 저번에 혼자 연습했던 placehoder코드를 강의시간에 사용해보았다.

<div class="news-search-wrap news-flex-between">
    <input type="text" placeholder="뉴스 검색">
    <button type="button" class="btn-search"></button>
</div>

• 클릭하기 전에는 '뉴스 검색'이라는 단어가 창에 떠있고, 사용자가 클릭하면 글자가 사라진다.

---

• overlay라는 div를 따로 만들어 이미지 위에 absolute로 위치하도록 하였다.
• overlay가 위치를 잡을 수 있도록 감싸고 있는 부모요소에는 position (relative)속성을 부여해야한다.

---

학습소감

글자나 요소를 y축으로 정렬하는 방법을 자꾸 깜빡한다.
line-height를 높이와 같이 맞춰준다!!!! 기억하자...
네이버 사이트를 참고하며 코딩을 하니까 다른사람들은 복잡한 구조들을 어떻게 짜고,
어떤식으로 css 코드를 활용했는가 배울 수 있어서 좋았다.