[CSS] Bootstrap 4를 5분 안에 배우기

원제 : Learn Bootstrap 4 in 5 minutes

세계에서 가장 유명한 프런트엔드(front-end) 구성 요소(component) 라이브러리의 최신 버전에 대해 알아봅시다.

Bootstrap 4 (일명 v4)가 2년 넘게 알파(alpha) 상태로 있다가 올해 1월 출시되었습니다. 이것은 주요 사항들의 재구성을 상징합니다. 내부적으로 많은 변경 사항이 있을 뿐만 아니라 머리를 쥐어짜야 할 몇 가지 새로운 개념이 있습니다.
이 튜토리얼에서는 부트스트랩 v3에서 v4 로의 가장 중요한 변경 사항을 설명하려고합니다. 이전에 부트스트랩을 사용했다고 가정하기 때문에 기본을 설명하지 않겠습니다.
우리는 또한 스크림바 (Scrimba)에서 무료 부트스트랩 (Bootstrap) 4 코스를 만들고 있습니다. 일단 준비가되면 코스에 일찍 접속하려면 이메일을 남겨주세요.
이제 가장 중요한 변경 사항을 살펴 보겠습니다 (특별한 순서는 없습니다) :

#1: Flatter buttons

재미있고 시각적인 것으로 시작합시다! v4의 버튼은 v3보다 훨씬 가볍습니다. 다음은 이전 버튼입니다.
presentation

다음은 새로운 것들 중 일부입니다 :
presentation
이것은 지난 2 년 동안 대단히 인기가있는 Material Design에서 발견되는 것과 같은보다 현대적인 설계 지침과 일치합니다.

# 2 : 미디어 쿼리가 더 좋습니다.

Boostrap v3은 그리드에 대한 브레이크 포인트가 너무 적었습니다. 제 의견으로는 가장 낮은 xs이 768px였습니다. 많은 트래픽은 일반적으로 그보다 좁은 화면에서 발생하므로 많은 개발자에게 실망스러웠습니다.
이제는 새로운 브레이크 포인트 xl를 추가했습니다. 이것은 이전에 가지고 있던 lg의 역할을 취하고 나머지 브레이크 포인트를 아래쪽으로 밀어 넣어 범위를 576px까지 줄였습니다.
$grid-breakpoints: ( xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px ) !default;
이렇게하면 모든 화면 크기에서 잘 작동하는 grids를 쉽게 구성 할 수 있습니다.

# 3 : Flexbox 지원으로 유연성 향상

이제 유명한 부트스트랩 grids가 floats 대신 Flexbox로 생성됩니다. 첫눈에, 대부분의 그리드 레이아웃이 똑같이 작동하기 때문에 이것은 개발자로서 큰 차이를 만들지 않습니다. 그러나 몇 가지 가능성을 열어줍니다.
이전에는 각 column의 width를 정의해야했습니다 (1에서 12까지). 이제 한 column의 width를 정의한 다음 Flexbox에서 다른 column을 자동으로 설정할 수 있습니다.
다음은 정확하게 수행하는 예입니다.
presentation
아래의 markup에서 볼 수 있듯이 중간 column의 width을 6 (전체 width의 절반과 동일)으로 설정 한 다음 나머지 column은 남은 공간을 단순히 차지합니다.
<div class="container"> <div class="row"> <div class="col"> 1 of 3 </div> <div class="col-6"> 2 of 3 (wider) </div> <div class="col"> 3 of 3 </div> </div> </div>

Flexbox classes

Bootstrap 4에는 Flexbox 컨테이너와 items을 모두 제어하는 ​​데 사용할 수있는 여러 classes가 있습니다. element를 Flexbox 컨테이너로 변환하려면 d-flex 클래스를 지정하기 만하면됩니다.
<div class="d-flex">I'm a flexbox container!</div>
내부에 텍스트가있는 Flexbox 컨테이너를 제공합니다.
presentation
참고 : 여기서는 Flexbox 관련 스타일만 언급합니다.
몇 가지 items을 추가하고 다른 클래스를 추가하여 컨테이너에서의 위치를 ​​제어하십시오.
<div class="d-flex justify-content-center""> <div>Flex item</div> <div>Flex item</div> <div>Flex item</div> </div>
items이 컨테이너의 중심에 위치하게합니다.
presentation
items 자체에 클래스를 추가 할 수도 있습니다. 자세한 내용은 문서의 Flex section을 확인하십시오.

# 4 : classes와 spacing 제어

