[Framework] #3. Bootstrap의 Border, Box Sizing, 정렬

오늘은 Bootstrap의 Border에 관련된 클래스들과 col의 정렬에 관해 알아보자 :)

1. Border(테두리)

① 방향

• 코드
  
• 결과
  

② 색상

ⓐ 예

• 코드
• 결과

ⓑ ❗️ 주의

• 테마 색상에 사전정의된 색상만 사용가능 (다른 색 사용 하고 싶으면 style.css에 색 추가하여 사용!)
• border 클래스명 없이 사용하면 테두리 색 적용되지 않음!

<span class="border border-primary">1</span> // ⭕️
<span class="border-primary">1</span> // ❌

③ 두께

ⓐ 예

• 코드
• 결과

ⓑ ❗️ 주의

• 두께는 1~5까지만 존재하고 6부터는 적용되지 않음! (6이상의 숫자들로 해 본 결과 border-1의 결과와 동일하게 나옴!)
• border 클래스명 없이 사용하면 테두리 두께 적용되지 않음!

④ 모서리 radius

ⓐ 예

• 코드
• 결과

아래처럼 radius의 정도를 지정해 줄 수도 있다!

• 코드
• 결과

ⓑ ❗️ 주의

• border 클래스명 없이 사용하면 테두리 radius 적용되지 않음!
• radius는 img 태그에도 사용 가능! 이 때는 border 클래스명 필요 ❌
  

2. Box Sizing (박스 사이징)

가장 기본이라 할 수 있는 각 요소들의 사이즈를 컨트롤 할 수 있는 클래스에 대해 알아보자!

① 넓이

ⓐ 기본 문법

w-{size} // 기본 문법 (넓이)
w-50 // 예

mw-{size} // 기본 문법 (최대넓이)
mw-75 // 예

❗️ 여기서 size는 %를 의미한다! 즉, w-50은 width를 화면 비율의 50%로 설정한다는 코드이다!

ⓑ 예

• 코드
• 결과

② 높이

ⓐ 기본 문법

h-{size} // 기본 문법 (높이)
h-50 // 예

mh-{size} // 기본 문법 (최대높이)
mh-75 // 예

❗️ 여기서도 size는 %를 의미한다! 즉, h-50은 height를 화면 비율의 50%로 설정한다는 코드이다!

ⓑ 예

• 코드
• 결과

부모 요소에 height: 100px로 고정시켜두고 그 내부에 inline-block의 성질을 가진 div 4개를 넣었다! 높이가 잘 적용되는 걸 볼 수 있다

❗️ 위의 예들은 div를 사용했지만 넓이와 높이를 적용하는 건 img, span 등등 다 사용가능하다!

3. col(열) 정렬

사이트를 디자인하다 보면 Grid의 col(열)의 수직, 수평 정렬은 불가피하다!
그 방법에 대해 알아보자!

① 수직 정렬

ⓐ align-items-start

• 정의
  : 1개의 row(행) 내부의 각 col(열)들의 시작 부분이 같은 선상에 놓이게 수직 정렬

• 코드

• 결과

각 col의 시작 부분이 같은 선상에 놓이게 수직 정렬되는 걸 볼 수 있다!!

ⓑ align-items-center

• 정의
  : 1개의 row(행) 내부의 각 col(열)들의 가운데 부분이 한 선상에 놓이게 수직 정렬

• 코드

• 결과

각 col의 가운데 부분이 같은 선상에 놓이게 수직 정렬되는 걸 볼 수 있다!!

ⓒ align-items-end

• 정의
  : 1개의 row(행) 내부의 각 col(열)들의 마지막 부분이 같은 선상에 놓이게 수직 정렬

• 코드

• 결과

각 col의 마지막 끝 부분이 같은 선상에 놓이게 수직 정렬되는 걸 볼 수 있다!!

---

