7. bootstrap5 image, helpers

bootstrap image

img 태그는 html 태그와 큰 차이가 없다.

하지만 여기에 class 속성값을 여러가지 주면 간편하게 이미지를 변화시킬 수 있다.

스타일	의미
.img-fluid	너비 100%
.img-thumbnail	너비 100% + 라운드 테두리
.rounded	둥근 테두리
.rounded-circle	원 모양 이미지
.mx-auto d-block	좌우 마진을 이용한 가운데 정렬

마지막에서 마진을 설정하기 전 d-block을 준 이유는 img 태그는 인라인 레벨이기 때문이다.

인라인 레벨 태그 경우 마진, 패딩 같은 값이 적용이 안돼 block 레벨로 변경하였다.

helpers

clearfix, color, background, colord link, position, ratio, stack, stretched link, text truncation, hidden

정도가 있다. 알아두면 편하니 공부하는 게 좋다.

clearfix

css float, clear를 편하게 사용하도록 만들어 놓은 스타일이다.

float을 하면 설정이 형제에게 전달되기 때문에 clear를 해주어야 한다.

간단하게 왼쪽, 오른쪽으로 정렬할 수 있어 잘 쓰인다.

스타일	의미
.clearfix	float container
.float-start	왼쪽 정렬
.float-end	오른쪽 정렬

colord links

text-primary와 다르게 가상 클래스 :hover, :focus 까지 설정되어 있다.

스타일	스타일
.link-primary	.link-warning
.link-secondary	.link-info
.link-success	.link-light
.link-danger	.link-dark

position

스타일	의미
.fixed-top	브라우저 상단에 고정
.fixed-bottom	브라우저 하단에 고정

ratio

비율을 맞춰준다. 1x1, 4x3, 16x9, 21x9

스타일	의미
.ratio ratio-1x1	1x1 비율
.ratio ratio-4x3	4x3 비율
.ratio ratio-16x9	16x9 비율
.ratio ratio-21x9	21x9 비율

stacks

stack은 bootstrap에서 제공하는 flex display 방식 배열법이다.

뜻은 그대로 수직으로 쌓거나, 수평으로 쌓는다.

스타일	적용대상	의미
.vstack	container	수직 쌓기
.hstack	container	수평 쌓기
.gap-	container	아이템 간격
.vr	item	수직선

strectched link

a 태그가 포함된 relative position container도 clickable하게 만들어 준다.

text truncation

내용이 길면 줄바꿈을 하지않고 생략 시켜줍니다.

visually hidden

요소를 가릴 수 있다.

display: none 처럼 존재을 없앤다.

스타일	의미
.visually-hidden	요소를 가림, 접근방법 없음
.visually-hidden-focusable	요소를 가리지만 키보드로 접근 가능

끝으로

이정도면 요소들을 원하는 레이아웃으로 배치하는 것은 충분할 것이다.

이제부터 form과 다양한 component들을 정리할 생각인데

앞으로는 속도조절하여 천천히 작성할 생각이다.