오늘은
Bootstrap의 실제 디자인에 없어서는 안 될Text-Color,Button,Image,Table에 관련된 클래스들에 대해 알아보는 시간을 가지자 :)
1. Text-Color(글자색)
❓ 배경색을 지정하는 클래스명은?
bg-{color}였다!
❗️ 이와 같은 패턴으로 폰트색도 지정해 줄 수 있다
① 문법
text-{color} // 기본 문법
text-primary // 예② 예
- 코드
- 결과
아주 손쉽게 글자색을 지정해 줄 수 있다 :)
물론! 폰트 컬러에 대한 클래스명을 지정해주지 않으면 기본 폰트 컬러는 검정이다 😀
2. Button(버튼)
Bootstrap의 첫번째 포스팅에서 아주 짧게 잠깐 다뤘던Button에 대해 검색해 보니 그룹도 지을 수 있고 크기도 지정해 줄 수 있는 클래스명이 있었다.
이에 대해 자세히 알아보자 :)
① 기본 버튼
이 요소는 버튼이다! 라고 지정해주는 클래스명은 아주 쉽다!
ⓐ 문법
btn // 기본 문법ⓑ 예
- 코드
- 결과
위 코드처럼
btn이라는 클래스명을 지정해주면 된다! (border는 잘 보일 수 있게 내가 임의로 지정해 주었다)
ⓒ ❗️주의할 점
-
원래
btn클래스는button태그에 사용되어야 함 -
예외로
a,input태그에 사용 가능
② 버튼 종류
❓ 그럼 이런 생각이 든다. 버튼에 색을 좀 주고 싶은데?
❗️ 당연히 손쉽게 배경색을 줄 수 있다 :)
ⓐ 배경색 있는 버튼
㉠ 문법
btn-{color} // 기본 문법
btn-primary // 예㉡ 예
- 코드
- 결과
btn-{color}만 추가해주면 위와 같이 배경색이 있는 버튼을 만들 수 있다!
ⓑ 테두리만 있는 버튼
'배경색 말고 테두리만 색을 주고 싶은데?' 하는 사람들은
outline이라는 단어만 클래스명에 추가해주면 된다!
㉠ 문법
btn-outline-{color} // 기본 문법
btn-outline-primary // 예㉡ 예
- 코드
- 결과
③ 버튼 그룹
여러 개의 버튼을 한 번에 그룹으로 묶을 수도 있다!
ⓐ 문법
btn-group // 가로 방향의 그룹
btn-group-vertical // 세로 방향의 그룹위와 같은 클래스를 여러 개의 버튼을 감싸고 있는 부모 요소에 적용시키면 각 버튼들이 묶인다
ⓑ 예
- 코드
- 결과
④ 버튼 크기
버튼 크기를 설정하는 클래스에 대해 알아보자
ⓐ 문법
btn-{size} // 기본 문법 (버튼 한 개)
btn-lg // 예 (large)
btn-sm // 예 (small)
-------------------------------------
btn-group-{size} // 기본 문법 (버튼 그룹)
btn-group-lg // 예 (large)
btn-group-sm // 예 (small)ⓑ 예
- 코드
- 결과
❓ 여기서 궁금증이 들었다.
large,small말고 내가width,height를 지정해 줄 수 있을까?
- 코드
- 결과
위 코드와 같이 버튼을 감싼
div태그에style로 높이를 지정해 주고 버튼 태그에w-50,h-75로 하여 실험해 보았다.
위 영상처럼width는 50%로,height는 75%로 잘 적용됨을 알 수 있었다!
3. Image (이미지)
이미지를Bootstrap에서 어떻게 유용하게 써 볼 수 있을까?
① 반응형 이미지
ⓐ 문법
img-fluid // 기본 문법
img-fluid는 이미지 요소의 부모 요소 너비와 높이에 따라max-width: 100%와height: auto가 적용되어 반응형이 된다!
ⓑ 예
- 코드
- 결과
② 썸네일 이미지
썸네일 이미지를 적용하면 이미지 가장 자리에 둥근 테두리가 생기게 된다
ⓐ 문법
img-thumbnail // 기본 문법ⓑ 예
- 코드
- 결과
위 결과와 같이 이미지의 가장자리에 연한 회색의 둥근 테두리가 생긴 것을 볼 수 있다.
❓ 혹시 테두리 색을 바꿀 수 있을까 확인해 보았다!
- 코드
- 결과
테두리가 초록색으로 바뀌었다! 가능하군 👍
4. Table (표)
내 경험상
Table은 특히나 예쁘게 디자인하기 어려운 것 중 하나인 것 같다.
하지만!Bootstrap만 있다면 모던하고 깔끔한 디자인의Table을 만들 수 있다
① 기본 Table
ⓐ 문법
table // 기본 문법ⓑ 예
- 코드
- 결과
위와 같이 클래스명에
table만 추가해줬을 뿐인데 깔끔한 디자인의 표가 완성되었다 😀
🤔 표에 배경색을 넣어주면 좀 더 화사할 것 같은데? 알아보자!
② 배경색
ⓐ 문법
- 아래의 클래스명을 내가 배경색을 주고자 하는 태그에 지정
table-{color} // 기본 문법
table-success // 예ⓑ 예
㉠ Table 전체
- 코드
- 결과
표 전체에 동일한 색을 주고 싶을 땐 위 코드처럼
table태그에서 클래스명을 지정해주면 된다!
㉡ Row
- 코드
- 결과
위 코드와 같이
row에 같은 색을 주고 싶을 때는 해당row요소(여기선thead내부의tr)에 클래스를 지정해주면 된다.
위 코드에서 당연히tr말고 부모 요소인thead에 클래스를 지정해 줘도 같은 결과가 나온다!
㉢ Cell
- 코드
- 결과
Bootstrap사이트에서는 위의 세 가지(전체,row,cell)만 기재되어 있었는데tbody에도 적용이 되겠지?
㉣ tbody
- 코드
- 결과
역시 되는군 👍
③ 테두리
- 코드
④ 스트라이프
ⓐ 문법
- 아래의 클래스명을
table태그에 지정
table-striped // 기본 문법ⓑ 예
- 코드
- 결과
많이 봤던 깔끔한
striped 디자인의 표가 코드 한 줄로 완성되었다!
striped 디자인은 표의 배경색이 있을 때도 그 컬러에 맞춰 적용된다. 아래 예를 보자.
- 코드
- 결과
⑤ Hover
ⓐ 문법
- 아래의 클래스명을
table태그에 지정
table-hover // 기본 문법ⓑ 예
- 코드
- 결과
사용자가 사이트에서 표를 볼 때 행이 헷갈릴 수 있으니 CSS로
hover기능을 넣어주곤 했는데 앞으로는 한 줄의 코드로 간단히 해결 할 수 있겠다 :)
⑥ 셀 축소
각 셀의
padding을 반으로 줄여 표 전체가 얇아지는 효과를 줄 수 있는 클래스는 아래와 같다!
ⓐ 문법
- 아래의 클래스명을
table태그에 지정
table-sm // 기본 문법ⓑ 예
- 코드
- 결과
위쪽
Table(default)과 아래쪽Table(table-sm적용)을 비교하면 확실히 아래Table의 셀들이 축소되어 있는 걸 볼 수 있다!
5. 느낀점
정말 Bootstrap은 대단한 것 같다.
특히 감명 깊었던 건 table-striped였다.
이걸 내가 평소 쓰는 React로 구현하려면 map 할 때 홀수, 짝수 행에 따라 클래스명을 다르게 지정해 준 다음, CSS로 또 홀수, 짝수 행에 배경색을 지정해야 한다.
듣기만 해도 번거롭다..
Bootstrap 좋다 좋아 👍
