[WEB] 부트스트랩-bootstrap

 

 

시작하기

 

 

 

 

 

• input-group : 입력 요소를 같은 라인에 보기 좋게 연결되도록 묶어준다.
• form-control : 입력 요소에 기본적인 디자인을 적용한다.
• btn btn-primary : 파란색 버튼

 

 

 

 

---

 

 

 

 

 

• container : 화면 전체를 차지하지 않는 고정 크기 컨테이너로 브라우저 크기 변동에 반응해서 변한다.
• form-control : 기본 노란색(warning) 컬러로 배경색을 지정한다.
• shadow : 박스 테두리에 그림자 효과를 추가한다.
• mt-5 : 박스가 브라우저 상단에 붙어 있지 않도록 최대 상단 마진(margin-to)을 설정(0~5)한다.
• p-5 : 박스 안쪽에 텍스트가 테두리에 붙어 있지 않도록 안쪽 패딩을 설정한다.
• w-75 : 박스 크기를 브라우저 크기의 75%로 유지한다.

 

 

 

 

---

 

 

 

 

• d-flex  : Flexbox 레이아웃을 사용하여 요소를 가로로 배열
• item :  리스트 그룹의 각 아이템을 꾸며주는 역할
• item-action : 아이템에 포커싱(마우스 갖다대기)하면 꾸며주는 역할
• warning : 경고 타입의 스타일(노란색) 적용

 

 

---

 

 

• btn-close : 닫는 모양의 버튼
• ms-auto : 항목을 왼쪽으로 밀기 (내 요소만 오른쪽 보내기)