웹4 9일차 - 이미지 리스트 완성하기, 가변그리드

[이미지 리스트에 배경 넣기]

배경을 넣을 수 있는 백비지 태그를 만들어줌

 

ㄴ 이미지태그는 닫을 수 없어서 인접동생으로 백비지를 만들어준 후

리스트박스에는 릴레이티브를, 리스트백비지에는 앱솔루트를 걸어 둥둥 띄워줌

 

 

앱솔루트-높이0 위치0

 

위치를 고정시켜서 보여줌다

 

 

[이미지 리스트에 버튼 집어넣기]

-. 버튼 s,m,l 컴포넌트 만들어두기

ㅇ

 

가운데정렬해줌

 

컴포넌트에 텍스트언라인센터를 적용하여 플렉스 환경에서도 패딩을 사용해도 무관하게 컴포넌트 해줌

 

 

-. 상단 텍스트 커스텀

커스텀 끗

 

상단패딩주기

버튼 올렷을때 효과주기

 

[ 이미지리스트 호버처리하기]

목적 : 커서올렸을때 어둡게하기

ㅇㅇㅇ

 

 

[반응형 일으키기]

세팅해두기

 

** 오늘 수업중 제일 중요한 포인트

flex-grow: 0; (기본값)


flex-grow: 1; flex-basis: 0;
flex-basis가 flex-grow 도와주는 역할

flex-grow: 0; flex-basis: 0;
= 너비가 0이다

.back-img-list(flex-grow: 0; flex-basis: 0;)

@media screen and (max-width: 1650px) {
 .back-img-list-5{flex-grow: 0;)
}
flex-grow: 0; flex-basis: 0;
= 너비가 0이다

1850px 이하에서는 미디어쿼리에 걸려있는 코드가 힘이 더 강하다

----------------------

flex-grow: 0; flex-basis: 0; 를 같이 써줘서 힘을 상쇄시킨 다음, 미디어쿼리에서 flex-grow: 0;을 사용하여 grow의 힘을 높여줌

 

 

조금 더 부드럽게 실행하는법 - 오퍼시티

 

평소에는 보여야 함 : opacity: 1;

1650이하로 떨어졌을 때 만 구조를 완전히 감추기 위해 [opacity: 0;]

.back-img-list-5{opacity: 0;}

 

 

[ 가변그리드 ]

 

 

ㅇㅇ

warp 0703.zip

2.75MB