fragment

[flex-grow와 flex-basis] flex-grow: 1;  flex-basis: 0;  = basis가 grow를 도와주는 역할 flex-grow: 0;  flex-basis: 0;  = 너비가 0이다 .back-img-list{flex-grow: 1  flex-basis: 0;} @media screen and (max-width:1650px) {.back-img-list-5{flex-grow: 0;}}1650px 이하에서는 미디어쿼리에 걸려있는 코드가 힘이 더 강하다.

[반응형과 고정형]반응형과 고정형 두가지 개념이 섞이게 되면 이도저도 아닌 사이트가 구현된다.반응형 사이트는  특정한 상황을 제외하고 대부분 %로 구현된다.  [앱과 반응형 사이트]앱은 플레이스토어에서 판매하는 상품이고반응형 사이트는 플랫폼에서 판매하는 앱이 아닌url 주소로 접속하는 모바일 기기에 반응할 수 있는 사이트이다.즉, 앱은 설치를 해야하고 반응형 사이트는 웹페이지이지만 모바일에서도 사용할 수 있도록 만든 것.이 두가지는 개발되는 방식이 완전히 다르다.  [반응형 이미지]https://codepen.io/kkkge/pen/PovOVBW 6.14 반응형 이미지...codepen.io  [높이가 고정된 반응형 이미지]https://codepen.io/kkkge/pen/VwOrgoa 6.14 높이가..

[스와이퍼 복습]코드펜 - 스와이퍼 복습 + 버튼 커스텀 6.10스와이퍼 복습 + 버튼 커스텀...codepen.io  [스와이퍼 버튼 여백]버튼 위치 설정 시 중요 포인트 (상단 코드펜에 적혀있음)1. container에 relative를 설정해 주어야 함.2. swiper-box와 button이 container 안에 들어가야 함.  - 이유: container 밖으로 button이 나갈 시 개발자모드 기본 설정인 overflow: hidden; 처리가 되어 사라질 수 있기 때문.스와이퍼 버튼 여백 설정과 커스텀 코드펜 이동translate를 활용한 absolute 중앙정렬 코드펜 이동

주요 내용은 코드펜에 적혀있음 [스와이퍼 개발자 모드 기본설정]***스와이퍼 가져온 후 개발자 모드에서 기본 설정되어 있는 CSS 설정들 잘 확인하기***기본 설정 때문에 커스텀이 되지 않을 수 있기 때문커스텀 해야하는 부분들 가져와서 기본 설정 변경해주기프리뷰 클릭ctrl U 누르면 코드 보여줌 가져다 쓸 수 있음.  [스와이퍼 마켓컬리 상품리스트 구현]https://codepen.io/kkkge/pen/dyERyOq 스와이퍼 마켓컬리 상품리스트 구현...codepen.io  [스와이퍼 데모버전 사용]https://codepen.io/kkkge/pen/qBGjEaG 스와이퍼 데모버전 사용...codepen.io   [스와이퍼 반응형]https://codepen.io/kkkge/pen/KKLqwWQ 스와..