bootstrap

 

Sass css

css전처리도구

자신만의 구문을 가지고 css를 생성하는 프로그램

​

bootstrap

• 트위터에서 시작된 오픈 소스 프론트 엔드 프레임 워크
• 장점 - 웹 페이지에서 많이 쓰이는 대부분의 요소를 내장하고 있기 때문에 bootstrap 관련 사항 설치 후 미리 지정되어 있는 css클래스, javascript함수를 불러와서 바로 사용가능
• html과 css에 대한 기본지식만 있으면, 사용하기 쉽다.
• 반응형 디자인을 지원한다
• 단점은 html5에 맞춰져 있어, 구형 브라우저 지원이 미흡하다.

​

부트스트랩 사용방법

1.부트스트랩 파일 다운로드 후, 압축 해제(팀프로젝트 진행시, 사용)

2.cnd(content delivery network)

• 어딘가에 올려져 있는 css파일을 우리는 링크를 통해 단순히 접속해서 사용한다.
• 필요한 내용을 자유롭게 가져다 사용한다.

​

component

• 부품, 요소
• 이미 작성된 디자인 요소(버튼, 아이콘, 모달, 폼, 테이블 등) 다양하다.

​

동작에 관련된 component(예 : 모달)

• 어떤 동작에 작동하는 이벤트 메서드 지원한다.
• 예 : show, shown, hide, hidden 등

​

component class 이해하기

• 대표클래스와 옵션 클래스가 조합되여 component class완성
• <button type="button" class="btn btn-primary">Primary</button>
• class="btn -> 대표 클래스
• btn-primary -> 옵션 클래스(옵션 클래스는 바뀔 수 있다)

​

class = "container"

• 요소를 하나로 묶을 때, container로 묶는다.
• container를 사용하면, 요소를 화면 가운데로 모아준다.

​

class = "row"

• 보통 class = "container"와 같이 사용한다.
• 작업 진행시 요소를 한 줄에 배치하고 싶은 경우가 많다. 이 때, row를 사용한다.
• 여러 개의 row가 존재할 수 있다.

​

class = "container-fluid"

• 요소가 화면 가운데로 모이지 않는다.

​

Breadcrumb(사이트 이동 경로) - 웹 표준

• 사이트나 웹 또는 앱에서 사용자의 현재 위치를 보여주는 시스템
• 웹 사이트 계층 구조 내에서 사용자의 탐색 위치를 보여준다.
• 각각의 경로를 포함하고 있기 때문에, 쉽게 상위 수준의 콘텐츠 이도이 가능하다.
• 개발자는 각 겨오를 링크로 제공해야한다. * 일관된 위체에 배치해야한다.
• 적절한 기호와 이미지를 사용해서 경로 관계를 표시해야한다.(예 : > / - 등)
• img의 alt 속성 : 시각 장애를 가지신 분들이 스크린 리더를 통해 이미지를 읽을 때, alt 속성에 작성한 내용이 읽어진다.(웹 표준, 필수속성)

​

Form 관련 class

1. form-controls : 부모 태그의 넓이 100%만큼 크기 변환 블록 요소로 변환한다.
2. form-group : 입력 폼을 그룹화한다. 그룹을 기준으로 여백을 생성한다.
3. 기타
4. form - horizontal : 라벨과 입력 폼을 수평으로 유지한다.
5. form - inline : 블록 요소들을 인라인 요소로 변경한다.

​

aria-current="true"

• aria(Accessible Rich internet Application) : 장애를 가지신사용자들을 위한 웹 접근성에 관련된 방법을 정의하는 특성
• 웹 접근성과 관련있고, 실제 동작하는 기능과 관련이 없다.

​

부트스트랩 Gried system

• 뷰 포트를 기준으로 12칸으로 나누어 만든 시스템
• 홈 페이지 전체가 12개의 컬럼으로 구성되어 있다고 가정한다.(기본개념)
• 디바이스의 크기를 4개의 값(분류)으로 나누어 지정 가능하다.
• 레이아웃을 잡을 때, 꼭 필요하다.
• 키워드 : col로 시작
• 값(분류)
• xs : 모바일(768px 이하)
• sm : 일반 테블릿 크기(768 ~ 992px)
• md : pc용(992 ~ 1200px
• ig : pc용(1200px 이상)
• sm, md, lg를 가장 많이 사용한다.
• 사용방법
• 키워드 : col(column)을 붙여서 사용
• col - 기본값(sm, md, lg) - 숫자
• 예시 : div 4개 --> class="col-lg-3 col-sm-6";
• -->lg 사이즈일 경우, 한 줄에 3 sm 사이즈일 경우 한 줄에 6

​

Gried offset

• 여백주기

 

https://getbootstrap.com/