부트스트랩 기본 1.

이정우·2021년 11월 17일
0

CSS

목록 보기
3/4

자세한 사용 방법은 부트스트랩 공식 홈페이지 참조.

부트스트랩, 반응형 웹 사이트

부트스트랩은 반응형 웹 사이트를 만들 때 유용하게 사용할 수 있는 라이브러리이다. 반응형 웹 사이트란 예를 들어 컴퓨터에서는 잘 돌아가던 웹 페이지가 핸드폰에서는 중구난방으로 웹 페이지가 꼬이는 경우가 있는데 이런걸 미리 정해놓은 규격에 맞춰서 화면에 보여주는 방식이다. 부트스트랩은 한 행을 12분할을 기준으로 나눈다.

<div class = "row">
<div class = "col-md-4>1</div>
<div class = "col-md-4>2</div>
<div class = "col-md-4>3</div>
</div>

row는 한 행을 의미하며 그 안의 div들로 행을 여러 등분 할 수 있다. md는 행을 나누는 크기의 범위이며 sm등이 존재. 그 뒤의 4는 12행중 4칸을 쓰겠다는 소리. 6 6 6 하면 첫 행을 6씩 나누고 다음 행으로 간다. 여러 경우를 상정할 때는 col-lg-4 col-md-4 col-sm-3 이런 식으로 쭉 써주면 사용 가능하다.

badge

이메일같은게 왔을 때 new 표시나 몇 통이 왔는지 보여주는 화면

홈페이지의 디렉토리를 보여준다. 예를 들어 "홈 화면 > 테마 > bootstrap 이런 식으로 보여주고 href를 통해 클릭 시 이동도 가능하게 사용할 수 있다.

button

일반적인 버튼

button group

목차를 클릭하는 버튼 처럼 버튼이 그룹지어진 경우

card

보통 쇼핑몰에서 제품을 소개할 때 사용하는 css

배너 부분의 슬라이드.

collapse

버튼을 클릭하면 해당 컨텐츠가 보였다가 안 보였다가 함. 예를 들어 이정우이러한 버튼이 존재한다고 한다면 이 버튼을 누르면 밑에 자세한 설명을 쓴다거나 하는 기능이다.

클릭하면 여러 매뉴가 나오는 드랍다운바.
split button을 사용 시 화살표 부분을 눌러야지 메뉴가 뜨게 만들기도 가능.

form

웹사이트에서 정보를 입력하는 공간, 라디오 박스 등.

input group

2개 이상의 목록을 하나로 묶는거. 예를 들어 이메일 입력 시 앞에 input창이 존재하고 group으로 바로 뒤에 이메일을 고를 수 있는 드랍 다운 바가 존재하는 경우. 혹은 캘린더를 통해 날짜 입력하기 등(회원가입에 사용 가능)

list group

여러 품목들을 리스트로 묶어둠. 현재 클릭한 페이지를 색깔을 입혀 보여줄 수도 있음.

Media object

그림 + 글. 뉴스 기사를 예로 들면, 대표 이미지가 왼쪽에 존재하고 오른쪽에 간략한 내용들이 존재. 누르면 자세한 페이지로 이동.

버튼을 누르면 화면이 검정색으로 변하면서 alert창 같은 느낌.
backdrop 옵션을 통해서 경고창이 떴을때 경고창이 아닌 부분을 눌렀을 때 경고창이 사라질지 사라지지 않을지 정할 수 있음. 예를 들어서, 글 작성 중 다른 페이지로 넘어갈 때 띄워줄 수 있음.

매뉴 링크.

메뉴 바. 부트스트랩이 좋은 점이 메뉴가 존재하고 검색 기능까지 한 줄에 있다고 생각해 보자. 컴퓨터라면 디스플레이로 전부 보여줄 수 있지만 핸드폰의 경우에는 그렇지 못할 수도 있다. 이럴 때 부트스트랩이 알아서 드랍 다운 메뉴바 형식으로 바꿔서 보여준다. 반응형 웹 사이트의 대표적인 경우.

pagination

1,2,3.. 다음 페이지 이러한 페이지 기능을 만들 때 사용.

popover

클릭하면 해당 기능의 부가적인 기능을 넣을 때 사용 가능. 단순하게 저장 불러오기 버튼이면 상관 없지만 여러 버튼이 존재하게 되면 그렇지 못한 경우도 분명 있다. 이럴 때 부가 설명용으로 사용 가능. 흔히 제목 옆에 ? 버튼을 만들어두고 누르면 설명 나오게 만들 수 있음.
여기에 밑에 적을 tooltip 기능을 이용하면 마우스로 클릭하는게 아닌 마우스를 갖다 대면 설명이 나오게도 할 수 있다.

tooltip

마우스를 가져다 대면 설명이 뜸. 클릭 x.

progress

뭔가 다운로드 하는 진행 상황등을 가시적으로 보여줄 때 사용.

scrollspy

한 페이지 안에서 조그만한 박스 공간을 만들어두고 그 공간에서 스크롤을 할 수 있게 만듬. 웹 페이지 안의 또 다른 웹 페이지 느낌.

spinner

로딩중인 상태를 타원형의 선이 빙글빙글 도는 모양.

toast

뭔가 홈페이지 내에서 메일등을 보냈을 때 갑자기 화면 구석에서 뜨는 창을 볼 수 있는데 이게 toast창. 부트스트랩 기반으로 만든 여러 toast 창이 존재.

utilityes

텍스트 색, 백그라운드 색, 등등 여러 옵션들의 설명 존재.

utilityes_display

화면에서 가리는 기능인 hidden 등이 존재. 여기서 반응형 웹 사이트 기능을 통해 pc에서는 a~z까지 보여주고 스마트폰에서는 a~c까지만 보여줄 수 있음.

utilityes_interactions

편의성 기능인데 text를 더블 클릭할 때 url 같은 경우는 더블 클릭 한 번으로 전부 다 지정되게 할 수 있고 어떨 때는 단어별로 지정하고 어떨 때는 복사를 못 하게 할 수 있게 하는 기능.

utilityes_text

text 정렬 기능, text가 길면 ...으로 짤라주는 기능 등 여러 기능이 존재.

profile
프로그래밍 공부 중!

0개의 댓글