CSS 6 (반응형, Bootstrap)

Media Queries

미디어 화면 크기에 따라 스타일 적용

@media()

• min-width

• max-width

• orientation
  - landscape

  
  

  ---

Bootstrap

반응형 웹페이지 제작을 위한 css 프레임워크

레이아웃, 공간배치 효율성 강화

CDN

Content Delivery Network
파일을 다운받지 않고 원격으로 접속할 수 있는 스타일 시트의 호스트 버전

(v5.2.3)
CSS

 		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
 </header>

JS

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js" integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V" crossorigin="anonymous"></script>

• 부트스트랩 CDN 링크 -> 개인 CSS 링크 배치시 본인 스타일로 덮어쓰면서, 직접 작성한 CSS 속성이 우선 적용

• 요소 class value를 기존 설정된 class name로 설정 시 효과 자동 적용

  • .container 요소 그룹
  • .nav 네비게이션바
  • .display 헤드
  • .lead 리드문
  • .blockquote 인용문
  • .btn 버튼
    등등..
    사이트 참고
  
  

  ---

GRID SYSTEM

• 하나의 .row는 12유닛으로 구성
  • 행 내부 컬럼은 균등한 비율 or 다른 비율 가능
  • .col-6 | .col-4 | .col-2 등 총량이 12개가 되도록 구성하면 됨

navbar

• .navbar

  • px-0 : x축 패딩 0
  • py-0 : y축 패딩 0
  • fixed-top : 상단 고정

• .navbar-expand-lg lg사이즈 이상에서 확장

• .navbar-toggler

  • data-toggle = "collapse" 토글 누를 때의 효과 : 숨기기
  • data-target = "" 특정 요소에 연동
  • aria-label = "" 토글 역할 설명

• .navbar-collapse

• .sticky-top

container

• d-none : display none
• d-lg-block : large 크기일 때는 block 형태 배치
• order-1 order-md-2 : defalt는 배치 순서 1번이지만 md 사이즈 이하일 땐 배치 순서 2 (1~12)
• mb-5 : margin-bottom 5px

form group

• .form-control

• .input-group

break points

• 반응형 페이지를 화면 크기에 따라 너비를 조정하는 중단점
  • (none) : 576px 미만에서 적용
  • sm : 576px 이상
  • md : 768px 이상
  • lg : 992px 이상
  • xl : 1200px 이상
  • xxl : 1400px 이상
  • fluid : x축 100% 활용
  • .col-xxl-3 형태

icon

<button> delete <svg 아이콘 코드/></button>

Bootstrap icons 무료 아이콘

+ font awesome 유/무료, 더 많은 종류