목록공부/CSS (12)
컴퓨터는 잘못이 없다..
[CSS]카드뷰 안에 contents 배치(div 수직,수평 중앙정렬)
[코드] 사진 하트|수정|삭제 왜 먹질 못하니 왜 먹질 못하니 왜 먹질 못하니 왜 먹질 못하니 먹질 못하니 먹질 못하니 먹질 못하니 먹질 못하니 먹질 못하니 먹질 못하니 먹질 못하니 먹질 못하니 먹질 못하니 -운수 좋은날, 현진건 공유하기 [실행결과] [설명]
[CSS]부트스트랩 Grid System 사용예제_수직정렬 테스트
[코드] ▼Step02_gridsystem3.html 수직 정렬 테스트 col1 col2 col3 col1 col2 col3 col1 col2 col3 칼럼 자신이 정렬하기 col1 col2 col3 [실행결과]
[CSS]부트스트랩 문서 확인하기(그리드)
[그리드 관련 문서 홈페이지] getbootstrap.com/docs/4.5/layout/grid/ Grid system Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, five default responsive tiers, Sass variables and mixins, and dozens of predefined classes. getbootstrap.com [Equal-width multi-line] 1) .w-100 클래스를 사용하여 개행을 줄 수 있다. row를 두개 만드는 수고를 덜 수 있다. 2) 조건부 개행이다. d-none과 d..
[CSS]부트스트랩 클래스 살펴보기
[bootstrap.css엔 무엇이 있을까?] -> bootstrap.css파일을 열어보면 각종 클래스들이 정리되어 있음을 알 수 있다. [bootstrap.css 클래스를 사용해야하는 이유?] button에 패딩을 넣는 3가지 방법 1번 2번 3번 -> 부트스트랩의 class를 사용! rem으로 크기를 설정하기 때문에 확대해도 깨지지 않는다는 장점이 있다. [bootstrap.css 약어] .mr-sm-n3, .mx-sm-n3 { margin-right: -1rem !important; } .mb-sm-n3, .my-sm-n3 { margin-bottom: -1rem !important; } ┖위의 bootstrap.css 내 적혀진 클래스명을 보면 저게 뭔 소리야..? 하는 의문이 든다. 따라서 약어..
[CSS]부트스트랩 Grid System 사용예제, gutter란?
[예제코드] Grid System 사용 Grid System 사용 첫번째 칼럼 컨텐츠 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita odit possimus recusandae autem facilis fugit velit quisquam voluptatem, incidunt amet nisi voluptate repudiandae deserunt maiores ullam animi architecto aliquam reiciendis. 확인 두번째 칼럼 컨텐츠 Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis voluptatem vero quidem saepe id? ..
