엘리스 AI 트랙 06주차 - Bootstrap 기초 (1/30) 🔥
✔ 06주차. 웹 프론트엔드 I
<학습 목표>
-
React(리액트)에 대한 가장 기본적인 개념을 학습합니다.
-
React를 사용해 다양한 컴포넌트를 만들고 이를 조합해 하나의 App을 구현합니다.
-
Bootstrap(부트스트랩)의 기본 개념과 여러가지 요소를 활용하여 React 웹 사이트에 적용합니다.
[01 부트스트랩이란?]
1. 부트스트랩(Bootstrap)의 개념
- Bootstrap : 트위터에서 만든 프론트엔드개발을 빠르고 쉽게 할 수 있는 프레임워크
📌 프레임워크(framework) : 재사용 가능한 요소의 집합과 툴, 확장 가능한 기반 코드
- Bootstrap을 사용하는 이유
① 웹 사이트를 개발할 때, 웹 사이트 디자인으로 인해 개발 시간이 길어지는 문제를 해결하기 위해
② 모바일 환경에 적합한 반응형 웹 사이트 개발을 하기 위해
→ 부트스트랩의 가장 큰 장점은 광범위한 브라우저 호환성을 유지하고 무엇보다 일관된 디자인을 하는 것
- Bootstrap 특징
- 자바스크립트를 선택적으로 확장할수 있으며 github 오픈 소스로 사용이 가능하기 때문에 개인적으로 상업적으로 이용이 가능
- HTML과 CSS기본지식을 가진 누구나 쉽게 접근 할 수 있음
- 반응형 CSS를 포함한 단일코드로 모든 디바이스에 적용할 수 있음
- 그리드 시스템이 매우 훌륭해서 디자인을 바로 쓰기 좋음
- 반응형 모바일이 가능한 웹사이트를 빠르게 디자인하고 맞춤 설정할 수 있음
- 재사용 가능한 구성 요소를 사용하고 이해하기 편함
2. Yarn
- yarn : 페이스북에서 개발한 자바스크립트의 새로운 패키지 매니저. npm보다 빠르고 가벼우며 안정적.
📌 패키지 매니저 : 프로그램의 의존성(dependencies) 을 관리하는 도구. 의존성 관리란 개발자가 제품 또는 응용 프로그램이 사용하고 의존하는 프로그램 집합을 지정, 제공, 설치, 업데이트 및 일반적인 관리를 하는 것.
3. Package.json
- package.json : 현재 프로젝트에 대한 정보와 의존성(dependencies)을 관리하는 문서. 패키지와 dependencies 버전에 관한 정보를 프로젝트의 루트 디렉토리에 저장
- Package.json 파일 구조
| 이름 |
역할 |
|
name |
URL이나 Command Line의 일부로 사용될 소문자로 표기된 214자 이내의 프로젝트(패키지) 이름으로, 간결하고 직관적인 이름으로 설정하되 다른 모듈과 동일한 이름을 피할 것. |
|
version |
SemVer(The semantic versioner for npm)로 분석 가능한 형태의 버전을 지정 |
|
description |
프로젝트(패키지)의 설명을 지정 (npm search 사용 시 표시) |
|
keywords |
프로젝트(패키지)의 키워드를 배열로 지정해서 프로젝트를 검색할 때 참조되는 키워드 (npm search 사용 시 표시) |
|
homepage |
프로젝트 홈페이지 주소. urlX |
|
author |
프로젝트 작성자 정보로, 한 사람만 지정. JSON 형식으로 name, email, url 옵션 포함 |
|
contributors |
프로젝트에 참여한 공헌자 정보로, 여러 사람을 배열로 지정 |
|
repository |
프로젝트의 소스 코드를 저장한 저장소의 정보. (프로젝트의 홈페이지 url X) |
|
scripts |
프로젝트에서 자주 실행해야 하는 명령어를 scripts로 작성해두면 npm 명령어로 실행할 수 있음 |
|
private |
true = 중앙 저장소로 저장하지 않음 |
|
dependencies |
프로젝트 의존성 관리를 위한 부분. 현재의 패키지가 의존하고 있는 모듈들에 대한 리스트를 보여주며, 각자의 모듈의 이름과 버전 범위에 대해서 표시. (일반적으로 package.json에서 가장 많은 정보가 입력되는 곳) 개발한 애플리케이션이 특정한 확장 모듈을 사용한다면 여기에 꼭 명시를 해줘야 함 |
|
devDependencies |
패키지의 개발 시 사용될 의존성 모듈을 지정 (배포시 포함X) |
|
engines |
실행 가능한 노드 버전의 범위를 결정 |
4. Bootstrap 파일 구조
5. Bootstrap vs React-Bootstrap
- React-Bootstrap : Jquery 기반의 Bootstrap 를 React 환경으로 이식한 프로젝트. bootstrap에 비해 react에 더 최적화되어 빠르게 만들 수 있음
- React-Bootstrap 특징
→ HTML 요소 정렬의 중복을 제거하고 대신 순수한 JavaScript를 사용하여 React가 페이지 렌더링을 완전히 인수하도록 함
→ Boostrap의 기능이 통합 된 React 프레임 워크이지만 표준 Boostrap 라이브러리 (특히 JQuery)에서 사용하는 모든 기본 구성 요소를 사용할 필요가 없음
→ React와 함께 진화하고 성장하여 UI 기반으로 탁월한 CSS Framework
[02 부트스트랩 컴포넌트]
1. Grid 시스템
- Grid : 방문자가 사용하는 화면의 크기를 인식하고 이에 적응하는 웹 레이아웃을 만드는 데 사용되는 매우 일반적인 기술
→ 그리드 시스템을 사용하면 와이드 스크린 모니터가있는 개인용 컴퓨터에서 웹 사이트를 만든 경우에도 웹 사이트가 휴대폰이나 태블릿에 잘못 표시 될 우려가 없음
- 그리드 시스템 구축 규칙
- ow 클래스는 container나 container-fluid 안에 있어야 정상적인 배열이나 패팅을 지원함
- row 클래스는 가로로 그룹 지을 칼럼들의 집합
- 내용은 col 클래스 안에 있어야 하며, row의 직속 자녀 요소로 배치해야 함
- 칼럼은 총 12칼럼이 있는 것으로 정의하여 각 배치할 %에 따라서 클래스 결정
- 12칼럼이 넘어가면 새로운 줄로 칼럼이 배치됨
- bootstrap 4 그리드의 기본 구조
<div class="container-fluid" >
<div class="row">
<div class="col-xs-3">.col-xs-5</div>
<div class="col-xs-3">.col-xs-5</div>
</div>
<div class="row">
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
</div>
<div class="row">
<div class="col-md-3">.col-md-5</div>
<div class="col-md-3">.col-md-5</div>
<div class="col-md-3">.col-md-5</div>
</div>
</div>- 그리드 사용방법
① <section class = "row">처럼 행을 만들고 그 행에 원하는 수 만큼의 열을 <section class = "col-(1)-(2)> 와 같이 추가
→ (1) : 기기의 크기 (sm, md, lg, xl) / (2) : 숫자 기입 (최대 12)
|
ScreenViewport |
SizeClass |
prefix |
|
Extra small |
< 576px |
.col-* |
|
Small |
≥ 576px |
.col-sm-* |
|
Medium |
≥ 768px |
.col-md-* |
|
Large |
≥ 992px |
.col-lg-* |
|
Extra large |
≥ 1200px |
.col-xl-* |
② 각 열에 숫자를 추가하지 말고 Bootstrap 기본값을 사용 (기본값 : class = "col")
→ 2개 사용시 각 열의 넓이는 50% / 3개 사용시 33.33% / 4개 사용시 25%
2. Container에 컴포넌트 추가하기
- Bootstrap에서 사용할 수 있는 컴포넌트 : Alerts, Badge, Button, Card, Dropdown, Forms, Input group, List group, Navbar, Navs 등등..
3. Bootstrap 레이아웃 - Container
- Container : 레이아웃을 만드는 가장 상위 요소
- 레이아웃 시스템 : 모든 컴포넌트와 웹을 구성하는 모든 컨텐츠들을 배치할수 있게 도와주는 것.
- container 클래스는 고정 된 너비로 페이지 콘텐츠를 감싸는 데 사용되며 .container 클래스를 사용하여 콘텐츠를 중앙에 쉽게 배치 할 수 있음
- container 클래스 종류
① .container: 고정된 너비 컨테이너. Media query에 의해 반응형 동작 (767px ↓ 100%, 768px ↑ 750px, 992px ↑ 970px, 1200px ↑ 1170px)
② .container-fluid: 뷰포트의 전체 너비에 걸쳐 컨테이너 (가로 해상도에 상관없이 100%의 width)
<body>
<!-- container 클래스 사용 -->
<div class="container">
<h2>Fixed Width Container</h2>
<code>.container</code> class로 고정된 컨테이너
</div>
</body>
<body>
<!-- container-fluid 클래스 사용 -->
<div class="container-fluid">
<h2>Full Width Container</h2>
<code></code> class로 늘어날 수 있는 컨테이너
</div>
</body>
</html>
4. Grid 레이아웃시스템
- 화면의 너비를 12 분할하는 것은 동일하나, 반응하는 화면의 기준너비는 4가지 에서 5가지로 세분화됨.
- 숫자 명시없이 <div classs="col">의 갯수에 따라 자동 분할
<!-- 2등분 -->
<div class="container">
<div class="row">
<div class="col">
1 of 2
</div>
<div class="col">
2 of 2
</div>
</div>
</div>
<!-- (576px 미만의 브라우저 너비부터 최대너비크기까지) 3등분 -->
<div class="container">
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col">
2 of 3
</div>
<div class="col">
3 of 3
</div>
</div>
</div>5. 실습
- Bootstrap의 Navbar 와 Dropdown 만들기
<!DOCTYPE HTML>
<html>
<head>
<title>.container vs .container-fluid</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="bootstrap.min.css">
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">회사, 제품 또는 프로젝트 이름</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" label="Toggle navigation"> </button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Navbar 링크</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Navbar 링크2</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
여기가 Dropdown 리스트
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</nav>
</body>
</html>
[03 레이아웃 컴포넌트 및 컨텐츠]
1. bootstrap의 Card
- Card : 유연하고 확장 가능한 콘텐츠 컨테이너. 머리글 및 바닥 글 옵션, 다양한 콘텐츠, 상황 별 배경색 등등의 옵션 포함
// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App/>,document.getElementById('root'));
serviceWorker.unregister();
// app.js
import React from 'react';
import './App.css';
import './bootstrap.min.css';
import './bootstrap-grid.css';
import './bootstrap-grid.min.css';
import rabbit from './rabbit04.png';
class App extends React.Component {
render() {
return (
<div className="App">
<h1 className="title">Hello, React!</h1>
<div class="card">
<img class="card-img-top" src={rabbit} alt={"rabbit"}/>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="/" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
);
}
}
export default App;
2. bootstrap의 Form
- Form : 이메일 확인, 번호 선택 등과 같은 새로운 입력 컨트롤을 활용하려면 모든 입력에 적절한 유형 속성을 사용해야 함
import React from 'react';
import './App.css';
import './bootstrap.min.css';
import './bootstrap-grid.css';
import './bootstrap-grid.min.css';
class App extends React.Component {
render() {
return (
<div className="App">
<h1 className="title">Hello, React!</h1>
<form>
<h1>로그인</h1>
<p>이름을 입력하세요:</p>
<input type="text" />
<div class="form-group">
Email <input type="email" class="form-control" placeholder="이메일" />
</div>
<div class="form-group">
비밀번호 <input type="password" class="form-control" placeholder="비밀번호" />
</div>
<div class="form-group">
<div class="col-sm-offset-2">
<div class="checkbox">
<label>
<input type="checkbox" /> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2">
<button type="submit" class="btn btn-primary">회원가입</button>
</div>
</div>
</form>
</div>
);
}
}
export default App;3. bootstrap의 List-group과 테이블
- List : .list-group 클래스가 있는 ul 와 .list-group-item 클래스가 있는 li 사용
- Table : 게시판 글 목록이나 차트를 표현할때 유용함. .table 클래스는 테이블에 기본 스타일을 추가
import React from 'react';
import './App.css';
import './bootstrap.min.css';
import './bootstrap-grid.css';
import './bootstrap-grid.min.css';
class App extends React.Component {
render() {
return (
<div className="App">
<h1 className="title">Hello, React!</h1>
<div class = "padd">list를 만드세요 </div>
<div class="list-group">
<a href="/" class="list-group-item list-group-item-action active">리스트 만들기1</a>
<a href="www.elice.com" class="list-group-item list-group-item-action">리스트 만들기2</a>
</div>
<div class = "padd">테이블을 입력하세요 </div>
<table class="table table-hover">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">제목</th>
<th scope="col">작성자</th>
<th scope="col">날짜</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>공지글</td>
<td>Mark </td>
<td>20.12.23</td>
</tr>
<tr>
<th scope="row">2</th>
<td>뮤직 리뷰</td>
<td>Thom Yorke</td>
<td>20.11.23</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">평론가 리뷰</td>
<td>21.1.10</td>
</tr>
</tbody>
</table>
</div>
);
}
}
export default App;4. bootstrap의 Typography 활용
- Typography : 타이포그래피의 많은 설정으로 alignment, heading, font 크기 등을 맞춤화 할 수 있음
import React from 'react';
import './App.css';
import './bootstrap.min.css';
import './bootstrap-grid.css';
import './bootstrap-grid.min.css';
class App extends React.Component {
render() {
return (
<div className="App">
<h1 className="title">Hello, React!</h1>
<h3>
Fancy display heading
<small class="text-muted">With faded secondary text</small>
</h3>
<div>
<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>
<h1 class="display-5">Display 5</h1>
<h1 class="display-6">Display 6</h1>
</div>
<div>
<p> 마크 태그를 사용하여 텍스트를<mark> 강조 표시 </ mark> 할 수 있습니다.</p>
<p><del>이 문장은 삭제된 텍스트로 취급됩니다.</del></p>
<p><s>이 문장은 더 이상 정확하지 않은 것으로 간주됩니다. </s></p>
<p> <ins>이 문장은 문서에 추가된 것으로 취급됩니다. </ ins></ p>
<p><u>이 줄 밑줄로 표시됩니다. </u></p>
<p><small>이 문장은 작은 글씨로 처리됩니다. </small></p>
<p><strong>이 줄은 bold 텍스트로 렌더링되었습니다. </strong></p>
<p><em>이 줄은 italic 텍스트로 렌더링되었습니다. </em></p>
</div>
<div>
<blockquote class="blockquote text-center">
<p class="mb-0">>A well-known quote, contained in a blockquote element.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
<blockquote class="blockquote text-left">
<p class="mb-0">A well-known quote, contained in a blockquote element.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
</div>
</div>
);
}
}
export default App;5. bootstrap의 Border
- Border : 컴포넌트의 테두리, 반경, 스타일등을 빠르게 지정할 수 있음. 이미지, 버튼, 텍스트 또는 기타 요소에 적합함.
import React from 'react';
import './App.css';
import { Component} from 'react';
import './bootstrap.min.css';
import './bootstrap-grid.css';
import './bootstrap-grid.min.css';
class App extends React.Component {
render() {
return (
<div className="App">
<h1 className="title">Hello, React!</h1>
<div class ="padd">/**Component Display 가로*/</div>
<div class="d-inline p-2 bg-primary text-white">a-inline</div>
<div class="d-inline p-2 bg-dark text-white">b-inline</div>
<div class ="padd">/**Component Display 세로*/</div>
<span class="d-block p-2 bg-primary text-white">a-block</span>
<span class="d-block p-2 bg-dark text-white">b-block</span>
<div class ="padd">/**Border 색 정하기*/</div>
<span class="border border-primary"></span>
<span class="border border-secondary"></span>
<span class="border border-success"></span>
<span class="border border-danger"></span>
<span class="border border-warning"></span>
<span class="border border-info"></span>
<span class="border border-light"></span>
<span class="border border-dark"></span>
<span class="border border-white"></span>
<div class ="padd">/**Border radius 정하기*/</div>
<img src="rabbit04.png" class="rounded" alt="..."/>
<img src="rabbit04.png" class="rounded-top" alt="..."/>
<img src="rabbit04.png" class="rounded-right" alt="..."/>
<img src="rabbit04.png" class="rounded-bottom" alt="..."/>
<img src="/rabbit04.png" class="rounded-left" alt="..."/>
<img src="/rabbit04.png" class="rounded-circle" alt="..."/>
<img src="/rabbit04.png" class="rounded-pill" alt="..."/>
<img src="/rabbit04.png" class="rounded-0" alt="..."/>
</div>
);
}
}
export default App;6. bootstrap의 stretched-link
- stretched-link : CSS를 통해 중첩된 부분을 확장해 HTML 요소 또는 부트 스트랩 구성 요소를 클릭 할 수 있도록 함.
(이게 무슨말인지 도저히 이해가 안감.. 실습도 해봤는데 전혀 도움 안됨.. 늘어나지도 않음)
7. bootstrap의 Spinner
- Spinner : 사용자에게 편리한 UI를 만들기 위해 프론트엔드에 필수적으로 적용되는 컴포넌트. 프로젝트/웹페이지의 로딩 상태를 표시 할 수 있음
(실습 안됨.. 도라버림....... 아 진짜 리액트 존나싫다... 내가 진짜 살다살다 별... )
플라스크에 이어서 리액트까지 진짜 돌아버릴 것 같다... 와....
원래 프론트 관심도 없었지만 진짜 앞으로 쳐다도 안볼듯
※ 수업 자료의 출처는 K-Digital Training x 엘리스 인공지능 서비스 개발 기획 1기 (elice.io/)입니다.