본문 바로가기

패스트캠퍼스113

한 번에 끝내는 파이썬 웹 개발 초격차 패키지 113일차 웹 & 프론트엔드 기본 GitHub 예제 반응형 - Columns index.html main.css /* header */ @media (max-width: 992px) { header .logo { flex-grow: 1; } header .nav, header .forms input.form-control, header .forms .btn-link { display: none; } header [data-bs-toggle="offcanvas"] { display: block; } } /* section.youtube */ @media (max-width: 768px) { section.youtube img.astronaut { display: none; } } /* section.features .. 2021. 12. 27.
한 번에 끝내는 파이썬 웹 개발 초격차 패키지 112일차 웹 & 프론트엔드 기본 GitHub 예제 반응형 - Offcanvas Bootstrap > Docs > Components > Offcanvas Offcanvas - 몇 가지 클래스 및 JavaScript 플러그인으로 프로젝트에 숨겨진 사이드바를 만들어 내비게이션, 쇼핑 카트 등을 이용 index.html Personal Open Source Business Explore Sign in Sign up main.css /* 중략 */ header [data-bs-toggle="offcanvas"] { display: none; } header .offcanvas .list-group-item { padding: 16px; } header .offcanvas .list-group-item a { color:.. 2021. 12. 26.
한 번에 끝내는 파이썬 웹 개발 초격차 패키지 111일차 웹 & 프론트엔드 기본 GitHub 예제 반응형 - @media Code Pen 활용 Create a New Pen ... codepen.io HTML CSS .box { width: 500px; height: 100px; background-color: royalblue; transition: 1s; } @media (max-width: 600px) { .box { width: 200px; height: 200px; background-color: orange; } } 오늘은 가볍게 반응형 미디어 쿼리를 통해서 변화하는 과정을 살펴보는 시간을 가져보았다. 테스트를 위해서 코드 펜을 활용하였으며 실시간으로 변경되는 것이 좋은 예제인 것 같다. 예전에 반응형의 거부감이 들었던 기억이 있다. 글을 다 입력했.. 2021. 12. 25.
한 번에 끝내는 파이썬 웹 개발 초격차 패키지 110일차 웹 & 프론트엔드 기본 GitHub 예제 Footer (1) ~ (2) Bootstrap > Docs > Content > Typography > Lists > Unstyled Unstyled - 목록 항목의 기본 목록 스타일과 왼쪽 여백을 제거 - 이것은 바로 하위 목록 항목에만 적용되므로 중첩된 목록에 대한 클래스도 추가 index.html Product Features Security Team Enterprise Customer stories The ReadME Project Pricing Resources Roadmap Platform Developer API Partners Atom Electron GitHub Desktop Support Docs Community Forum Profession.. 2021. 12. 24.