2021-06-10, 개발일지

학습한 내용

네이버 쇼핑영역 카피캣 2번째

메인의 사과이미지영역부터 하단 footer 영역까지 작업입니다.

리스트 아이템 니다.

상, 하 영역으로 absolute top, bottom을 사용하여 분리되어있습니다.
상단의 백화점 상품 그대로 부분은 오버레이 부분으로 알파값이 0.5 설정입니다.
사과 영역은 3개의 영역으로 float:left를 사용하며 33.33% 공간을 차지하고 있습니다.

하단의 hot deal 부분은 윗부분과 유사하지만 overlay 속성이 없습니다.
컨텐츠 아이템이 2개이며, flex로 가운데 정렬 상태입니다.

이미지 태그 아래에 span태그로 50% 할인률이 있습니다.
position: absolute; 그리고 top, right 사용하여 오른쪽 상단영역에 배치 합니다.
border-radius: 50%를 사용하여 원으로 만들어줍니다.

가격 영역은 em 태그를 사용하였습니다.

<span class="price">
	<em>21,900</em> 원
</span>

기본적인 em 태그는 이탤릭체 이기때문에 font-style: normal; 필요합니다.

4번쨰 리스트 아이템입니다. 상단영역은 이전에 만들었던 코드를 그대로 사용합니다.

하단영역은
ul, li 를 이용합니다.
이미지영역, span, h3 태그를 사용합니다.
이미지 영역은 border가 들어가있어 img 태그를 단독으로 사용하지 않고 div로 감싸 div에 border을 적용시킵니다.
멜론티켓 영역은 span 태그로
흥행돌풍 마마, 돈크라이 부분은 h3 태그를 사용합니다.

CSS, ul이 아닌 li영역에 flex 사용하여 이미지와 텍스트를 가로배치 합니다.

3번째 리스트 아이템의 코드를 그대로 사용합니다.

메인의 하단영역, 푸터 영역

하단영역으로
ul, li 태그를 사용하여 이미지를 배치하였습니다.

ul 태그에 flex를 사용하였습니다.

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

footer 영역입니다.
ul, li가 아니라 div에 span, p 태그로 처리합니다.
가운데 정렬, 폰트와 마진을 사용합니다.
| 부분은 가상선택자를 사용합니다.

span:before {
	content: "";
	display: inline-block;
	width: 1px;
	height: 11px;
	margin: 0 8px;
	background-color: #d7d7d7;
	verti
}

https://pixabay.com
이미지는 픽사베이 무료 이미지 입니다.

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

없습니다.

해결방법 작성

학습 소감

h1 태그는 항상 위에 또는 맨먼저 나와서 h3도 비슷할 줄 알았지만 span먼저 나오고 h3가 나오는 부분이 있어서 h1이 그렇다고해서 h3도 동일하지는 않다와 무조건적인 사용은 없다는 생각이 들었습니다.