🤔 그렇다면 각 col들 중 한 개만 정렬을 다르게 하고 싶다면?
위의 클래스명들에서 items ➡️ self 로 변경하고 다르게 정렬하고 싶은 col에 클래스명을 추가해주면 된다!

ⓓ align-self-start

• 코드
  :row는 align-items-end 정렬을 적용한 뒤, 첫번째 col에만 align-self-start을 적용
  

• 결과
  

전체 row는 아래 부분을 기준으로 정렬되었고, 첫번째 col만 시작 부분 기준으로 수직 정렬 된 것을 확인할 수 있다!

ⓔ align-self-center

• 코드
  :row는 align-items-end 정렬을 적용한 뒤, 첫번째 col에만 align-self-center을 적용

• 결과
  

전체 row는 아래 부분을 기준으로 정렬되었고, 첫번째 col만 가운데 부분 기준으로 수직 정렬 된 것을 확인할 수 있다!

ⓕ align-self-end

• 코드
  :row는 align-items-start 정렬을 적용한 뒤, 첫번째 col에만 align-self-end을 적용

• 결과

전체 row는 시작 부분을 기준으로 정렬되었고, 첫번째 col만 끝 부분 기준으로 수직 정렬 된 것을 확인할 수 있다!

② 수평 정렬

ⓐ justify-content-start

• 정의
  : 1개의 row(행) 내부의 각 col(열)들을 왼쪽으로 수평 정렬

• 코드

• 결과

row의 col들이 왼쪽으로 수평 정렬된 것을 볼 수 있다!

ⓑ justify-content-center

• 정의
  : 1개의 row(행) 내부의 각 col(열)들을 가운데로 수평 정렬

• 코드

• 결과

row의 col들이 가운데로 수평 정렬된 것을 볼 수 있다!

ⓒ justify-content-end

• 정의
  : 1개의 row(행) 내부의 각 col(열)들을 오른쪽으로 수평 정렬

• 코드

• 결과

row의 col들이 오른쪽으로 수평 정렬된 것을 볼 수 있다!

ⓓ justify-content-between

• 정의
  : 1개의 row(행) 내부의 각 col(열)들을 좌우 공간없이 같은 간격으로 수평 정렬

• 코드

• 결과

row의 col들이 좌우 공간없이 같은 간격으로 수평 정렬 되었다!

ⓔ justify-content-around

• 정의
  : 1개의 row(행) 내부의 각 col(열)들을 좌우 공간을 두고, 같은 간격으로 수평 정렬

• 코드

• 결과

row의 col들이 좌우의 공간을 두고, 같은 간격으로 수평 정렬 되었다!

ⓕ justify-content-evenly

• 정의
  : 1개의 row(행) 내부의 각 col(열)들을 좌우 공간 = 각 열 사이 간격으로 수평 정렬

• 코드

• 결과

row의 col들이 좌우의 공간 = 열 사이 간격으로 수평 정렬 되었다!

3. 느낀점

오늘은 정말 사이트를 만들 때 가장 기본적으로 필요한 디자인적 요소인 Border에 관련된 클래스들과 정렬에 관한 클래스들에 대해 알아보았다. Border는 일반 CSS랑 크게 다르지 않았다!

그래서 정렬도 크게 다르지 않을 줄 알았는데 내가 기존에 써 왔던 CSS보다 더 디테일하다고 생각됐다. 특히 justify-content-around, justify-content-evenly가 신기했다.

처음 봤을 때는 'justify-content-between과 justify-content-around, justify-content-evenly가 무슨 차이지?' 라고 생각했다. 그래서 직접 실습해보니 조금씩 다른 매커니즘으로 간격이 설정되어 가로 정렬 되는 걸 알 수 있었다.

알면 알 수록 Bootstrap이 왜 개발자들에게 그토록 인기가 많았는지 알 것 같다! 아직도 공부해야 할 클래스들이 많으니 차근차근 알아가봐야지 👍