이거 꽤 멋지다. 이제 p-*m-* 클래스를 사용하여 padding 및 margins을 제어 할 수 있습니다. 범위는 0에서 5까지의 숫자를 적용하여 0.25rem에서 3rem으로 바뀝니다.
예를 들어 가능한 한 많은 padding을 만들기 위해 Flexbox 컨테이너에 p-5 클래스를 제공합니다.
<div class="d-flex p-5">I'm a flexbox container!</div>
다음과 같이 표시됩니다.
presentation
다음과 같이 특정면 (top, bottom, right, left)에 간격을 넣으려면 t, b, r og l을 추가 할 수도 있습니다.
<div class="d-flex pl-5">I'm a flexbox container!</div>
이러면 다음과 같이 왼쪽에 padding 만 추가됩니다.
presentation
참고 : 원래의 flexbox 컨테이너에는 기본적으로 p-2 클래스가있었습니다.

# 5 : pixels에서 rems까지

부트스트랩 4는 media queries 및 grid 동작을 제외한 모든 위치에서 상대적 측정 단위 (rems)로 pixels을 교체했습니다. 이는 rem 단위가 절대 pixels이 아니기 때문에 더 많은 유연성과 응답성을 의미합니다.
rems와 함께 모든 font-size는 root element (html 태그)에 상대적이며 기본적으로 1rem16px와 같습니다. 그러나 root element에서 font-size를 50%로 변경하면 1rem은 앱 전체에서 8px와 같습니다.
이 변경은 웹 사이트에서 자신의 스타일을 적용 할 때 rem을 사용해야한다는 의미는 아닙니다.

# 6 : Cards가 panels, wells 및 thumbnails을 대체합니다.

부트 스트랩에는 cards라고 불리는 완전히 새로운 component가 포함되어있어 panels, wells 및 thumbnails을 대체합니다. cards는 유연하고 확장 가능한 콘텐츠 컨테이너입니다. 여기에는 headers과 footers, 다양한 컨텐트, 상황 별 배경색 및 강력한 표시 옵션에 대한 옵션이 포함됩니다.
presentation

#7: Goodbye IE9

부트스트랩 v4는 IE8, IE9 및 iOS 6에 대한 지원을 중단했습니다. 이제 v4는 IE10 + 및 iOS 7+ 만 지원합니다. 그 중 하나가 필요한 사이트의 경우 v3을 사용하십시오.
presentation
물론 이 글에 포함되지 않은 많은 변경 사항이 있으므로 문서의 Migration section을 확인하여 모든 변경 사항을 확인하십시오.
마지막으로 Bootstrap v4를 제대로 배우고 싶다면 여기에 이메일을 남겨 두십시오. 그러면 주제에 관한 무료 코스를 시작할 때 알려 드리겠습니다.
해피 코딩 :)



안녕하세요!
Early adopter입니다. 제 번역 블로그를 자주 찾아 주셔서 감사드립니다. 이번에 페이스북에 [DTF] 디자인 번역 공장 - Design Translation Factory라는 공개 그룹을 만들어 보았습니다.
저를 위해서 시작한 블로그였는데 1년 넘게 하다 보니 욕심이 생기게 되었습니다. 해외 디자인 관련 좋은 콘텐츠를(영어 포함 다양한 언어) 가능한 한 모두 번역해보자!라는 목표를 새워보았습니다. 많이 도와주세요^^
그리고 페이스북 친구도 거의 없습니다. ㅠㅠ 친구 맺어주시고 [DTF] 디자인 번역 공장 - Design Translation Factory 그룹도 많이 가입해주시길 바랍니다. 아직은 너무 부족하지만 함께 좋은 방향으로 발전할 수 있기를 기대합니다.
다시 한번 제 블로그를 방문해 주셔서 진심으로 감사드립니다.

번역글 추천(신청) 받습니다.

PS. 안녕하세요. 일 년 조금 넘게 제가 공부 좀 해보려고 블로깅을 처음 시작했는데, 생각보다 많은 분들께서 제 번역 글들을 보시고 계셔서 놀라기도 하고 좋기도 했습니다.
읽고 싶은 좋은 디자인 관련 해외 글들이 있다면 리뷰에 링크를 달아 주세요. 가능하면 번역해보려고 합니다.
기간은 보통 원작자 허락 구하는데 3일정도 그리고 번역은 1일 정도입니다. 신청하시면 가능한 1주일 내에는 충분히 볼 수 있지 않을까 생각됩니다.

이 글은 번역 글입니다. 아래 원본 링크를 확인하세요