[Bootstrap] 레이아웃 / display(d-none, invisible)
. display(d-none) 웹 페이지에서 Elment 들을 필요에 따라 보이지 않게 해야할 때가 있다. CSS 에서는 display: hidden or display: none 속성을 사용하고, Bootstrap 에서는 d-none 라는 클래스 명을 사용하여 Elment를 보이지 않게 한다. (display: none 만 지원) . CSS CSS 에서는 display: hidden or display: none 으로 Element를 안보이게 한다. . Bootstrap Bootstrap 에서는 d-none 클래스명으로 Element를 안보이게 한다. (자리차지 X) 1 2> d-none 는 breakpoint 에 따라 보이기를 다르게 할 수 있다. breackpoint 를 md 로 설정할 경우, m..
Bootstrap Contents / color
Background Color bg-primary bg-secondary bg-success bg-danger bg-warning bg-info bg-light bg-dark bg-white bg-transparent Text Color text-primary text-secondary text-success text-danger text-warning text-info text-light text-dark text-muted text-white text-black-50 text-white-50
Bootstrap Contents / image & media
- image -> 부트스트랩은 pc 뿐만 아니라 어떤 종류의 디바이스든 간에 자동적으로 이미지의 사이즈를 맞추어 주는 클래스를 만들었다. -> img-fluid 이다. Thumbnail Rounded Image Shadow Custom Circle - Media Object Media heading Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ea quia doloremque molestiae commodi explicabo modi, reprehenderit quibusdam magni odit pariatur, ex recusandae unde est nisi dolores reiciendis, molestias quam vitae moll..
Bootstrap Contents / text
- text-alignment text-left 좌측 정렬 text-center 중앙 정렬 text-right 우측 정렬 text-justify 좌우 배분 정렬 Text Alignments Left aligned text on all viewport sizes. Center aligned text on all viewport sizes. Right aligned text on all viewport sizes. Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam..
Bootstrap Contents / typography
- display Display Headings h1. Display heading 1 h1. Display heading 2 h1. Display heading 3 h1. Display heading 4 -> 같은 h1 태그지만 display의 값에 따라 크기가 달라진다. 이 클래스는 h(1~6) 태그, p 태그 모두 사용할 수 있지만 기본적으로 제공하는 태그들의 크기가 다르기 때문에 모든 태그의 display를 적용시키면 혼동할 수 있다. 때문에, 가급적 h1 태그에서만 사용하도록 권장하고 있다. -lead 클래스 -> 부트스트랩에서 제공하는 p텍스트의 디자인 -> 부트스트랩에서만 있는 p텍스트 클래스 -> display 처럼 일반적인 p태그의 폰트 크기 보다 좀더 큰 글자체를 만듬 -> p태그보다 ..
[Bootstrap] 레이아웃 / spacing
. space 상하 좌우의 여백이나 패딩값을 부트스트랩에서 만든 클래스 Box Model margin 과 padding 은 상하 좌우에 값을 매길 수 있다. 일반적으로 위쪽-오른쪽-아래쪽-왼쪽 순서로 px 이나 % 단위로 표기 (시계방향) . Notation (표기법) {property}{sides}-{size} - {속성}{방향}-{크기} {property}-{breakpoint}{sides}-{size} - {속성}{방향}-{크기} https://getbootstrap.com/docs/4.4/utilities/spacing/ num size 0 0 1 1rem * 0.25 = 4px 2 1rem * 0.5 = 8px 3 (default): 1rem = 16px 4 1rem * 1.5 = 24px 5 ..