□ 네이버 뉴스 1/2

★ 작성코드

Git 링크.네이버 뉴스

1. 네이버 뉴스 상단

● 클래스 단순화 작업 – 일일이 개별 태그에 flex를 적용하는 것보다 css에 별도의 클래스를 만듬으로서 작업을 단순화함
※ 코드 분량 절감에 큰 도움이 됨

예시)
[html]

<div class="news-container">
    <div class="news-flex-between">
        <nav class="news-header-left">
            <ul class="news-flex-start">

[css]

.news-flex-between {
    display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;	
}

.news-flex-start {
    display: flex;
	flex-wrap: wrap;
	align-items: center;	
}

● 입력창 안에 글자 표현 - placeholder
<input type="text" placeholder="뉴스 검색">

● 결과 스크린샷

□ 어려웠던 점

input태그의 사용에 아직 익숙하지 않아서, 이해하는데 시간이 걸렸습니다.

□ 해결방법

강의 내용을 다시 한번 보고, 그래도 이해가 안되는 부분은 인터넷에서 검색하였습니다.

□ 학습 소감

아직까지 JavaScript를 배우지 않아서, 실제 사이트와 유사하게 만드는데 한계가 있다는 점이 아쉬웠습니다.