1) 학습한 내용
네이버 쇼핑페이지(2)
github
-
나중 형제가 2차원이지만 오버레이 위쪽으로 배치, 이유는 어쨌든 뒤 따르는 3차원적 속성인 position:relative 의 z-index가z축이 더 높기 때문에 위쪽으로 배치됨.
-
상대값인 100%은 부모가 없으면 적용 안됨. 즉 부모가 공간에 대한 구체적인 숫자가 있어야 자식이 100% 넣었을 때 적용됨.
-
em태그의 속성값 중 폰트 스타일이 기울기(디폴트)로 나타남. font-style: normal; 하면 기울기 적용 사라짐
-
레이아웃 구조 짤 때 재사용 할 수 있는 영역들이 있는지 확인하고 작성, 복사붙여넣기, 기존 레이아웃 유지 가능
원안에 숫자 가운데 정렬
#shop-main .list-item .list-half .content-lists.content-list-2 li .content-image-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-footer .policy-wrap span:first-child:before {
content: initial;
} 첫 번째부분에 대해서는 initial로 인해 작대기 출력안됨
#shop-footer .policy-wrap span:before {
content: "";
display: inline-block;
width: 1px;
height: 11px;
margin: 0 8px;
background-color: #d7d7d7;
vertical-align: -1;
}참고사이트
<무료이미지 사용(상업적으로도 사용가능)>
- https://pixabay.com/ko/
- https://unsplash.com/
- '회사명+로고' 검색 시 ci,ai 로고 파일 찾을수있음(지원하지 않는 회사도 있음)
2) 학습내용 중 어려웠던 점
특별히 어려운 내용은 없으나 html, css 분량이 많은데 레이아웃을 재사용 할 때 위치가 헷갈릴수 있음
3) 해결방법
커다란 틀을 기억해 놓고 확인 후 붙여넣거나 조금씩 붙어넣어 사이트 화면을 확인하며 작업한다.
4) 학습소감
쇼핑부분이라 굉장히 많은 부분들에 css 요소가 들어가서 힘들었음.
