Frontend/Bootstrap7 07. Bootstrap, 그리드 시스템 (Grid System) ○ Container - 12개의 칼럼을 지원하는 시스템 - 한줄(row)는 총 12칸으로 구성 ○ 동일한 열 너비 - 단위 없는 클래스를 원하는 수만큼 추가하면 모든 열의 너비가 동일 1 / 2 2 / 2 1 / 3 2 / 3 3 / 3 ○ 열 너비 설정 - 한 열의 너비를 설정하면 형제 열은 자동으로 크기를 조정 1 / 3 2 / 3 3 / 3 1 / 3 2 / 3 3 / 3 ○ 반응형 클래스 - 6개의 기본 그리드 계층 ① .col (xs) : 항상 가로로 배치 ② .col-sm-* : 576px 이하에서 세로로 표시 시작 ③ .col-md-* : 768px 이하에서 세로로 표시 시작 ① .col-lg-* : 992px 이하에서 세로로 표시 시작 ② .col-xl-* : 1200px 이하에서 세로로.. 2022. 6. 26. 06. Bootstrap, 컨테이너 (container) ○ Container - Bootstrap에서 가장 기본적인 레이아웃 요소 - 기본 그리드 시스템을 사용할 때 필요 - 내용을 정렬하는데로 사용 - 종류 ① .container : 좌우여백 있음 ② .container-fluid : 좌우여백 없음 container Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure d.. 2022. 6. 25. 05. Bootstrap, 모달창 (Modal) ○ 모달(Modal) VS 팝업(Popup) ① 팝업 - 부모창과 자식창이 서로 독립적 관계 - 현재 화면에 다른 화면을 하나의 창으로 보여줌 - wondow.open() 함수 사용 ② 모달 - 부모창과 자식창이 한몸으로 구성되어 있음 - 화면 위에 하나의 작은 화면을 더 만들어 부가적인 일들을 처리 - 모달은 새로운 태그는 아니고, 이벤트에 따라 의 display를 조절해주는 것 - 팝업창은 모바일에서 뜨지 않거나 문제가 생기는 경우가 많아 최근에는 모달을 주로 사용함 ○ 모달(Modal) ① Bootstrap3 Open Modal × Modal Header Some text in the modal. Close ② Bootstrap4 Open modal Modal Heading × Modal body... 2022. 6. 24. 04. Bootstrap3, Input (text, password, textarea, checkbox , radio, select) ○ Text, Password Name: Password: ○ Textarea Comment: ○ Checkbox Option 1 Option 2 Option 3 Option 1 Option 2 Option 3 ○ Radio Option 1 Option 2 Option 3 Option 1 Option 2 Option 3 ○ Select Select list (select one): 1 2 3 4 Mutiple select list (hold shift to select more than one): 1 2 3 4 5 ○ Input 크기 Default input input-lg input-sm 2022. 6. 24. 03. Bootstrap, 표 (table) ○ 기본 테이블 Firstname Lastname Email John Doe john@example.com Mary Moe mary@example.com July Dooley july@example.com ○ 줄무늬 테이블 - 얼룩말처럼 흰색과 회색 배경이 교대로 ○ 테두리가 있는 테이블 ○ 마우스 올린 셀의 배경색이 변하는 테이블 (hover table) - 마우스를 올리지 않은 상태는 기본 테이블과 스타일 동일 ○ 셀 높이가 좁은 테이블 (Condensed Table) ○ 셀 색상 - , 에서 사용가능 Success Danger Info Info Active Primary Success Danger Info Warning Active Secondary Light Dark 2022. 6. 23. 02. Bootstrap, 버튼 (Buttons) ○ 기본 버튼 스타일 ① Bootstrap3 Basic Default Primary Success Info Warning Danger Link ② Bootstrap4 / Bootstrap5 Basic Primary Secondary Success Info Warning Danger Dark Light Link ○ 아웃라인 버튼 - Bootstrap4 / Bootstrap5 Primary Secondary Success Info Warning Danger Dark Light ○ 버튼 스타일 적용할 수 있는 태그 - , , : clss="btn" 사용가능 Link Button Button ○ 버튼 사이즈 ① Bootstrap3 : 4가지 사이즈 제공 Large Normal Small XSmall ② Boot.. 2022. 6. 23. 이전 1 2 다음
