오늘은 드디어 html이랑 css를 끝내고 22. 부트스트랩 강의를 수강했다
뭔가 지금까지 알파벳 abcd부터 순서대로 배우고 있었는데
어디서 이미 완성된 단어랑 문장들을 주워올 수 있어서
순식간에 글 하나를 뚝딱 만들어내는 느낌이랄까
그게 부트스트랩과 비슷하기는 하다
*
부트스트랩
다른 사람이 작성해온 css를 불러와서 사용하는 것이며 트위터에서 개발했다고 한다
방법은
url을 복사붙여넣기 하거나
url 을 다운로드해서 ./로 쓰거나
부트스트랩 3,4 차이
3 px를 쓰고 4는 em, 4부터는 IE8 버전 지원 종료
아직까지 기반 플러그들이 3에 있는 경우가 많아서
현 강의에선 3을 쓴다
*
레이아웃
화면크기에 따라 변환시키기
Col-sm-##
다 더하면 12, 한 줄은 12개로 이루어져 있다
768px보다 클 때 col-sm-
970px보다 클 때 col-md-
1170px보다 클 때 col-lg
768px보다 작을 때 col-xs-
768px보다 작을 때는 1
768px 이상에서는 2
970px 이상에서는 3
*
Table-bordered
Table-hover : 마우스 움직일 때 음영을 줌
*
패널 : 로그인 창
폼 : 회원가입 때 주로 쓰이는, bootstrapk에서 입력부분 참고
네비게이션 : 홈 바 같은 거, 넓을 땐 그냥 있다가 줄어들면 세로로 바뀌는 것…
Jquery + bootstrap.min.js 두가지를 필요로 함
Fontawesome 페이스북아이콘 같은 거 불러오는 거
썸머노트 : 블로그 글쓰기 공간
오늘은 바로 바로 만드는 걸 위주로 해서
완성한 코드를 저장해놓으려고 한다
이렇게 쉽게 사이트가 만들어지다니...
첫번째는 기본적인 로그인 화면용
두번째는 게시판이다
첫번째
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>로그인화면</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="container" style="padding-top:50px;">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<!-- 오른쪽 메뉴바 -->
<button type="button" class="collapsed navbar-toggle" data-toggle="collapse" data-target="#nav_menu" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
bootstrap 강의
</a>
</div>
<div class="collapse navbar-collapse" id="nav_menu">
<ul class="nav navbar-nav">
<li class="active">
<a href="">HTML</a>
</li>
<li>
<a href="">CSS</a>
</li>
<li>
<a href="">PYTHON</a>
</li>
<li>
<a href="">Javascript</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="co;=md-4 cold-md-offset-4">
<div class="panel panel-default">
<div class="panel-heading">
로그인
</div>
<div class="panel-body">
<br/>
<input type="text" class="form-control" placeholder="ID">
<br/>
<input type="password" class="form-control" placeholder="비밀번호">
<br/>
<button class="btn btn-lg btn-success btn-block">로그인</button>
<br/>
<a href="" class="btn btn-lg btn-primary btn-block">
<i class="fa fa-facebook" aria-hidden="true"></i>
페이스북로그인
</a>
</div>
</div>
</div>
</body>
</html>
두 번째
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>게시판</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container" style="padding-top:50px">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<!-- 오른쪽 메뉴바 -->
<button type="button" class="collapsed navbar-toggle" data-toggle="collapse" data-target="#nav_menu" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
bootstrap 강의
</a>
</div>
<div class="collapse navbar-collapse" id="nav_menu">
<ul class="nav navbar-nav">
<li class="active">
<a href="">HTML</a>
</li>
<li>
<a href="">CSS</a>
</li>
<li>
<a href="">PYTHON</a>
</li>
<li>
<a href="">Javascript</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="col-sm-2">
<div class="panel panel-default">
<div class="panel-heading">
게시판
</div>
<div class="panel-body">
<a href="">자유게시판</a> </br>
<a href="">포럼</a> </br>
<a href="">news</a> </br>
</div>
</div>
</div>
<div class="col-sm-10">
<table class="table table-bordered table-hover">
<tr>
<th>제목</th>
<th>작성일</th>
<th>삭제</th>
</tr>
<tr>
<td>안녕하세요</td>
<td>2019-03-24</td>
<td>
<a href="#" class="btn btn-danger">삭제</a>
</td>
</tr>
<tr>
<td>안녕하세요</td>
<td>2019-03-24</td>
<td>
<a href="#" class="btn btn-danger">삭제</a>
</td>
</tr>
</table>
<nav class="text-center">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
<a href="" class="btn btn-default"> 작성하기</a>
</div>
</div>
</body>
</html>
내일부터 당분간은 예제위주일 것 같은데
확실히 더 재밌긴하다
프론트엔드 개발 올인원 패키지 with React Online. | 패스트캠퍼스
성인 교육 서비스 기업, 패스트캠퍼스는 개인과 조직의 실질적인 '업(業)'의 성장을 돕고자 모든 종류의 교육 콘텐츠 서비스를 제공하는 대한민국 No. 1 교육 서비스 회사입니다.
www.fastcampus.co.kr
'패스트캠퍼스 챌린지 < 프론트엔드-react>' 카테고리의 다른 글
| [패스트캠퍼스 수강후기] 프론트엔드 강의 21회차 미션 (0) | 2020.07.19 |
|---|---|
| [패스트캠퍼스 수강후기] 프론트엔드 강의 20회차 미션 (0) | 2020.07.18 |
| [패스트캠퍼스 수강후기] 프론트엔드 강의 18회차 미션 (0) | 2020.07.16 |
| [패스트캠퍼스 수강후기] 프론트엔드 강의 17회차 미션 (0) | 2020.07.15 |
| [패스트캠퍼스 수강후기] 프론트엔드 강의 16회차 미션 (0) | 2020.07.14 |
