ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • CSS Framework
      웹프로그래밍 2023. 6. 13. 20:40
      반응형

      프레임워크

      어떠한 목적을 달성하기 위해 복잡하게 얽혀있는 문제를 해결하기 위한 구조, 소프트웨어 개발의 뼈대 역할.

      여러가지 기능을 가진 클래스와 라이브러리가 특정 결과물을 구현하고자 합쳐진 형태라고 볼 수 있다. 

       

      여기서 라이브러리란 자주 사용되는 로직을 재사용하기 편하도록 수많은 클래스들을 묶어서 제공하는 문서를 의미합니다.

      쉽게 말하자면 라이브러리를 여러개 묶어서 제공해주어 표준을 세운것이 프레임워크 입니다.

       

      종류

      • Spring: 자바의 웹 프레임워크
      • Bootstrap: 트위터의 자바스크립트 기반 웹 프레임워크
      • Node.js의 Express.js, Next.js 프레임 워크 등이 있습니다.

      이렇게 여러개의 프레임워크가 존재하는 만큼 각각의 프레임 워크들만의 장단점도 있습니다.

      장단점

      장점

      • 효율적 -> 시간과 비용이 절약되어 생산성 증가
      • 질 향상-> 개발자가 실수하기 쉬운 부분을 대체해줍니다.
      • 유지보수-> 어떤 개발자가 사용해도 유지될 수 있을 만큼 체계적이며 위험부담이 적습니다.

      단점

      • 재학습-> 기본적으로 짜여있는 코드들을 습득하고 이해해야합니다.
      • 제약사항->뼈대를 제공하여 살을 붙여서 쓰는 형식으로 기본 뼈대를 함부로 바꿀수가 없습니다.

      Bootstrap 5

      2021년에 릴리즈된 최신 프레임워크

      왜 사용하는가?

      1. 쉬운 사용
      2. 반응형 요소
      3. 모바일 접근성
      4. 양립가능( 크롬, 엣지 등)

      Container

      <!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
  
<div class="container">
  <h1>My First Bootstrap Page</h1>
  <p>This part is inside a .container class.</p>
  <p>The .container class provides a responsive fixed width container.</p>
  <p>Resize the browser window to see that the container width will change at different breakpoints.</p>
</div>

</body>
</html>
      • 반응형 고정 넓이 클래스 

       

      Grid System

      • 12 column 까지 가능
      <div class="flex-container">
  <div style="flex-grow: 1">1</div>
  <div style="flex-grow: 1">2</div>
  <div style="flex-grow: 20">3</div>
</div>

      위와 같이 flex-container을 사용하면

      flex-grow 를 통해 넓이 조정가능

      이와 같은 형식으로 되어 있다.

       

      예를 들어 똑같은 크기의 column이나 row를 만들고 싶다면

       

        <div class="row">
    <div class="col p-3 bg-primary text-white">1</div>
    <div class="col p-3 bg-dark text-white">2</div>
    <div class="col p-3 bg-primary text-white">3</div>
  </div>

      이와 같이 클래스를 row나 clumn 지정후 값을 넣어주면 된다. 

      만약 원하는 모양을 넣어주는 클래스를 찾고 싶다면 bootstrap공식 문서나 구글링을 통해 찾아보면 된다.

       

      애초에 Bootstrap 목적이 라이브러리화를 시켜서 클래스를 쉽게 찾아서 쓰는 것이기에

      이렇게 하나씩 학습하는 것보다 원하는 클래스를 찾아 사용하는 것이 학습에 더 도움되는 것 같다.

      반응형 디바이스 크기 관련 클래스

      • .col- (extra small devices - screen width less than 576px)
      • .col-sm- (small devices - screen width equal to or greater than 576px)
      • .col-md- (medium devices - screen width equal to or greater than 768px)
      • .col-lg- (large devices - screen width equal to or greater than 992px)
      • .col-xl- (xlarge devices - screen width equal to or greater than 1200px)
      • .col-xxl- (xxlarge devices - screen width equal to or greater than 1400px)
      <div class="row">
    <div class="col-sm-4 p-3 bg-primary text-white">
    <div class="col-sm-8 p-3 bg-dark text-white">.col</div>
  </div>

      이런식으로 4크기 8크기의 작은 디바이스에 관하여 값을 주었음으로 한줄(12까지)에 1:2 비율로 576px크기 이상 768px크기 이하인 디바이스에서 볼 수 있다.

       

      만약 저렇게 넓이 값을 주지 않는다면 %로 인식한다.

      예를들어

      <div class="row">
    <div class="col-sm p-3 bg-primary text-white">
    <div class="col-sm p-3 bg-dark text-white">.col</div>
  </div>

      이런식으로 값이 들어가면 반,반 비율로 들어가게 된다.

      만약 위의 디바이스 크기를 지정하지 않으면 모든 디바이스를 의미하게된다.

       

      그러면 위의 .co-sm- 과 같이 extra와 small 사이의 디바이스를 크기를 지정값 768이상 늘리거나 576이하로 줄이면 어떻게 될까?

      결론 부터 말하자면 576px 크기와 768크기를 유지하게 된다. 어떻게 보면 당연한 내용이다.

       

      하나의 넓이 값만 주고 다른 값을 주지 않으면 어떻게 될까?

            <div class="row">
        <div class="col bg-dark text-white">col</div>
        <div class="col-6 bg-primary text-white">col-6</div>
        <div class="col bg-dark text-white">col</div>
      </div>

      위와 같은 코드를 실행한다면 중간의 클래스를 6의 넓이로 지정해주고 나머지 넓이를 반반?

      그렇다.

       

      class="row row-cols-1"

      이러한 형식도 있는데 한줄에 한 컬럼씩 이라는 뜻이다.

      <div class="row row-cols-1">
<!-- 한 줄에 한 컬럼씩 -->
  <div class="col">1 of 2</div>
  <div class="col">2 of 2</div>
</div>

<div class="row row-cols-2">
<!-- 한 줄에 두개의 컬럼씩 -->
  <div class="col">1 of 4</div>
  <div class="col">2 of 4</div>
  <div class="col">3 of 4</div>
  <div class="col">4 of 4</div>
</div>

<div class="row row-cols-3">
  <div class="col">1 of 6</div>
  <div class="col">2 of 6</div>
  <div class="col">3 of 6</div>
  <div class="col">4 of 6</div>  
  <div class="col">5 of 6</div>
  <div class="col">6 of 6</div>
</div

      마지막으로 텍스트와 배경끝부분을 완전 앞당기고 싶다면 gutter 클래스 .g -0을 사용하면 된다.

       

      반응형
      저작자표시 비영리 변경금지 (새창열림)

      '웹프로그래밍' 카테고리의 다른 글

      SVG Graphics  (0) 2023.06.13
      자바스크립트 시간(타이밍 이벤트)  (0) 2023.06.13
      Canvas Graphics  (0) 2023.06.13
      The Browser Object Model(BOM)  (0) 2023.06.13

      관련글 관련글 더보기

    Designed by Tistory.

    티스토리툴바