✔ TODAY

오늘은 쇼핑페이지를 완성해 보는 시간을 가졌다.
가장 어려웠던 실습이였다...

---

✔ 학습한 내용

네이버쇼핑페이지.html

네이버css

실습한 코드는 위의 github의 링크 참조.

shop - main

#shop_main .list_item .list_half .list_half_header{
	position: relative;
	width: 100%;
	height: 62px;
	background-color: #ffffff;

	text-align: center;}

#shop_main .list_item .list_half .list_half_header .over-lay{
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);}

• 오버레이 깔기
  먼저오는 형제가 3차원, 뒤의 형제가 2차원. 그래서 relative를 사용해서 오베레이와 h3가 겹치게 된다.
  나중에 나오는 형제의 z축이 높아서 위로 가게됨.

• 선택적으로 padding를 넣기

#shop_main .list_item .list_half.list_half_header

에서 패딩값을 부여, 하지만 같은 부모를 둔 형제 중 패딩을 부여하고 싶지 않으면,선택자 우선순위를 이용해서 직접적으로 패딩 값0을 넣는다.

#shop_main .list_item .list_half .list_half_header.list_half_bg{
	background-color: green;
	padding-top: 0;}

• li태그를 x축으로 변환

#shop_main .list_item .list_half .content-list{
	overflow: hidden;}

#shop_main .list_item .list_half .content-list.content-list-3 li{
	float: left;
	width: 33.33%;
	height: 100%; 
	border-right: #f0f0f0 solid 1px;

	text-align: center;}

1) ul태그(적용하고자 하는 li의 부모태그)가 있는 클래스에 overflow: hidden 적용.
li태그에 float: left를 적용

2) li태그는 블록요소.
display : inline-block 속성을 넣어 x축정렬이 가능하지만, 레이어가 어긋난다.
넓이를 31%로 설정하니 같은 줄로 정렬이 되지만, 사이 공간이 일정하지가 않는다.

display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;

3) 위의 css속성(flex사용)를 ul에 적용하는 클래스에 입력한다.

💥💥li태그에 바로 넣으면 적용이 안됨💥💥
li태그가 아닌 ul태그에 적용을 해야 적용이 됨!!
정확히 말하면,
x축 정렬을 적용하고자 하는 곳의 부모태그에 적용

li의 x축 정렬을 하기위해서는 ul에 손을 대야됨

• height :100%; 등 상대값을 넣을 때, 주의할 점
  li에서의 height :100%;는 상대값을 의미한다.
  즉, 부모값에 대한 상대값이다.
  그러나 부모태그인 ul에 height값이 존재하지 않은 경우. 상대값이 제대로 작동이 안 될 수 가 있다. 부모태그에 정확한 값이 없는 경우에는 상대값을 입력하는 것은 좋은 것이 아니다.

• img 안에 또 span를 넣는 경우
  list-2 의 이미지에 할인률 이미지 삽입.
  이미지용 서랍장을 만들고 z인텍스를 사용해서 이미지가 위로 가게급 한다.

<ul class="content-list content-list-2">
   <li>
	<div class="content-img-wrap shop-border">
	   <img src="http://via.placeholder.com/130x90">
	   <span class="discount">50%</span>
	</div>
	<h3>부드럽게 감기는 말랑말랑 파우치 이불</h3>
	<span class="price">
	 <em>21,900원</em>
	</span>
   </li>

#shop_main .list_item .list_half .content-list.content-list-2 li .content-img-wrap{
	position: relative;
	width: 130px;
	height: 90px;}

#shop_main .list_item .list_half .content-list.content-list-2 li .content-img-wrap img{
	position: absolute;

	width: 100%;
	height: 100%;

이렇게 되면
먼저 나오는 img가 3차원, span이 2차원이라 레이어가 겹치게 된다.(이미지 뒤로 스팬테그가 삽입이 된다.)

• span을 위로 올리기 / 꾸미기

#shop_main .list_item .list_half .content-list.content-list-2 li .content-img-wrap .discount{
	position: absolute;
	display: block;
	width: 42px;
	height: 42px;
	background-color: orange ;
	border-radius: 50%;

	font-size: 14px;
	color: #ffffff;
	line-height: 42px;
	text-align: center;
	
	top: 6px;
	right: 5px;}

할인률 이미지를 이미지안에 넣는 것이 아닌
스펜태그를 이용하여 꾸민다.

• 같은 행에 있는 글자를 다르게 효과주기.

#shop_main .list_item .list_half .content-list.content-list-2 li .price em{
	font-size: 14px;
	font-weight: bolder;
}

font-weight:는 100~900까지 100단위로 값을 주지만 bolder로 값을 줄 수도 있다

• em태그는 기본적으로 기울기가 들어가 있다.(이테릭체) 만약 넣고 싶지 않을 때는 폰트스타일:노말 을 넣는 다.

• list-row-3의 li의 내의 이미지와 텍스트를 flex효과 주기
  이미지의 크기 설정(서랍크기 > 이미지 100%)가 중요하다.

• 한 줄로 정렬이 안되는 경우는 li크기 < 이미지크기+텍스트 크기된 상태임으로 여기에서는 텍스트의 크기를 줄인다.

#shop_main .list_item .list-row-3 li{
	display: flex;
	flex-wrap: wrap;
	align-items: center;

	border-bottom: solid 1px #f0f0f0;
	padding: 14px 19px 11px 19px;}

#shop_main .list_item .list-row-3 li:last-child{ border-bottom: none;}

#shop_main .list_item .list-row-3 li .list-img-wrap{
	width: 90px;
	height: 60px;}


#shop_main .list_item .list-row-3 li .list-img-wrap img{
	width: 100%;
	height: 100%;}

#shop_main .list_item .list-row-3 li . span{
	font-size: 12px;}

#shop_main .list_item .list-row-3 li .list-row-info h3{
	font-size: 13px;}

• 겹치는 볼더를 수정하기

<div class="list-img-wrap shop-border">

#shop_main .list_item .list-row-3 {
	border-top: none;
}

위의 코드에 클래스가 총 개로 볼더가 겹치는 부분이 생긴다.
같은 영역에서 아랫쪽 3개의 클래스 적용한 부분에 우선 순위개 상겨서 캐스케이팅으로 none값을 줘서 볼더 탑의 값으 없앤다.

---

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

• 리스트가 많아지고 구조가 보다 복잡해져서 클래스간의 관계와 구조파악에 시간이 오래 걸렸다.

  ---

  ✔ 해결방법작성

• 구글의 개발자도구로 구조와 머리속으로 구조를 그리며, 이해해 갔다.

• 속성관련으로 의문점이 생기는 것은 구글링으로 해결했다.

  ---

  ✔ 학습소감

  html구조가 조금 복잡해지니 바로 헤매기 시작했다... 문법간의 관계는 진짜 중요하다....
  월~화 동안 개인적인 사정으로 못 한 학습을 몰아서 했더니 .. 체력이 ㅜㅜ