[배운내용]

1. 네이버메인 페이지 실습2

1) 메인 오른쪽

'로그인 - 배너 - 트렌드쇼핑 - 쇼핑뉴스 - 쇼핑' 으로 구성.

(1) 오른쪽 로그인 html

		<div id="main_right">
			<div id="account">
				<p>네이버를 더 안전하고 편안하게 이용하세요.</p>
				<a href="#">로그인</a>
				<div class="account_sub">
					<div class="account_left">
						<span>아이디</span>
						<span>비밀번호 찾기</span>
					</div>
					<span>회원가입</span>
				</div>
			</div>
           		...

(2) 오른쪽 로그인 css

• .account a에는 영역의 크기를 지정해 주어야 하므로 display: block을 지정해준다.
• .account_sub은 space-between값을 flex로 지정해준다.
• 그외 여백과 폰트 사이즈 등을 설정한다.

(3) 배너

<div id="banner"></div>

배너 영역을 div로 만들어주고, 크기와 색상, 여백을 적용해준다.

(4) 오른쪽 쇼핑 html

쇼핑 영역은 크게 #shop_wrap으로 감싸주고, 그 안에 .shop_header .shop_content .shop_goods 등으로 나눈다. (쇼핑뉴스 이하는 이미 실습한 내용과 겹치므로 생략함)

• shop_header부분

			<div class="shop_header">
				<h3><a href="#">트렌드쇼핑</a></h3>

				<div class="shop_right">
					<h4><a href="#">상품</a></h4>
					<h4><a href="#">쇼핑몰</a></h4>
					<h4><a href="#">MEN</a></h4>
				</div>
			</div>

• shop_content부분
  리스트를 만들어 주고 li태그 안에는 a태그를 넣어준다.

• shop_goods부분

	<ul class="product_lists">
		<li>
			<a href="#">
				<img src="https://via.placeholder.com/107x146">
				<div class="product_info">
						<h3>퀄리티가 중요한</h3>
						<span>당신을 위한 룩</span>
				</div>
			</a>
		</li>

ul 태그 안에 li를 만들어주고, 이 li를 갯수만큼 복붙한다.

(5) 오른쪽 쇼핑 css

• 헤더부분을 space-between으로 flex지정을 하고, 그 중 오른쪽 요소인 shop_right안에는 블럭요소인 h4가 있으므로 이들도 따로 오른쪽으로 치우쳐 정렬되도록 flex에 flex-end를 지정해 준다.

• commerce_list를 구성할때 flex의 space-between을 사용하면 리스트의 개수에 따라 두번째 줄에서 어색한 배치가 나올 수 있다.
  

이 때 할 수 있는 방법은 두가지 정도가 있는데

① 리스트의 갯수를 짝이 맞게 구성하거나.
② float: left를 지정해준다.

* 네이버의 경우, div를 두개 따로 만들어 두줄로 구성했다.

• product_list에도 flex: between 값을 주고, 세개로 정렬될 수 있도록 아래 글자들의 폰트 사이즈를 지정해준다.

2) 하단(footer)

(1) 하단 html

<footer id="main_footer">
	<div class="container">
		<ul class="news_lists">
			<li>
				<img src="https://via.placeholder.com/160x86">
				<div class="news_info">
					<span>부스트캠프 2021</span>
					<h3>온라인 설명회 신청하기</h3>
					<p>
					SW 개발자를 위한 교육<br>
					지원꿀팁과 생생한 후기들!
					</p>
				</div>
			</li>
                ...
                
          	<ul class="corp_lists">
			<li><a href="#">회사소개</a></li>
			<li><a href="#">인재채용</a></li>
			<li><a href="#">제휴제안</a></li>
			<li><a href="#">이용약관</a></li>
             	</ul>
	</div>
</footer>
                

• 중앙정렬하는 css클래스인 container를 적용해준다.

• 정보콘텐츠가 있는 곳을 news_lists 클래스를 적용해주고 리스트를 만든다.
  이때, news_list라는 클래스는 이미 메인에서 사용한 클래스이지만 부모가 각각 main, footer로 다르기 때문에 문제없이 사용가능하다.

• 아래 회사 관련영역도 리스트를 만들어준다.

(2) 하단 css

• news_lists는 space-between으로 flex를 지정해주고,
  news_lists li안의 이미지와 글들을 가로정렬해주어야하므로, flex-start로 flex를 지정해준다.
• corp_lists는 일자로 세우되 요소 사이사이 | 모양의 선이 있다. 이를 위해 :before 가상선택자를 사용해 요소 앞에 영역을 지정하여 색을 입힌다.

• 이 때 선이 위쪽으로 조금 올라가 있는 것을 볼 수 있는데 이를 조정하기 위해서 vertical-align: -1px;값을 주었다.

[어려웠던 점]

오늘 실습 중 margin값이 제대로 지정되지 않은 적이 몇번 있었는데, html에서 포함관계가 제대로 설정되지 않아서 잘못적용되었다.

그리고 메인페이지에서 글자사이의 ● 모양이 span태그인 경우가 있었는데, span은 단어를 감싸는 코드라고 배웠는데 span태그에 대한 개념을 다시 한번 찾아봐야겠다.

[해결방법]

html코드를 작성할때 포함관계를 명확히 하기위해서 탭키로 코드의 위치를 제대로 잡고, ol,ul태그 안에 있는 요소들은 접어서 보기에 간소화하는 작업을 익숙하게 하는 것이 필요하다.

[학습소감]

오늘 commerce_lists를 할 때 강의 해주신대로 했을 때, 글자수에 따라 마진값에 따라 줄바뀜이 되거나 하는 경우가 생겼다. 강사님이 가르쳐주신 방식보다 네이버에서 div를 두개로 나누어서 두줄 정렬한 방법이 나랑 더 맞는것같다. 같은 페이지도 개발자에 따라 코드가 천차만별로 다르다는 것이 이런 경우 인것같다.