본문 바로가기

전체 글332

한 번에 끝내는 파이썬 웹 개발 초격차 패키지 106일차 웹 & 프론트엔드 기본 GitHub 예제 Hero Contents (2) CODE TEST : CodePen CodePen An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications. codepen.io index.html Personal Open Source Business Explore Sign in Sign up Where the world builds software Millions of developers and companies build, ship, and .. 2021. 12. 20.
한 번에 끝내는 파이썬 웹 개발 초격차 패키지 105일차 웹 & 프론트엔드 기본 GitHub 예제 Hero Contents (1) index.html Where the world builds software Millions of developers and companies build, ship, and maintain their software on GitHub—the largest and most advanced development platform in the world. Sign up for GitHub class form-control form-control-lg = 폼을 크게 (lg : Large) btn btn-primary btn-lg = 파란색 버튼 크게 main.css /* 중략 */ section.hero { background-color: .. 2021. 12. 19.
한 번에 끝내는 파이썬 웹 개발 초격차 패키지 104일차 웹 & 프론트엔드 기본 GitHub 예제 Header (2) index.html Sign in Sign up class nav flex-grow-1 = 수평 정렬이 최대한 늘려지는 속성 btn btn-link = 배경이 없는 버튼 text-light = 배경이 흰색 btn btn-outlne-light = 아웃라인이 테두리 선 forms d-flex = forms 부분에 수평요소 추가 flex-shrink-0 = 감소 너비를 사용하지 않음 (기본값 : 1) me-2 : 마진의 오른쪽 여백 (start/end) text-decoration-none : 밑줄 제거 main.css /* 중략 */ header .forms input.form-control { color: white; background-col.. 2021. 12. 18.
한 번에 끝내는 파이썬 웹 개발 초격차 패키지 103일차 웹 & 프론트엔드 기본 GitHub 예제 Header (1) Bootstrap 변경 전 header .container { display: flex; align-items: center; padding-top: 20px; padding-bottom: 20px; } Bootstrap 변경 후 index.html Personal Open Source Business Explore main.css body { font-family: 'Poppins', sans-serif; font-weight: 300; } header { background-color: #040d22; } bootstrap을 활용한 Header를 학습해보는 시간을 가져보았다. 실질적으로 클론하는 느낌이 들어서 재밌어지고 있다. 매번 느끼지만.. 2021. 12. 18.