✔ TODAY

오늘은 네이버 메인페이지 완성을 목표로 학습하였다.

✔ 학습내용

네이버 mian.html
학습한 html의 코드는 위의 github링크를 참조.

main-right

#main_right #shop_wrap .shop_content .commerce_list {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: centers;
}

• shop_content 전체에 flex효과를 주기위해서는
  '#main_right #shop_wrap .shop_content .commerce_list' 에 전체 적용으로 작성해야 된다.

  💥주의
  shop_content 보다 하위인 ul에 적용하는 것이 아니다.
  #main_right #shop_wrap .shop_content .commerce_list ul에 작성하면 안됨.

• justify-content: space-between;의 단점
  nowrap으로 하면 한 줄로 형성이 된다.
  wrap인 상태에는 줄이 나누어진다. 이때 첫재열과 둘째열이 갯수가 일정하지 않으면 layout이 깔끔하게 나오지 않는다.

  ! 해결방법
  1) li의 수를 증가해 위아래 수를 맞추는 방법.
  2) flot: left; 를 사용 방법

• shop_content 안의 두 개의 ul에 대해 다른 padding를 넣고 싶을때.
  
  1) commerce_list (shop_content div 안에 있음)과
  product_lists 각자 다른 패딩을 주기 위해서
  2) shop_goods div를 만들어 product_lists를 안으로 옮긴다.
  3) shop_content/shop_goods각 자 다른 패딩을 준다

<div class="shop_content">
	<ul class="commerce_list">...</ul>
    <div class="shop_goods">
    	<ul class="product_lists">...</ul>
    </div>
</div>
    

main-footer

• 가상선택자 before 사용하기

#main_footer .corp_area li:before{
	content: "";
	display: inline-block;
    width: 1px;
	height: 11px;
	background-color: #e4e8eb;
	margin: 0 8px;
}

• content: "";
  "" 아무 값도 넣지 않는다는 뜻

• #main_footer .corp_area li:before{ 의 높이를 조정하기 위해서
  vertical-align: -1px;사용

• 가상선택자 before의 초기화

#main_footer .corp_area li:first-child:before{
	content: initial;
}

✔ 학습한 내용 중 어려웠던 점 또는 해결못한 것들

• 전체적인 숲, 구조를 짜는 것에 익수하지 않은 것 같다.
• css 속성값에서 보다 html에 오탈자가 많다.

✔ 해결방법작성

• 순간 코드가 이해가 안될때 마다, 작성한 코드를 처음부터 보고 구조를 이해해 갔다.

✔ 학습소감

css에서 더 확신이 없었는데, 실습을 통해서 html쪽이 생각보다 취약하다는 점을 알게 되었다. 기초가 전부고 토대다! 기초부분은 수시로 복습하자!!!