부트스크랩

반응형 웹 디자인을 위한 CSS단위

종류:%,em,rem,vw,vh

 

em:폰트 사이즈를 나타내는 단위

-같은 font size라고 해도 사용하고 있는 font family에 따라서 사용자에게 보여지는 텍스트의 크기가 달라질 수 있다

그래서 em은 font family에 상관없이 고정된 폰트 사이즈를 가지고 있다.

브라우저 기본 폰트 사이즈 = 16px

16px = 1em

16px = 100%

8em =  16x8

vw,vh(view port)

vw: 뷰 포트의 가로

100vw = 뷰 포트의 가로 100% 사용하겠다

100vh = 뷰 포트의 높이 100% 사용하겠다

 

vmin, vmax

50vmin = 브라우저의(뷰포트) 너비와 높이 중, 작은 값에서 50% 사용

50vmax = 브라우저의(뷰포트) 너비와 높이 중, 큰 값에서 50% 사용

 

4버전과 5버전의 차이

-4버전은 JQuery위주, 5버전은 JS위주(jQuery 없음)

 

-HTML,CSS,JS로 만들어진 form,btn,table 등 제공

-웹 페이지에서 많이 사용하는 대부분의 요소를 내장하고 있기 때문에 관련 사항 설치 후, 미리 지정되어 있는

css class, js 함수를 불러와서 바로 사용 가능하다.

 

장점

- HTML,CSS 에 대한 기본 지식만 있으면 바로 사용가능하다

-각 디바이스에 적합한 반응형 디자인을 지원하다

대부분의 브라우저를 지원한다.

 

장점

-HTML5 맞춰져 있기 때문에 구형 브라우저는 안될수 있음

 

 

Bootstrap의 2가지 사용방법

1.파일을 다운로드 후, 사용하는 방법

2.코드를 복사해서 붙여넣은 후, 사용하는 방법(<-부트스트랩 서버 연결이 끊기면, 사용할 수 없다.)

2번째 방식을 CDN(Content Delivery Network)

-어디간 올려져있는 css파일에 우리는 링크를 통해 단순히 접속해서 사용하는 것이고,

필요한 내용을 자유롭게 가져다 사용할 수 있다.

 

Bootstrap Component 사용해보기

Component = 부품, 요소

-이미 작성된 디자인 요소로, 버튼, 아이콘, 모달, 폼, 테이블 등 다양한 종류

Event Method

-동작에 관련된 콤포넌트에는(예시:모달) 어떤 동작에 작동하는 이벤트 메서드를 지원한다.

- show, shown, hide 등

 

Component Class 이해하기

예) class="btn btn-danger"

대표 class와 옵션 class가 조합되어 component class 완성

대표 클래스: btn

옵션 클래스: btn-danger

 

class="container"

-요소를 묶을 때, class="container"로 묶습니다.

-요소를 화면 가운데로 모아주는 역할을 합니다.

 

class="container-fluid"

class="container"사용 시, 화면 좌 우에 여백이 생긴다.

여백을 없애고 싶을떄, class="container-fluid"를 사용한다.

 

class = "row"

요소를 한 줄ㅇ로 작성하고 싶을떄 사용한다.

예를 들어서, div 100% 차지(블록 요소)

class="row"를 사용하는데, class = "container"안에 사용한다

class="container"안에는 여러 개의 class row가 있을 수 있다.

 

Icon

*이유있는 아이콘 사용하기.

-우리가 만든 웹 사이트를 누구나 쉽게 사용 가능해야한다.

-아이콘이 글을 대신하는 보조 역할을 해줄 수 있다.

 

*보편적인 아이콘

-전 세계 사람들이 모두 같은 의미로 해석하는 아이콘을 말한다.

예:HOME>집모양 아이콘, 장바구니>바구니,  닫기>X

-모든 국가에서 대부분 같은 의미로 해석하는 아이콘을 사용해야함. 약속과 같다. 사용자에게 익숙한 형태의 아이콘을 제공하는 것이 좋다.

 

BreadCrumb(사이트의 이동 경로)

-사이트에서 사용자의 현재 위치를 보여주는 것.

-경로를 포함하고 있기 때문에, 쉽게 상위 수준의 콘텐츠로 이동 가능

-각각의 경로를 링크로 제공해야한다.

**일관된 위치를 배치한다.

-적절한 기호(/,>)를 사용하여 경로 간 관계를 표시한다.

 

 

Form

1)관련 클래스

-form-control : 요소를 블록 요소로 변경한다.

-form-inline : 블록 요소들을 인라인 요소로 변경한다.

-form-group : 입력 폼을 그룹화한다. 그룹을 기준으로 여백을 생성.

-form-horizontal: 라벨과 입력 폼을 수평으로 유지한다.

 

컨테이너의 기본 개념, 네가지 기본 값

4교시 bootstrap grid system

 

container

-Boostrap에서 기본적인 레이아웃 요소. Grid를 사용할 때 필요.

-container는 콘텐츠를 감싸는 용도(wrapping)

 

종류

-container class : 반응형으로, 기기 또는 뷰 포트 사이즈에 따라 유동적으로 변한다.

-container-fluid class: 항상 최대 폭(w 100%)을 지원한다.

 

기본 개념

-뷰 포트를 기준

으로 화면을 12칸으로 나누도록 만드는 시스템

-페이지 전체를 12개의 칸(컬럼)으로 구성되어 있다고 가정한다.

-디바이스 크기를 4개의 분류(값)로 나누어 지정할 수 있다.

-레이아웃을 잡을 때 꼭 필요하다.

 

4가지 기본 값 - sm,md,lg를 가장 많이 사용함

xs : 모바일 크기

sm: 일반적인 테블릿 크기

md: PC

lg: PC(1200px 이상)

 

 예시

만약에, item이 4개라면,

<div class="item">

class ="col-md-6 col-lg-3" -->lg 사이즈일때, 한 줄에 3칸, md사이즈일때, 한 줄에 2개 컬럼 배치(2*6=12)

요소가 2개일때 

class="col-sm-8"

class="col-sm-4"

 

 

 

 

 

=========================

Bootstrap4

사용자용 화면 템플릿:

-내 프로젝트의 성격과 맞는 템플릿 선정

 

관리자용 템플릿:

-사용할 수 있는 컴포넌트가 다양한 템플릿 선정

 

검색: 부트스트랩4 무료 템플릿

 

무료 템플릿

-압축 해제하면, 라이센스 MIT, Apache인것.

 

내가 다운로드 받은 템플릿의 원본을 항상 확인하고, 필요한 컴포넌트를 가져다 사용한다.

 

**이미 디자인되어 있는 프레임 워크

->내가 CSS마음에 안들어-고치지마세요.

 

4월28일 금요일

-템블릿선정(오전)

-훈련성과평가 설명(오후)

-기능 분배(오후)