해리의 데브로그

Web 06 - Bootstrap Introduction, Utilities(1)

17 Feb 2019 | Web HTML CSS Bootstrap

CSS Framework / Bootstrap

까다로운 CSS 레이아웃을 손쉽게 만들어주는 소프트웨어 프레임 워크

A CSS framework is a software framework that is meant to allow for easier, more standards-compliant web design using the Cascading Style Sheets language.

CDN

  • CDN: Content Deliver (Distribution) Network
  • 컨텐츠(CSS, JS, Image, Text등)을 효율적으로 전달 하기 위해 여러 노드에 가진 네트워크에 데이터를 제공하는 시스템. (컴퓨터에 폰트가 없는 경우, 구글에서 제공하는 웹폰트를 사용하여 적용하는 것과 비슷한 방식)
    • 개별 end-user의 가까운 서버를 통해 빠르게 전달 가능(지리적 이점)
    • 외부 서버를 활용함로써 본인 서버의 부하가 적어짐
    • CDN은 보통 적절한 수준의 캐시 설정으로 빠르게 로딩 할 수 있음.

cf) Reboot / Reset CSS / normalize CSS ​ 브라우져가 들고 있는 CSS를 초기화시킴. (모든 브라우져에서 똑같이 보이게 하기 위한 친구)

Bootstrap 기본 설정

  • Bootstrap의 CSS와 자바스크립트(JS)를 CDN을 통해 활용하기 위해 아래의 코드를 적용
<!-- CSS -->
<head>
   <link rel="stylesheet" 	 href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
</head>

<body>
<!-- JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>   
</body>

Utilities

1. spacing

  • margin과 padding 등 여백과 공간을 설정
  • https://getbootstrap.com/docs/4.2/utilities/spacing/
<body>
    <--! margin -->
    <h1 class="m-0"> margin의 space를 전부 0으로 </h1>
    <h1 class="mx-0"> x축(좌,우) space를 0으로 </h1>
    <h1 class="my-0"> y축(위,아래) space를 0으로 </h1>
    <h1 class="mt-0"> 위 space를 0으로 </h1>
    <h1 class="mb-0"> 아래 space를 0으로 </h1>
    <h1 class="ml-0"> 왼쪽 space를 0으로 </h1>
	<h1 class="mr-0"> 오른쪽 space를 0으로 </h1>
    
    <--! padding -->
    <h1 class="p-0"> padding의 space를 전부 0으로 </h1>
    <h1 class="px-0"> x축(좌,우) space를 0으로 </h1>
    <h1 class="py-0"> y축(위,아래) space를 0으로 </h1>
    <h1 class="pt-0"> 위 space를 0으로 </h1>
    <h1 class="pb-0"> 아래 space를 0으로 </h1>
    <h1 class="pl-0"> 왼쪽 space를 0으로 </h1>
	<h1 class="pr-0"> 오른쪽 space를 0으로 </h1>
   
    <-- 브라우져의 기본 rem은 16px -->
    <h1 class="m-0"> 0은 0rem 	=> 0px </h1>
    <h1 class="m-1"> 1은 0.25rem => 4px </h1>
    <h1 class="m-2"> 2은 0.5rem  => 8px </h1>
    <h1 class="m-3"> 3은 1rem    => 16px </h1>
    <h1 class="m-4"> 4은 1.5rem  => 24px </h1>
    <h1 class="m-5"> 5은 3rem    => 48px </h1>
     
    <--! 음수도 가능 -->
    <h1 class="mt-n5"> margin의 위(top)의 space를 -48px 
        			   (=48px만큼 위로 이동) 		
    </h1>    
    
    <--! 자동으로 설정 -->
    <h1 class="m-auto"> space를 자동으로 설정 </h1>      

</body>

2. Color

  • 텍스트 및 배경의 색상을 설정

  • https://getbootstrap.com/docs/4.2/utilities/colors/

  • Text color

  • Background color

bg color

  • 예시 코드 ```html
<-- background: primary 색상 / text: sucess 색상 적용 -->

Lorem ipsum dolor sit




## 3. Border

```html
<body>
    <--! 테두리 삽입 -->
    <p class="border">Lorem ipsum dolor sit</p>
        
    <--! 테두리 색상을 Primary로 변경(border을 넣고 추가로 border-이하를 삽입할 것) -->
    <p class="border border-primary">Lorem ipsum dolor sit</p>
    
    <--! 테두리 모양 변경 -->
    <p class="border border-rounded">박스 모서리만 둥글게</p>
    <p class="border border-rounded-circle">박스 전체를 둥글게</p>
    <p class="border border-rounded-pill">박스 양 끝을 둥글게(알약 모양)</p>
</body>

4. Display

<body>
    <a class="d-block"> 태그 안의 내용을 블록 속성으로 변경 </a>
    <a class="d-inline"> 태그 안의 내용을 인라인 속성으로 변경 </a>
    <a class="d-inline-block"> 태그 안의 내용을 인라인-블록 속성으로 변경 </a>
    <a class="d-none"> 태그 안의 내용을 숨기기 </a>
    
    <a class="d-sm-none"> 
     태그 안의 내용을 sm보다 작을 때 none을 주기 
     sm; small device - 750px
     따라서, 태그안 내용이 750px보다 작으면 none이 됨.
    </a>
    
    <-- 테두리 색상을 Primary로 변경(border을 넣고 추가로 border-이하를 삽입할 것) -->
    <a class="border border-primary">Lorem ipsum dolor sit</p>
    

</body>

Bootstrap의 breakpoint

breakpoint

5. Position

<body>
    <a class="position-static"> 박스의 position을 static으로 설정 </a>
    <a class="position-aboslute"> 박스의 position을 absolute으로 설정 </a>
    <a class="position-relative"> 박스의 position을 relative으로 설정 </a>
    <a class="position-fixed"> 박스의 position을 fixed으로 설정 </a>
    
   	<-- fixed position은 추가로 고정 위치를 설정 할 수 있음 -->
    <a class="position-fixed fixed-top"> fixed + 위치는 위 </a>
    <a class="position-fixed fixed-bottom"> fixed + 위치는 아래 </a>
    <a class="position-fixed fixed-left"> fixed + 위치는 왼쪽 </a>
    <a class="position-fixed fixed-right"> fixed + 위치는 오른쪽 </a>
   
</body>

6. Text/Font

<body>
   	<-- text 정렬  -->
    <a class="text-center"> 특정한 박스의 콘텐츠를 가운데 정렬 </a>
    <a class="text-right"> 특정한 박스의 콘텐츠를 오른쪽 정렬 </a>
    <a class="text-left"> 특정한 박스의 콘텐츠를 왼쪽 정렬 </a>
    <a class="position-fixed"> 박스의 position을 fixed으로 설정 </a>
        
   	<-- font style 적용  -->
    <a class="font-weight-normal"> text의 기본값(Default) </a>
    <a class="font-weight-bold"> text를 굵게 </a>
    <a class="font-weight-bolder"> text를 더 굵게 </a>
    <a class="font-weight-light"> text를 연하게 </a>
    <a class="font-weight-lighter"> text를 더 연하게 </a>    
    <a class="font-italic"> text를 기울임 </a>
        
</body>

7. Layout

  • container: 기본으로 깔고 가는 bootstrap의 basic layout element
  • 기본적으로 양쪽 끝에 공백이 있음.
  • 공백을 최소화 하고 싶을땐? .container-fluid 입력
<div class="container">
  <!-- Content here -->
</div>

Related Posts

Comments