210721 개발일지

1) 학습한 내용

네이버 쇼핑페이지(1)
github

---

	<div class="shop-container">
		<ul>
			<li><a href="#">홈</a></li>
			<li><a href="#">백화점</a></li>
			<li><a href="#">아울렛</a></li>
			<li><a href="#">스타일</a></li>
		</ul>
	</div>

컨테이너 안에 오브젝트들을 넣어줘야함.

---

<div class="list-wrap">
    <div class="list-item"></div>
    <div class="category-wrap shop-border"></div> 
    				shop-border은 테두리를 만들어주는 클래스로 역할
</div>

---

color: rgb(255, 255, 255, 0.46); 앞 세숫자는 검정, 0.46은 투명도 의미

---

span태그 inline요소라 margin값 사용 불가-> display: inline-block 넣어주면 사용 가능

#shop-main .list-item .category-wrap .category-right-top .category-info .headline 
{
    display: inline-block;
    font-size: 12px;
    border: solid 1px #00ab33;
    color: #00ab33;

    margin-bottom: 7px;
} 

---

부모영역에 일괄적인 정렬 디자인 적용하면, 자식에게도 영향주므로 코드 줄일 수 있는 이점 이용하기

---

글자는 자동으로 늘어남 width: auto는 안에 있는 글자 컨텐츠로 width값을 대체(안에 있는 글자로 높이 대체)한다는 것, 글이 길어지면 계속 길어지므로 max-width를 설정.

---

inline-block요소도 float속성처럼 안에 컨텐츠(태그) width값 합이
공간의 width값 보다 크면 자동 줄바꿈 현상 나타남.
줄바꿈으로 인해 레이어가 Y축 정렬 효과 있음

---

<div class="list-item banner">
        <div class="w-100 h-100 shop-border"> w-100 h-100 shop-border 넣으면 이미지에 테두리가 생김 
        <img src="https://via.placeholder.com/150">
        </div>
</div>

---

2) 학습내용 중 어려웠던 점
CSS작업 중 border값이 안 만들어짐

3) 해결방법
꼼꼼히 확인한 결과 오타, 수정 후 진행

4) 학습소감
한사이트를 만드는데 정말 많은 수고와 노력이 들어가는걸 느낀다.
태그에 class 이름을 붙이고 영역 지정, CSS적용 등.
class의 이름을 길게 쓰다보면 오타에 주의하기!