[ResponsiveWeb]반응형 웹과 BootStrap - 미디어쿼리 / 부트스트랩 적용법

< 반응형 웹 >

 

1. 개념

 

• 반응형 웹 ( = Responsive Web )
• Web 디자인의 기법 중 하나로, 디바이스의 디스플레이 종류에 반응하여 그에 맞도록 적절하게 UI 요소들이 유기적으로 배치되도록 설계된 웹
• 크게 말해, 브라우저의 크기에 실시간으로 반응하여 크기에 따라 레이아웃이 변하는 웹 사이트라는 의미

 

반응형 웹 디자인 예시들  1. 카카오 모빌리티 https://www.kakaomobility.com/ 2. 삼성 뉴스 룸 https://news.samsung.com/kr/ ( 워드 프레스 사용 ) 3. 네이버 (적응형 웹) https://m.naver.com/ https://naver.com/

 

 

왜 반응형이 필요한가에 대한 답은 아래 영상을 보면 잘 느낄 수 있다.

 

Youtube - 노마드 코더 - 웹 개발자들 무조건 보세요 ⚠️ 애플의 큰 그림!

 

 Viewport 

 

 

• 기기마다 화면 사이즈가 다르기 때문에 기기에 맞춰 디자인 하기 위한 크기 요소
• 디바이스 화면 크기를 고려하여 사용자에게 최적화 된 웹페이지 제공 가능

 

 @media ( 미디어 쿼리 ) 

 

• 서로 다른 미디어 타입(디바이스 화면)에 따라 별도의 CSS를 지정하게 하는 기술 

 

기본 사용법  @media 미디어 유형 and (크기 규칙) 미디어 유형 :All(전부) / Print(인쇄) / Screen(전부) 크기 규칙 : min(최소 뷰포트 넓이 설정) / max(최대 뷰포트 넓이 설정)

 

- 코드 예시

@media screen and (max-width:490px){}
/*화면 넓이가 480px 이하일 경우 화면에 적용*/

@media print and (min-width:481px){}
/*화면 넓이가 480px 이상일 경우 인쇄에 적용*/

 body {
        background-color: aqua;
      }

      /*min width = 480 이상일 때*/
      @media screen and (min-width: 480px) and(max-height: 300px) {
        body {
          background-color: pink;
        }
      }

      /*max-width:300 이하일 때*/
      @media screen and (max-width: 300px) {
        body {
          background-color: green;
        }
      }

 

 

<BootStrap>

 

 

1. 개념

• 웹사이트를 쉽게 만들 수 있게 도와주는 HTML / CSS / JS 공개 프레임워크
• https://getbootstrap.com/

 

프레임워크 vs 라이브러리  프레임 워크 : 원하는 기능 구현에 집중해서 개발 하도록 일정한 형태와 필요한 기능을 갖추고 있는 뼈대 라이브러리 : 특정 기능을 위해 모아둔 코드와 함수들의 집합이자 코드 작성 시 활용 가능한 도구

 

 BootStrap Docs 

 

https://getbootstrap.com/docs/5.2/getting-started/introduction/ X

 

• button , progress-bar 와 같은 요소들의 코드를 복사해서 사용 가능

 

	
    <!-- button -->
    <button type="button" class="btn btn-primary">Primary</button>
    <button type="button" class="btn btn-secondary">Secondary</button>
    <button type="button" class="btn btn-success">Success</button>
    <button type="button" class="btn btn-danger">Danger</button>
    <button type="button" class="btn btn-warning">Warning</button>
    <button type="button" class="btn btn-info">Info</button>
    <button type="button" class="btn btn-light">Light</button>
    <button type="button" class="btn btn-dark">Dark</button>

    <button type="button" class="btn btn-link">Link</button>

    <br /><br />

    <!-- progressbar -->
    <div
      class="progress"
      role="progressbar"
      aria-label="Basic example"
      aria-valuenow="25"
      aria-valuemin="0"
      aria-valuemax="100"
    >
      <div class="progress-bar" style="width: 25%"></div>
    </div>

    <br /><br />

 

 BootStrap Examples 

 

https://getbootstrap.com/docs/5.2/examples/

Examples

 

• 헤더, 푸터 같은 완성된 예시들을 가져와 사용 가능

 

bootstrap examples 적용법

• 왼쪽 Donload examples 를 통해 파일을 다운 받은 후, 원하는 예시의 코드 파일에서 코드를 복사해 사용하면 된다.

 

 Icon 

 

대표적인 폰트 아이콘 종류  1. BootStrap Icon  https://icons.getbootstrap.com/ 2.FontAwesome  https://fontawesome.com/ 3.Google Icon Fonts  https://fonts.google.com/icons

 

- 코드 예시

<!-- icon ( fill 바꾸면 색상변경)-->
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="200"
      height="200"
      fill="currentColor"
      class="bi bi-apple"
      viewBox="0 0 16 16"
    >
      <path
        d="M11.182.008C11.148-.03 9.923.023 8.857 1.18c-1.066 1.156-.902 2.482-.878 2.516.024.034 1.52.087 2.475-1.258.955-1.345.762-2.391.728-2.43Zm3.314 11.733c-.048-.096-2.325-1.234-2.113-3.422.212-2.189 1.675-2.789 1.698-2.854.023-.065-.597-.79-1.254-1.157a3.692 3.692 0 0 0-1.563-.434c-.108-.003-.483-.095-1.254.116-.508.139-1.653.589-1.968.607-.316.018-1.256-.522-2.267-.665-.647-.125-1.333.131-1.824.328-.49.196-1.422.754-2.074 2.237-.652 1.482-.311 3.83-.067 4.56.244.729.625 1.924 1.273 2.796.576.984 1.34 1.667 1.659 1.899.319.232 1.219.386 1.843.067.502-.308 1.408-.485 1.766-.472.357.013 1.061.154 1.782.539.571.197 1.111.115 1.652-.105.541-.221 1.324-1.059 2.238-2.758.347-.79.505-1.217.473-1.282Z"
      />
      <path
        d="M11.182.008C11.148-.03 9.923.023 8.857 1.18c-1.066 1.156-.902 2.482-.878 2.516.024.034 1.52.087 2.475-1.258.955-1.345.762-2.391.728-2.43Zm3.314 11.733c-.048-.096-2.325-1.234-2.113-3.422.212-2.189 1.675-2.789 1.698-2.854.023-.065-.597-.79-1.254-1.157a3.692 3.692 0 0 0-1.563-.434c-.108-.003-.483-.095-1.254.116-.508.139-1.653.589-1.968.607-.316.018-1.256-.522-2.267-.665-.647-.125-1.333.131-1.824.328-.49.196-1.422.754-2.074 2.237-.652 1.482-.311 3.83-.067 4.56.244.729.625 1.924 1.273 2.796.576.984 1.34 1.667 1.659 1.899.319.232 1.219.386 1.843.067.502-.308 1.408-.485 1.766-.472.357.013 1.061.154 1.782.539.571.197 1.111.115 1.652-.105.541-.221 1.324-1.059 2.238-2.758.347-.79.505-1.217.473-1.282Z"
      />
    </svg>

    <!-- html 이 아닌 i 태그로 가져오려면 cdn 도 가져와야 함 -->

    <i class="bi bi-umbrella"></i>