BootStrap
1.Bootstrap - 개요 & 프로젝트 생성
프론트엔드 개발을 빠르고 쉽게 할 수 있는 프레임워크재사용 가능한 요소의 집합, 구조와 툴 결정, 확장 가능한 기반 코드 등HTML, CSS 기반의 템플릿 양식, 버튼, 네비게이션 및 기타 페이지를 구성하는 요소 포함자바스크립트를 선택적으로 확장 할 수 있음Github
2.Bootstrap - 버튼 & 버튼 그룹
Buttons: 버튼의 다양한 크기 및 상태 등을 지원합니다.Outline Buttons: 모든 버튼의 모든 배경 이미지와 색상을 제거 합니다.일련의 버튼을 한 줄에 그룹화하거나 가로 열에 쌓습니다.버튼의 사이즈를 large, small과 같이.btn-lg, .btn-
3.Bootstrap - 드롭다운 & 리스트
전 시간에 배운 버튼을 활용하여 드롭다운에 디자인을 추가할 수 있으며 split button으로 내용과 화살표를 구분하여 클릭할 수 있는 기능도 제공합니다.1-1.드롭다운 소스 코드 & 화면 출력list-group을 통해서 여러 리스트를 보여주는 기능입니다. 추가적으로
4.Bootstrap - 양식
주로 사용자에게 데이터를 입력받는 양식을 form이라는 태그를 사용하게 되는데 Bootstrap을 통해 손쉽게 사용자에게 보기 좋은 양식을 만들어줄 수 있습니다.1-1.Overview 소스 코드 & 화면 출력
5.Bootstrap - 모달(Modal)
모달 형식을 통해 저번 시간에 배운 Forms와 함께 로그인 창을 만들어봅니다.추가적으로 모달 창이 뜨면 JavaScript 문법을 통해 아이디 부분에 포커스가 될 수 있도록 구현합니다.1-1.Modal 소스코드 & 결과 화면HTMLJavaScript
6.Bootstrap - 튤팁(Tooltips)
툴팁은 웹 상에서 개체에 마우스를 올리게 되면 작은 말풍선으로 사용자에게 설명을 제공하는 기능입니다.주의사항은 툴팁은 성능상의 이유로 사용자가 동의를 해야만 활성화됩니다. 그렇기 때문에 JavaScript로 직접 초기화를 진행해야 합니다.1-1.튤팁 소스 코드 & 화면
7.Bootstrap - NPM 프로젝트 생성
실제로 npm을 통해 프로젝트 환경에서 Bootstrap을 사용하는 방법에 대해 알아보도록 합니다.이러한 환경설정을 통해 Bootstrap에서 필요한 기능만을 가져와서 사용할 수 있습니다.또한 Boostrap에서 제공하는 기본 테마를 취향에 따라 커스터마이징할 수 있습
8.Bootstrap - 테마 색상 커스터마이징
지난 시간에 Bootstrap을 npm을 통해 설치를 완료했습니다. 이러한 환경설정을 통해 Bootstrap에서 필요한 기능만을 가져와서 사용할 수 있습니다.또한 Boostrap에서 제공하는 기본 테마를 취향에 따라 커스터마이징할 수 있습니다.Bootstrap의 but
9.Bootstrap - 성능 최적화(트리 쉐이킹)
Bootstrap의 커스터마이징 내에 있는 Optimize 성능 최적화에 대해 알아봅시다.프로젝트 내의 SCSS, JavaScript 파일에 필요하다고 생각하는 컴포넌트만 @import하여 최적화할 수 있습니다.해당 작업을 진행하며 초기화 등의 여러 작업이 번거롭게 느