📌 학습한 내용
네이버 쇼핑 실습 2
전체 코드 💾 :
"https://github.com/janeJeong/daegu_ai_school/tree/main/Web%20Programming/naver_copycat%20(0719-)"
2. 중간 영역
세 번째 'list-item'
-
<h3>: blcok 요소의 성격을 가짐 -
먼저 나오는 형제가 3차원, 그 다음의 형제가 2차원인 상태
->.shop-title-border { position: relative; }는.half-overlay { posirion: absolute; }와 겹쳐지게 된다.
<div class="list-half list-half-top shop-border">
<div class="list-half-header list-half-bg">
<div class="half-overlay"></div>
<h3 class="shop-title-border">백화점 상품 그대로</h3>
</div>
</div>#shop-main .list-item .list-half .list-half-header .half-overlay {
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
#shop-main .list-item .list-half .list-half-header.list-half-bg {
background-color: green;
}
#shop-main .list-item .list-half .list-half-header.list-half-bg .shop-title-border {
position: relative;
display: inline-block;
padding: 2px 4px;
border: solid 1px #ffffff;
color: #ffffff;
font-size: 14px;
top: 50%;
transform: translateY(-50%);
}-
또한 나중에 나온 형제(
.shop-title-border가 2차원이긴 하지만,.half-overlay뒷쪽으로 들어가는 것이 아니라 윗쪽으로 배치
-> relative는 3차원적 특징도 가지고 있다. 따라서 먼저 나오는 형제가 3차원이고 두 번째 형제가 3차원이면 나중에 나오는 형제의 z축이 더 높기 때문에 위로 올라 온 것. -
부모가 공간에 대한 구체적인 크기를 갖고 있어야만 자식의 % 크기가 정상적으로 동작함.
<ul class="content-lists content-list-3">
<li>
<img src="https://via.placeholder.com/102x100">
<h3>생활공작서 과탄산소다</h3>
<span>1.5kg x 4입</span>
</li>#shop-main .list-item .list-half .content-lists {
overflow: hidden;
height: 177px;
}
#shop-main .list-item .list-half .content-lists.content-list-3 li {
float: left;
width: 33.33%;
height: 100%;
border-right: solid 1px #f0f0f0;
text-align: center;
}-
<em>: 해당 영역을 강조, 디폴트 값으로{ font-style: italic; }이 적용되어 있음. -
먼저 나오는 형제가 3차원이고 그 다음에 나오는 형제가 2차원이면 레이어가 겹치게 됨. (2차원이 3차원의 뒷쪽으로 삽입) ->
.discount를 3차원으로 변경하면, 앞쪽으로 나타나게 된다.
-
font-weight: ;속성은 100 ~ 900까지의 값을 100단위로 가짐. + bolder라는 속성값으로 폰트의 굵기를 지정할 수도 있음.
네 번째 'list-item'
나머지 'list-item'
- 같은 레이아웃을 가진 오브젝트들은 앞서 작성한 코드를 재활용 하도록 한다.
'brand-wrap'
3. 하단 영역
<무료 이미지 사이트>
1. pixabay
: 상업적 이용도 가능
https://pixabay.com/ko/
2 . Unsplash
: 상업적 이용도 가능
https://unsplash.com/
3. 각종 회사 로고 이용가능
📌 학습내용 중 어려웠던 점
- 'list-item'영역이 여러 class 명을 가지고 있어, 실수가 많았다.
📌 해결방법
이번과 같이 많은 요소를 가지고 있는 사이트 제작은 처음이라, 익숙해지는 것이 결국 해결책이라고 생각한다.
📌 학습소감
'나머지 list-item' 영역을 작성하면서 단순히 배치만 바꾸는 작업을 했는데, 코드가 500줄이 넘어가자 찾는 데만 해도 실수를 몇 번 했다. 새삼 한 사이트를 만드는 것에 어느 정도의 노력이 필요한지 깨닫게 되는 날이었다. 일반적으로 사이트를 만드는데 코드가 기본 2000 ~ 3000 줄이 넘어간다고 들은 적이 있는데, 확실히 이를 관리하기 위해서는 많은 노력을 기울여야겠다고 다짐하게 되었다. 😣
