본문 바로가기

WEB/Bootstrap5

[Bootstrap] Utilities 살펴보기 Utilities API 유틸리티 API는 유틸리티 클래스를 생성하기 위한 Sass 기반 도구입니다. Background background-color를 통해 의미를 전달하고 그라디언트로 꾸밈을 추가합니다. Borders 테두리 유틸리티를 사용하여 요소의 테두리 및 테두리 반경 스타일을 빠르게 지정합니다. 이미지, 버튼 또는 기타 요소에 적합합니다. Colors 색상 유틸리티 클래스를 사용하여 color (색상)을 통해 의미를 전달합니다. 호버 상태의 링크 스타일링에 대한 지원도 포함합니다. Display 디스플레이 유틸리티를 사용하여 구성 요소의 표시 여부 등을 빠르고 신속하게 전환할 수 있습니다. 인쇄 시 표시를 제어하기 위한 일부 추가 기능뿐만 아니라 더 일반적인 값에 대한 지원도 포함됩니다. 코드.. 2022. 6. 23.
[Bootstrap] Helpers 살펴보기 Helpers Clearfix CSS에서 float를 사용을 할 때 clearfix 유틸리티를 추가하여 컨테이너 내에서 floating 된 콘텐츠를 빠르고 쉽게 정합니다. Clearfix란? 버그라고 알려져 있고, CSS를 사용할 때 수없이 사용되는 필수 학습해야 하는 코드입니다. HTML 문서에서 부모 요소가 자식 요소를 감싸고 있을 때, 자식 요소에게 float 형식을 적용하면 부모 요소가 자식 요소를 더 이상 감싸지 않게 되고 높이 값을 파악하지 못하게 되는 버그가 발생합니다. 따라서 부모 요소의 높이 값이 0px로 출력되고, 전체적인 HTML 요소들이 뒤엉켜버리는 경우가 많습니다. 이때 부모 요소가 다시 자식 요소를 감쌀 수 있게 float을 초기화(clear) 하여 버그를 고쳐주는(fix) 코드.. 2022. 6. 21.
[Bootstrap] Content, Forms, Components 살펴보기 Content Typography, Images, Table 등을 다룰 수 있는 클래스들이 있습니다. Typography 글자크기, 정렬 등에 대한 클래스를 모아놓은 영역입니다. Images 이미지 크기 제어, 정렬 등에 대한 클래스를 다룹니다. Tables 표의 색상, 디자인, hover, border, 표 내부에서의 정렬 등의 클래스를 다룹니다. Figures 이미지에 대한 부가 설명을 넣는 클래스를 제공합니다. Forms 사용자로부터 입력받는 다양한 form요소를 컨트롤 하는 클래스를 다룹니다 Form control label 태그에서는 class 값을 form-label을 주어야 하고 input 태그에서는 form-control을 주어야 합니다. Email address Components Com.. 2022. 6. 18.
[Bootstrap] Layout 살펴보기 Layout Layout 파트는 반응형 웹 처리를 위한 레이아웃 클래스가 있다고 생각할수 있다. 부트스트랩의 핵심입니다. 반응형 웹 즉, 사용자의 다양한 디바이스 크기에 따라서 레이아웃을 변경시키는 것을 다룹니다. 주요 목차만 살펴보겠습니다. Breakpoints 6개의 포인트를 제공하고 너비에따라 클래스가 적용이되게 컨트롤 한다. 미디어 쿼리를 6개 만들었다고 생각하면 된다. Containers 부트스트랩의 가장 기본적인 레이아웃 요소입니다. container 적용시 화면이 가운데로 배치가 됩니다. 화면을 줄이면 너비가 줄어들면서 비율을 유지하다가 일정수준 이상 줄이면 너비를 max로 유지합니다. 아래 그림을 보면 기본 클래스를 container를 줬다고 가정을 하면 화면의 너비가 꽉찬 아래그림은 너비가 2022. 6. 15.
​

티스토리툴바