반응형 CSS20 [bootstrap 5] 부트스트랩 그리드(Grid) & 실습 연습 그리드 시스템(Grid System) 그리드 시스템은 페이지에 총 12열로 나눠진다. 그리드 시스템은 반응형이며, 화면 크기에 따라 열이 자동으로 다시 정렬된다. span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 4 span 4 span 4 span 4 span 8 span 6 span 6 span 12 그리드 클래스(Grid Class) col = 576px col-md >= 768px col-lg >= 992px col-xl >= 1200px col-xxl >=1300px 여기서 그리드 클래스의 px 크기를 잘 보아야 한다. 반응형으로 만들기위해서는 그리드 클래스는.. 2023. 9. 16. [bootstrap 5] Container vs Fluid Container Container vs Fluid Container 사이트 레핑하는 방법이 두가지로 나뉜다. Container와 Fluid Container이다. Container : 반응형 고정 너비 container를 제공한다. Fluid Container : viewport의 전체 너비에 걸쳐있는 전체 너비 container를 제공한다. Container 예시코드 및 실행화면 The First Bootstrap Page This part is inside a .container class. the container class provides a responsive fixed width container. Resize the browser window to see that the container width will.. 2023. 9. 14. [bootstrap 5] Bootstrap 5 시작하기 Bootstrap이란? Bootstrap은 더 빠르고 쉬운 웹 개발을 위한 무료 프런트 엔드 프레임워크이다. bootstrap에는 typography, forms, buttons, tables, navigation, modals, image caruousels 등을 위한 HTML 및 CSS 기반 디자인 템플릿과 JavaScript 플러그인이 포함되어 있다. Bootstrap은 반응형 디자인을 쉽게 만들 수 있는 기능을 제공한다. Bootstrap 5 Bootstrap 5는 Bootstap의 최신 버전이다.(2021년 출시) 새로운 구성요소, 더 빨라진 스타일시트, 응답성을 제공한다. Bootstrap 5는 모든 주요 브라우저 및 플랫폼의 최신 안정적인 릴리스를 지원한다. 단. Internet Explor.. 2023. 9. 14. [CSS] 테이블(tables)의 모든 것 Table border name price Spurecell 16,970 Thezone 33,950 위의 예시는 border을 통해 테이블을 만들었다. 하지만 table의 크기가 매우 작은데 위의 테이블 크기를 키워보자 Full-Width Table name price Spurecell 16,970 Thezone 33,950 width을 100% 할경우 너비가 웹브라우저 크기만큼 늘어나게 된다. 그런데 table를 선 하나로 표시하고 싶으면 어떻게 해야할까? Collapse Table Borders border-collapse:collapse를 통해 선 하나로 만들 수 있다. name price Spurecell 16,970 Thezone 33,950 내부에 있는 선을 없에는 방법은 무엇일까? name .. 2023. 9. 12. 이전 1 2 3 4 5 다음 728x90 반응형
