퍼블리싱/bootstrap(4)
-
Bootstrap: text, color
기본적으로 css에서 사용되는 명령어를 그대로 따른다. text text alignment .text-{breakpoint}-{start/center/end} text transform .text-{lowercase/uppercase/capitalize} font size .fs-* 1~6, h*태그의 사이즈와 같음 font weight .fw-{bold/bolder/normal/light/lighter} font style .fst-{italic/normal} line height .lh-* .lh-{sm/lg/base} reset color .text-reset 해당 요소의 색 대신 부모 요소의 색상을 상속 text decoration .text-decoration-{underline/none/lin..
2021.01.21 -
Bootstrap : columns ( alignment, order, offset, margin )
column은 그리드의 플렉스박스에 해당하기 때문에, 플렉스박스의 속성들을 적용시킬 수 있다. Alignment vertical .align-items-{start/center/end} 부모선택자 row와 함께 사용해서 전체 줄을 세로 정렬 .align-items-self-{start/center/end} col과 함께 사용해서 한 줄에 하나씩 정렬, 1 row의 높이가 늘어남. horizontal .justify-content-{start/center/end/around/between/evenly} flex의 가로 정렬 기능과 같은 작용. column breaks column을 아래위로 나누는 방법 3가지 실습 [ 992px 이상 : 한줄에 2칸 , 992px 이하 : 한줄에 4칸 ] 결과 확인 하기 ..
2021.01.21 -
Bootstrap: layout ( breakpoints, containers, grid )
기본적으로 부트스트랩은 자바스크립트, css를 이용한 프레임워크로 이미 지정되어있는 함수들을 불러서 사용한다. breakpoints Breakpoint Class infix Dimensions X-Small None div.row>div.col 을 기본으로 테이블형식으로 레이아웃을 작성 xs
2021.01.21 -
Bootstrap: 기본, 설치방법
부트스트랩 모바일 환경에 적합한 반응형 웹 만드는 데에 혁신적, GitHub 오픈소스 제품 사용법 1. 다운로드 2. CDN (contents Delivery Network) 3. Bower 패키지 이용 부트스트랩 공식 홈페이지 http://getbootstrap.com/ Bootstrap The most popular HTML, CSS, and JS library in the world. getbootstrap.com 부트스트랩 한국어 버전 http://bootstrapk.com/ 부트스트랩 · 세상에서 가장 인기있는 모바일 우선이며, 반응형인 프론트엔드 프레임워크. 프리프로세서 부트스트랩은 평범한 CSS 로 제공합니다만, 그것의 소스코드는 2개의 인기있는 CSS 프리프로세서인 Less 와 Sass 를..
2021.01.20