[개발자의품격][부트캠프][1기][15차시] 부트스트랩 #1

[ 영광의 시대!/2022 개발자의 품격 부트캠프 1기 ]

2022년 03월 01일 15시 03분 19초에 업로드 된 글입니다.

작성자: DandyNow

728x90

부트스트랩 #1

https://getbootstrap.com/

부트스트랩은 트위터에 만든 CSS 프레임워크이다. 반응형웹을 간편하게 구현할 수 있어 많이 사용된다. 부트스트랩의 클래스명을 외울 필요는 없다. 부트스트랩 테마를 구매하여 개발에 빠르게 적용하면 되기 때문이다.

그리드 시스템은 부트스트랩의 핵심이다. 12 그리드 시스템을 사용한다. 실무에서는 다음의 코드와 같은 방식을 많이 사용한다.

<body>
  <div class="row">
    <div class="col-xxl-3 col-xl-4 col-lg-6" style="border: 2px solid green">
      A
    </div>
    <div class="col-xxl-3 col-xl-4 col-lg-6" style="border: 2px solid green">
      B
    </div>
    <div class="col-xxl-3 col-xl-4 col-lg-6" style="border: 2px solid green">
      C
    </div>
    <div class="col-xxl-3 col-xl-4 col-lg-6" style="border: 2px solid green">
      D
    </div>
    <div class="col-xxl-3 col-xl-4 col-lg-6" style="border: 2px solid green">
      E
    </div>
    <div class="col-xxl-3 col-xl-4 col-lg-6" style="border: 2px solid green">
      F
    </div>
    <div class="col-xxl-3 col-xl-4 col-lg-6" style="border: 2px solid green">
      G
    </div>
  </div>
</body>

접근가능한 리치 인터넷 어플리케이션(Accessible Rich Internet Applications, ARIA)은 시각장애인을 위한 웹접근성을 위한 것이다. 매우 중요한 부분이다. 아래 코드는 aria를 통해 input 태그와 span 태그가 관련있음을 보여준다.

<body>
  <div class="row g-3 align-items-center">
    <div class="col-auto">
      <label for="inputPassword6" class="col-form-label">Password</label>
    </div>
    <div class="col-auto">
      <input
        type="password"
        id="inputPassword6"
        class="form-control"
        aria-describedby="passwordHelpInline"
      />
    </div>
    <div class="col-auto">
      <span id="passwordHelpInline" class="form-text">
        Must be 8-20 characters long.
      </span>
    </div>
  </div>
</body>

최근에는 기업 시스템을 만들때 부트스트랩을 많이 사용했다. 다만 회사의 디자인 가이드에 따라 Theme colors와 font 정도만 Sass를 이용해 바꾸어 사용하는 경우가 많았다.

Utilities > Display > Hiding elements는 디스플레이의 사이즈에 따라 화면을 보여주거나 감출수 있다. 기업 업무 시스템의 경우 보안을 목적으로 이러한 기능을 잘 활용해야 한다. 예를들어 노트북에서는 보이는 화면을 스마트폰에서는 보이지 않도록 하여 외부에서 스마트폰 이용시 보안상 감춰야하는 정보를 보여주지 않을 수 있다.

Utilities > Display >Display in print도 실무에서 많이 사용한다. 웹 페이지를 프린트할 때 불필요한 부분을 제외 시킬수 있다.

참고로 워드프레스는 관리자 모드를 이용해 코딩 없이 제작할 수 있다는 점에서 부트스트랩과 차이가 있다.

유료 부트스트랩 테마 사이트 : https://wrapbootstrap.com/

※ 라이센스

Single : 1개 사이트 용
Multiple : 사이트 개수 제한 없음
Extended : 약간의 수정 후 팔 수 있음

무료 이미지 사이트 : Unsplash 와 Pexels 를 주로 사용한다.

728x90

저작자표시 비영리 변경금지

'영광의 시대! > 2022 개발자의 품격 부트캠프 1기' 카테고리의 다른 글

[개발자의품격][부트캠프][1기][16차시] 부트스트랩 #3 \| 생성 (0)	2022.03.02
[개발자의품격][부트캠프][1기][16차시] 부트스트랩 #2 \| 조회, 삭제 (0)	2022.03.02
[개발자의품격][부트캠프][1기][15차시] JavaScript 주요 포인트 #22 \| 이벤트 (0)	2022.03.01
[개발자의품격][부트캠프][1기][14차시] JavaScript 주요 포인트 #21 \| 데이터 그리드 - 정렬, 필터, 페이징 (0)	2022.02.28
[개발자의품격][부트캠프][1기][13차시] JavaScript 주요 포인트 #20 \| DOM event - 스크롤 이벤트 (0)	2022.02.23

다음글이 없습니다.

이전글이 없습니다.

부트스트랩 #1

'영광의 시대! > 2022 개발자의 품격 부트캠프 1기' 카테고리의 다른 글

티스토리툴바