오늘은
Bootstrap에서 각 요소들에 간격을 주는 여러 방법에 대해 알아보자 :)
1. Margin (마진)
① 기본 문법
m{sides}-{size} // 기본 문법
mx-3 // 예기본 문법은 위와 같다! 그럼
sides와size가 어떤 건지 알아보자!
② 방향 (=sides)
margin을 주고 싶은 특별한 방향이 있을 때만 적어주면 된다!
sides의 종류는 아래와 같다
-
t : 요소의 위에만 margin 적용(
margin-top) -
b : 요소의 아래에만 margin 적용(
margin-bottom) -
s : 요소의 왼쪽에만 margin 적용(
margin-left)
cf )s는start를 의미 ⇒ 따라서 글을 오른쪽에서부터 적는 국가에선margin-right가 적용됨 -
e : 요소의 오른쪽에만 margin 적용(
margin-right)
cf )e는end를 의미 ⇒ 따라서 글을 오른쪽에서부터 적는 국가에선margin-left가 적용됨 -
x : 요소의 좌우에만 margin 적용(
margin-left,margin-right) -
y : 요소의 상하에만 margin 적용(
margin-top,margin-bottom)
③ 간격 (=size)
margin을 주고 싶은 간격을 의미한다
-
0 : margin을 제거
-
1 : 0.25 rem
-
2 : 0.5 rem
-
3 : 1 rem
-
4 : 1.5 rem
-
5 : 3 rem
-
auto : 자동
④ 예
- 코드
- 결과
auto를 이용해보고 싶어서 다시 코드를 짜 보았다
- 코드
- 결과
당연한 말이지만, 위 결과에서 알 수 있듯이
my-auto를 사용하려면 부모요소의height를 정의해 주어야 제대로 된 margin이 적용된다!
🤔 실습하다 보니 의문이 들었다.
'margin을 없애는0은 굳이 쓰지 않고 애초에 margin을 적용 안 하면 되는 거 아닌가?'
하지만 다 쓰임새가 있었다. 아래 코드를 보자!
- 코드
- 결과
위 결과처럼
margin-top만 빼고 나머지 방향에만 margin을 주고 싶을 때mt-0을 사용하면 훨씬 간단하게 코딩 할 수 있을 것 같다 :)
2. Padding (패딩)
① 기본 문법
p{sides}-{size} // 기본 문법
pt-2 // 예기본 문법은 위와 같다! 그럼
sides와size가 어떤 건지 알아보자!
② 방향 (=sides)
padding을 주고 싶은 특별한 방향이 있을 때만 적어주면 된다!
sides의 종류는 아래와 같다
-
t : 요소의 위에만 padding 적용(
padding-top) -
b : 요소의 아래에만 padding 적용(
padding-bottom) -
s : 요소의 왼쪽에만 padding 적용(
padding-left)
cf )s는start를 의미 ⇒ 따라서 글을 오른쪽에서부터 적는 국가에선margin-right가 적용됨 -
e : 요소의 오른쪽에만 padding 적용(
padding-right)
cf )e는end를 의미 ⇒ 따라서 글을 오른쪽에서부터 적는 국가에선margin-left가 적용됨 -
x : 요소의 좌우에만 padding 적용(
padding-left,padding-right) -
y : 요소의 상하에만 padding 적용(
padding-top,padding-bottom)
③ 간격 (=size)
padding을 주고 싶은 간격을 의미한다
-
0 : padding을 제거
-
1 : 0.25 rem
-
2 : 0.5 rem
-
3 : 1 rem
-
4 : 1.5 rem
-
5 : 3 rem
-
auto : 자동
④ 예
- 코드
- 결과
위 결과처럼 padding(회색)이 각 클래스에 맞게 잘 적용되는 걸 볼 수 있다!
3. Gap (갭)
① ❗️주의
gap이라는 속성은 display : grid일 때만 사용할 수 있으므로 gap을 적용하기 위해서는 해당 요소에 grid를 적용해주는 d-grid 클래스를 같이 사용해야만 한다!!
② 기본 문법
gap-{size} // 기본 문법
gap-1 // 예그럼
gap에 사용되는size에 대해 알아보자
③ 간격 (=size)
gap을 주고 싶은 간격을 의미한다
❗️gap-auto는 사실상gap-0과 같아auto는 없다!
-
0 : gap을 제거
-
1 : 0.25 rem
-
2 : 0.5 rem
-
3 : 1 rem
-
4 : 1.5 rem
-
5 : 3 rem
④ 예
d-grid를 적용하지 않고gap만 사용하면 어떻게 되는지 비교하기 위해 아래와 같이 코드를 짰다
- 코드
- 결과
역시 예상처럼
d-grid를 적용하지 않은 요소에서는gap이 적용되지 않았다!
반면d-grid를 적용한 요소에서는gap이 제대로 적용되는 걸 볼 수 있다
4. 느낀점
요소별 간격을 주는 여러 방법에 대해 알아보았는데 전체적인 구조가 CSS를 사용할 때와 크게 다르지 않아 이번 시간에는 많이 어려운 점은 없었다.
다만 Gutter에 대해서도 알아보고 이 포스팅에 함께 적으려 했으나 Gutter가 생각보다 이해가 잘 되지 않았다. 완벽히 이해가 되지 않아 이번 포스팅에는 적지 못했으나 다음 포스팅에서는 Gutter에 대해 다시 알아보고 이해하여 적어봐야겠다.
