부트스트랩 3

Bootstrap 레이아웃(2)

[Bootstrap 계속] Bootstrap에서는 모바일(다음에 태블릿, pc 순서로) 버전 먼저 짜는게 더 쉽다 Bootstrap에서 text-end : 우측정렬 Q. PC에서 4열, 태블릿 2열, 모바일 1열 코드 어떻게? 모바일 먼저 짜기 안녕 안녕 안녕 안녕 태블릿 버전 짜기 안녕 안녕 안녕 안녕 --> 이렇게 되면 모든 사이즈에서 6사이즈를 차지 하므로 조건부를 줘야함 --> 태블릿사이즈 이상에서만 col-6 되도록 아래와 같이 수정 안녕 PC 버전 짜기 --> 조건부 연달아서 입력 가능함.

CSS 2023.07.07

Bootstrap 레이아웃

[Bootstrap Grid 레이아웃(반응형)] .row 안에 .col 사용하면 균일하게 쪼개기 가능 안녕하세요 안녕하세요 안녕하세요 --> flex 필요없이 편리하게 균등분배 가능 안녕하세요 --> 가로로 쪼개고 싶으면 col-차지할 크기 --> 총 12칸으로, col-3은 정확히 4등분 한 크기 [반응형 조건문] --> @media 문법 없이도 반응형 레이아웃 개발 가능한 장점!! 안녕하세요 --> col을 이용해 가로로 쪼갠걸 반응형으로 --> md 사이즈 이상에서만 적용해주세요 --> 상세 사이즈는 grid system 검색 [기타 유용 기능] 안녕하세요1 안녕하세요2 안녕하세요3 --> 순서 조정 가능: order-first or order-1하면 열 맨 앞으로 옴 안녕하세요3 --> order..

CSS 2023.07.07

Bootstrap

[Bootstrap] --> 개발이 매우 빨라진다 --> 뼈대 디자인에 유용 ㅇ https://getbootstrap.com 에서 다운로드 css, js 둘 다 다운로드 css 파일은 head 태그 안에, js 파일은 body 태그 끝나기 전 삽입 ㅇ또는 quick start 템플릿 복사 붙여넣기 해도 됨 ㅇ원하는 예제(버튼, navbar, card, carousel(이미지 슬라이드), modal(팝업창), badge, media object등)을 검색 [Utility class 제공(class 명 생성 안해도 되는 편리)] Utilities 탭에서 검색 가능 Card title Card title Card title --> mt: 타이틀에 마진탑 3만큼 주기 (1~5까지 가능) --> pt: 타이틀에 ..

CSS 2023.07.07
728x90
LIST