7월 22일 naver_shopping - 2

김우성·2021년 7월 22일
0

대구AI스쿨

목록 보기
3/26
post-thumbnail

1. 학습내용

github 소스코드

레이어 겹침

relative를 가지고 있는 list-half-header와 absolute를 가진 overlay가 겹쳐짐

overlay가 뒤쪽으로 가는게 아닌 위쪽으로 배치된 이유는 첫번째 형제와 두번째 형제가 3차원일때 나중에 나오는 형제의 z축이 더높기 때문

#shop-main .list-item .list-half .list-half-header {
	position: relative;

	width: 100%;
	height: 62px;
	background-color: #ffffff;
	border-bottom: solid 1px #e7e7e7;

	text-align: center;

	padding-top: 10px;
}

#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);
}

em 태그는 태생적으로 font-style이 italic체를 가지고 있다.

font weight 속성값으로 border를 사용해 폰트굵기를 정할 수 있다. (일반적으로는 px을 빼고 숫자 100단위)

캐스캐이딩

캐스캐이딩에 관한 우선순위

https://bamtory29.tistory.com/entry/CSS-Cascading-%EC%BA%90%EC%8A%A4%EC%BA%90%EC%9D%B4%EB%94%A9

이미지 무료다운 - 상업적인 이용도 가능

https://pixabay.com/ko/

https://unsplash.com/

로고같은경우는 회사에서 지원하는 경우도 있다

2. 어려운점

레이아웃에 대해서는 빠르게 익숙해져가고 있지만 점점 해야할 것들이 많아짐

3. 해결방법

기존 수업 + 복습과 더불어 js강의와 레이아웃에 더욱 익숙해지기위한 copycat을 시간을 쪼개서 적절히 분배하여 공부해야겠다.

4. 소감

8월말까지가 html과 css 실습강의 끝인데 그 안에 js강의 + jquery 강의도 듣고 9월 초부터는 팀프로젝트에 온힘을 기울일 수 있도록 노력해야겠다.

profile
매우 긍정적인 개발자

0개의 댓글