Front-End (3) 썸네일형 리스트형 부트스트랩 사용하면서 간간히 정리 mt-* : margin-top (*에는 수치가 들어가면 됨) mb-* : margin-bottom m-* : margin pt : padding-top pb : padding-bottom p : padding 더 자세한 표기법은 아래 참고 https://getbootstrap.kr/docs/5.1/utilities/spacing/ 간격 Bootstrap에는 요소의 모양을 수정하기 위한 광범위한 반응형 gap, padding 및 margin 유틸리티 클래스가 포함되어 있습니다. getbootstrap.kr g-* : 플렉스 박스의 거터 (각 요소별로 거리두기 같음) 정렬 플렉스 박스의 경우 : https://getbootstrap.kr/docs/5.1/utilities/flex/#align-items j.. 2. Container 활용 - 반응형 웹, Grid로 쉽게 정렬하기 1. 반응형 웹 class에 container 속성을 주게 되면, Bootstrap을 이용해서 반응형 웹을 표현할 수 있게 된다. Bootstrap 공식 문서에는 총 3가지의 container를 설명하고 있다. 각 반응형 중단점에 max-width를 설정하는 .container 모든 중단점에 width: 100%를 설정하는 .container-fluid 정의된 중단점까지 width: 100%를 설정하는 .container-{breakpoint} 여기서 중단점(break-point)란, 화면의 크기가 작아지면 내용들이 다시 화면을 채우기 시작하는 시점이라고 생각하면 될 것 같다. 아래 표를 참고해보자. 예를 들어, 태그에 클래스로 container-md 를 준다면, 사용자가 현재 보는 화면의 가로 길이가 .. 1. Bootstrap 시작해보기 부트스트랩은 HTML, CSS, JS 의 프레임 워크이다. 현재 학원에서는 Spring Legacy를 기반으로 하여 Back-End 서버를 구축하고 CRUD 작업에 집중을 하고 있기 때문에 Front-End 쪽 작업을 하면, 아무래도 가시적으로 별로 안 예뻐보이는게 흠이긴 했다. 그리고, 아직까지는 Front-End 영역은 Java처럼 문법을 지키지 않으면 컴파일 자체가 안되는 것도 아니고, 예외가 발생한다면 예외 메시지를 보면서 어느정도 처리가 가능한데, HTML과 CSS는 내가 원하는 결과가 나오지 않는다면 어디서 문제가 발생했는지 찾아보기가 골치아팠다. 물론, 아직까지는 별로 상관은 없긴 한데, 조금 시간을 들여 Bootstrap의 기본적인 사용법 정도를 익혀서 조금 눈으로 보기 편한 웹 사이트를 .. 이전 1 다음
