Frontend/Bootstrap (9) 썸네일형 리스트형 Bootstrap 오류 - CDN 링크 사용 Bootstrap을 사용하는 두 가지 방법 1. 파일을 전부 다 다운로드 받아 작업 환경 세팅 2. CDN으로 링크 걸어 사용 1번 방식으로 작업하였을 때, 올바른 코드를 작성했음에도 불구하고 일부 기능이 적용되지 않는 경우 다음과 같이 해결 CDN 사용 시, 다운로드하여 따로 환경을 세팅해주지 않아도 된다는 점에서 간편하다고 할 수도 있음. 그러나 CDN에 문제가 생길 시 내가 작업한 사이트에도 영향 미친다는 단점 존재 + 서버의 속도 느려질 수 있음 내비게이션 바 : Navbar 내비게이션 바 : Navbar class=”navbar" navbar-nav / nav-item dropdown / dropdown-menu / dropdown-item 예제 HOME Link1 Link2 Link3 Link4 Link5 Dropdown Dropdown Item1 Dropdown Item2 Dropdown Item3 Search 테이블 테이블 class=”table” table-bordered : 테두리 있음 table-borderless : 테두리 없음 table-striped : td 태그 흰색행/회색행 table-hover : 행에 마우스 올리면 색상 변경 table-dark : 배경색을 검정색으로 설정 table-sm/md... (md = default) 예제 번호 제목 작성자 작성일 조회수 4 HTML /CSS flower 2019-11-17 2 3 일본어 스터디 성춘향 2019-11-15 3 2 Bootstrap 이몽룡 2019-11-12 0 1 JSP 프로그래밍 홍길동 2019-11-07 1 번호 제목 작성자 작성일 조회수 4 HTML /CSS flower 2019-11-17 2 3 일본어 스터디 성춘향 2019-11-15.. 이미지 이미지 rounded : 둥근 모서리 rounded-circle : 둥근 이미지 img-thumbnail : 썸네일 이미지 float-left / float-right : 좌/우 정렬 mx-auto + d-block : 가운데 정렬 img-fluid : 브라우저 크기에 따라 변경 예제 Button Button 버튼으로 사용할 수 있는 요소들에 class=”btn” 적용 기본 : class=”btn” 색상 설정 : class=”btn btn-primary” 크기 설정 : btn-lg, btn-md (디폴트), btn-sm 테두리 표시 : btn-outline-dark, btn-outline-primary 예제 Link Button Link Button Link Button Link Button Link Button-block Button-block 그리드 (Grid) 그리드 (Grid) 격자 모양으로 영역 분할 가능 1행을 12 등분해서 비율로 배치 행 : class=”row” 열 : class-”col-숫자” 숫자 : 12 칸 중 차지하는 칸 수 필요에 따라 열을 묶어 더 큰 크기의 열로 사용 가능 col-scale-숫자 col-scale-숫자 : 12 칸 중 차지하는 칸 수 col-sm-숫자: 576px 이하이면 세로로 배치 col-md-숫자: 768px 이하이면 세로로 배치 col-lg-숫자: 992px 이하이면 세로로 배치 col-xl-숫자: 1200px 이하이면 세로로 배치 예제 - 1 a b c a b c d a b c d 예제 - 2 a b a b a b a b a b a b a b Jumbotron Jumbotron 일종의 대형 전광판 특정 콘텐츠나 관심있는 정보를 눈에 띄게 보여주기 위한 큰 박스 예제 - 1 Jumbotron 둥근 모서리 사각형 영역 Jumbotron 컨테이너 밖에 있는 jumbotron : 살짝 둥근 모서리 Jumbotron jumbotron-fluid 클래스 : 각진 모서리 예제 - 2 지능형 웹서비스 풀스택 과정 Java / MySQL / HTML / CSS / Javasctipr / jQuery / Bootstrap Servlet / JSP / Spring Framework / AI API 커리큘럼 보기 Jumbotron 컨테이너 밖에 있는 jumbotron : 살짝 둥근 모서리 Jumbotron jumbotron-fluid 클래스 : 각진 모서리 container; 컨테이너 container 레이아웃을 만드는 최상위 요소로, 다른 요소들을 포함함 .container : 반응형 고정 폭 컨테이너 .container-fluid : 뷰포트 전체 폭까지 늘어나는 최대폭 컨테이너 (가로 해상도에 상관없이 100%의 width를 가짐) container 예제 Bootstrap Container Bootstrap Container Bootstrap 개념 및 사용법 Bootstrap jQuery 기반의 HTM5 Web Framework 웹 프론트엔드 개발에 대한 구조를 미리 만들어둔 프레임워크 트위터에서 사용하던 각종 레이아웃, 버튼, 입력 요소 등의 UI 요소들을 누구나 사용할 수 있도록 만들어진 오픈소스 프레임워크 미리 지정된 스타일들에 대한 코드(css)와 동작에 관한 자바스크립트(js) 라이브러리 HTML/CSS 기반의 템플릿 양식, 버튼, 내비게이션 등 다양한 UI 요소 포함 자바스크립트를 선택적으로 확장 가능 컴포넌트 기능 제공 HTML/CSS 기본 지식만 있으면 누구나 사용 가능 모든 최신 브라우저와 호환 커스터마이징된 부트스트랩 템플릿 받아 사용도 가능 라이브러리들을 다운받아 프로젝트에 삽입해 사용 가능 HTML 파일에서 부트스트랩 css및 js를 사.. 이전 1 다음
