본문 바로가기
코딩수업/AWS 클라우드환경 네이티브

(미완) 9/21 Bootstrap 프레임워크

by 인생즐겜러 2022. 9. 21.
728x90
반응형

AWS 클라우드환경 네이티브 수업 85일차

 

 

 

진행

1. Bootstrap 프레임워크

 

 

 

 

 

요약

1. Bootstrap 프레임워크

  • ※참고 - glyphicon
  • 입력폼(form) (input-group, checkbox / radio / select )
  • 부트스트랩에서 제공하는 독자적 입력 요소 ( btn-group, dropdown)
  • 네비게이션 (nav-tabs )
  • 다이어로그 (modal-dialog)

 

 

 

 

 

 

 

 

 

 

※참고 - glyphicon

 

부트스트랩 사이트에서 컴포넌트를 클릭하면

기본적으로 제공하는 기본 아이콘들이 있다.

아래의 예처럼

아이콘 아래에 있는 구문을 class 속성에 추가하면 해당 아이콘을 사용할 수 있다.

 

<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>

 

 

 

 

 

 

 

 

 

 

 

 

 

5. 입력폼(form)

 

input-group

 

라벨과 입력창이 하나로 그룹핑 되어서 표시되게 하고 싶을 때 사용한다.

기본 구조는 아래와 같다.

 

1. 기본 구조
<div class="input-group">
    <input type="text" class="form-control">
    그룹으로 하고 싶은 입력항목 작성
</div>



2. 입력항목에서 텍스트 표시할 시
<div class="input-group">
	<span class="input-group-addon">텍스트</span>
	<input type="text" class="form-control">
</div>

 

 

 

 

 

아래의 예를 보면 바로 이해가 된다.

 

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>input_group</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

	<!-- 부가적인 테마 -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">

	<!-- jQuery -->
	<script src="../js/jquery-3.6.1.js"></script>
	
	<!-- 합쳐지고 최소화된 최신 자바스크립트 -->
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</head>



<body>
	<div class="container">
		<h3>Input Groups</h3>
		
		<form>
			<div class="input-group">
				<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
				<input type="text" class="form-control"/>
			</div>
			<div class="input-group">
				<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
				<input type="password" class="form-control"/>
			</div>
			<br/>
			<div class="input-group">
				<span class="input-group-addon">Name</span>
				<input type="text" class="form-control" placeholder="이름을 입력하세요"/>
			</div>
		</form>
		<br/>
		
		
		
		<p>glyphicon 이모티콘을 반대방향에 붙이기</p>
		<form>
			<div class="input-group">
				<input type="text" class="form-control"/>
				<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
			</div>
			<div class="input-group">
				<input type="password" class="form-control"/>
				<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
			</div>
			<div class="input-group">
				<input type="text" class="form-control" placeholder="이름을 입력하세요"/>
				<span class="input-group-addon">Name</span>
			</div>
		</form>
	</div>
	
</body>
</html>

 

 

 

 

 

 

 

 

 

 

 

checkbox / radio / select

 

checkbox 

checkbox에 대한 기본적인 설명은 아래에 있다.

(9/20 checkbox 참고)

여기서는 checkbox-inline 과의 비교를 보려고 한다.

말 그대로 체크박스를 한줄로 표시하고 싶을 때 사용한다.

 

checked / disabled 속성이 있다.

각각 체크가 되어있게 하고 / 체크를 할 수 없게 한다.

 

 

 

 

 

radio 

 

라디오 버튼을 만든다.

checked / disabled 속성이 있다.

각각 체크가 되어있게 하고 / 체크를 할 수 없게 한다.

구조는 아래와 같다.

 

<div class="radio">
    <label for="haha">
        <input type="radio" id="haha">
        라벨의 이름
    </label>
</div>

 

 

 

 

 

select

 

선택 버튼을 만든다.

한 줄 상태에서 한개만 고를 수도 있고 (그냥 class 속성 사용)

/ 펼쳐진 상태에서 여러개를 고를 수도 있다. (multiple class 속성 사용)

 

구조는 아래와 같다.

 

1. 한개만 고르는 select
<div class="form-group">
	<label>선택지 질문??</label>
	<select class="form-control">
		<option>축구</option>
		...
        ...
    </select>
</div>



2. 여러 개 고르는 select
<div class="form-group">
	<label>선택지 질문??</label>
	<select multiple class="form-control">
		<option>호랑이</option>
        ...
        ...
        ...
        ...
	</select>
</div>

 

 

 

 

 

아래의 예를 보면서 결과를 보면 바로 이해가 된다.

 

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>input_1</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

	<!-- 부가적인 테마 -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">

	<!-- jQuery -->
	<script src="../js/jquery-3.6.1.js"></script>
	
	<!-- 합쳐지고 최소화된 최신 자바스크립트 -->
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</head>



<body>	
	<div class="container">
		<h2>Form control : textarea</h2>
		<form>
			<div class="form-group">
				<label>자기소개</label>
                <!-- 5줄로 총 영자 80자를 적을 수 있는 텍스트칸 생성 -->
				<textarea rows="5" col="80">안녕하십니까?</textarea>
			</div>
			
			<br/>
			
			<p>checkbox</p>
			<div class="checkbox">
				<label><input type="checkbox" value=""/>멍멍이</label>
			</div>
			<div class="checkbox">
				<label><input type="checkbox" value="" disabled/>야옹이</label>
			</div>
			<div class="checkbox">
				<label><input type="checkbox" value=""/>삐약이</label>
			</div>
			
			<hr/>
			
			<p>checkbox-inline</p>
			<label class="checkbox-inline">
				<input type="checkbox" />멍멍이
			</label>
			<label class="checkbox-inline">
				<input type="checkbox" value="" disabled/>야옹이
			</label>
			<label class="checkbox-inline">
				<input type="checkbox" value=""/>삐약이
			</label>
		</form>
		<hr/>
		
		
		
		<form>
			<p>radio(div class)</p>
			<div class="radio">
				<label><input type="radio" name="selectAnimal"/>Dog</label>
			</div>
			<div class="radio">
				<label><input type="radio" name="selectAnimal" checked/>Cat</label>
			</div>
			<div class="radio">
				<label><input type="radio" name="selectAnimal" disabled/>Bird</label>
			</div>
		</form>
		<hr/>
		<form>
			<p>radio(label class)</p>
			<label class="radio">
				<input type="radio" name="selectanimal" checked/>강아지
			</label>
			<label class="radio">
				<input type="radio" name="selectanimal"/>고양이
			</label>
			<label class="radio">
				<input type="radio" name="selectanimal" disabled/>독수리
			</label>
		</form>
		
		<hr/>
		
		<form>
			<p>radio-inline(div class)</p>
			<div class="radio-inline">
				<label><input type="radio" name="sa"/>강아지</label>
			</div>
			<div class="radio-inline">
				<label><input type="radio" name="sa" checked/>고양이</label>
			</div>
			<div class="radio-inline">
				<label><input type="radio" name="sa"/>독수리</label>
			</div>
		</form>
		
		<hr/>
		
		<form>
			<p>radio-inline(label class)</p>
			<label class="radio-inline">
				<input type="radio" name="selectanimal" checked/>강아지
			</label>
			<label class="radio-inline">
				<input type="radio" name="selectanimal"/>고양이
			</label>
			<label class="radio-inline">
				<input type="radio" name="selectanimal" disabled/>독수리
			</label>
		</form>
		
		<hr>
		
		<form>
			<div class="form-group">
				<label>좋아하는 운동은?(select one)</label>
				<select class="form-control">
					<option>축구</option>
					<option>야구</option>
					<option>농구</option>
					<option>배구</option>
					<option>달리기</option>
				</select>
				<hr>
				
				<label>내가 좋아하는 동물은?(multi select)</label>
				<select multiple class="form-control">
					<option>호랑이</option>
					<option>독수리</option>
					<option>오리</option>
					<option>참새</option>
					<option>강아지</option>
				</select>
			</div>
		</form>
	</div>
	
</body>
</html>

 

 

 

 

 

 

 

 

 

 

 

6. 부트스트랩에서 제공하는 독자적 입력 요소

 

 

 

btn-group

 

input group 처럼 버튼들을 하나의 그룹처럼 묶는 구문이다.

구조는 아래와 같다.

 

1.button 태그 사용
<div class="btn-group">
    <button class="btn">버튼 내 텍스트</button>
</ div>



2.input 태그 사용
<div class="btn-group">
    <input type="button" value="버튼 내 텍스트"/>
</ div>

 

 

 

 

 

아래의 예를 보면서 이해해보자.

 

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>button_group</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

	<!-- 부가적인 테마 -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">

	<!-- jQuery -->
	<script src="../js/jquery-3.6.1.js"></script>
	
	<!-- 합쳐지고 최소화된 최신 자바스크립트 -->
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</head>



<body>
	<div class="container">
	
		<h1>Button Group - button / input 태그별</h1>
		<div class="btn-group">
			<button	type="button" class="btn btn-primary">Linux</button>
			<button	class="btn btn-primary">Window</button>
			<input	type="button" class="btn btn-primary" value="IOS"/>
		</div>
		
		<hr/>
		
		<h1>Large Button Group</h1>
		<div class="btn-group btn-group-lg">
			<button type="button" class="btn btn-primary">Linux</button>
			<button type="button" class="btn btn-primary">Window</button>
			<button type="button" class="btn btn-primary">IOS</button>
		</div>
		
		<hr/>
		
		<h1>Default Button Group</h1>
		<div class="btn-group">
			<button type="button" class="btn btn-primary">Linux</button>
			<button type="button" class="btn btn-primary">Window</button>
			<button type="button" class="btn btn-primary">IOS</button>
		</div>
		
		<hr/>
		
		<h1>Small Button Group</h1>
		<div class="btn-group btn-group-sm">
			<button type="button" class="btn btn-primary">Linux</button>
			<button type="button" class="btn btn-primary">Window</button>
			<button type="button" class="btn btn-primary">IOS</button>
		</div>
		
		<hr/>
		
		<h1>XSmall Button Group</h1>
		<div class="btn-group btn-group-xs">
			<button type="button" class="btn btn-primary">Linux</button>
			<button type="button" class="btn btn-primary">Window</button>
			<button type="button" class="btn btn-primary">IOS</button>
		</div>
		
		<hr/>
		
		<h1>Vertical Button Group</h1>
		<div class="btn-group-vertical">
			<button type="button" class="btn btn-primary">Linux</button>
			<button type="button" class="btn btn-primary">Window</button>
			<button type="button" class="btn btn-primary">IOS</button>
		</div>
		
		<hr/>
		
		<h2>Justified Button Group</h2>
		<div class="btn-group btn-group-justified">
			<a href="#" class="btn btn-warning">HTML5</a>
			<a href="#" class="btn btn-info">JAVA</a>
			<a href="#" class="btn btn-danger">SPRING</a>
		</div>
		
		<hr/>
		
		<h2>Nesting Button Group</h2>
		<div class="btn-group">
			<button type="button" class="btn btn-primary">JAVA</button>
			<button type="button" class="btn btn-primary">SPRING</button>
			<div class="btn-group">
				<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
					WEB <span class="caret"></span>
				</button>
				<ul class="dropdown-menu" role="menu">
					<li><a href="#">HTML5</a></li>
					<li><a href="#">CSS</a></li>
					<li><a href="#">SCRIPT</a></li>
				</ul>
			</div>
		</div>
	</div>
</body>
</html>

 

 

위의 결과에서 마지막 web 버튼의 경우, 

버튼 그룹 안의 버튼에 dropdown을 설정한 경우이다.

이제 dropdown에 대해 알아보도록 하자. 

 

 

 

 

 

 

 

 

 

 

dropdown

 

select과 기능이 비슷하다.

다른 점은 select은 클릭하면 나오는 메뉴에서 고르면 끝이지만

dropdown은 고른 순간 무언가 실행이 된다는 차이점이 있다.

 

구조는 아래와 같다.

 

 

 

dropdown의 전체 태그

<div class = "dropdown">
</div>

 

버튼 표시 태그(버튼 클릭 전 버튼 내 내용이 보이는 태그)

<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
</button>

 

버튼의 리스트업을 할 것이라는 설정 태그

<ul class="dropdown-menu" role="menu">
</ul>

 

버튼 내 리스트 내용을 적는 태그

<li role="presentation">
</li>

 

 

 

 

 

아래의 예를 보면서 이해하면 빠르다.

 

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>button_group</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

	<!-- 부가적인 테마 -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">

	<!-- jQuery -->
	<script src="../js/jquery-3.6.1.js"></script>
	
	<!-- 합쳐지고 최소화된 최신 자바스크립트 -->
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</head>



<body>
	<div class="container">
        <h2>Dropdown</h2>     
        <div class="dropdown">
            <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                Number
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu">
                <li role="presentation">
                    <a href="#">One</a>
                </li>
                <li role="presentation">
                    <a href="#">Two</a>
                </li>
                <li role="presentation">
                    <a href="#">Three</a>
                </li>
            </ul>
        </div>
	</div>
</body>
</html>

 

 

 

 

 

 

 

 

 

 

 

7. 네비게이션

 

 

 

nav-tabs

 

네비게이션 관련 콤포넌트 중에 하나

tab을 클릭하여 다른 페이지로 이동시키거나 콘텐츠만 전환하는 구문

 

구조는 아래와 같다.

 

<ul class="nav nav-tabs">
    <li role="presentation" class="active"><a href="#">탭 이름1</a></li>
    <li role="presentation"><a href="#">탭 이름2</a></li>
	....
    ....
</ ul>

 

 

 

아래의 예를 보면서 이해해보자.

 

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>tab</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

	<!-- 부가적인 테마 -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">

	<!-- jQuery -->
	<script src="../js/jquery-3.6.1.js"></script>
	
	<!-- 합쳐지고 최소화된 최신 자바스크립트 -->
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</head>

<body>
	<div class="container">
	
		<h3>Inline List</h3>
		<ul class="list-inline">
			<li><a href="#">HOME</a></li>
			<li><a href="#">BOOK</a></li>
			<li><a href="#">MOBILE</a></li>
			<li><a href="#">CHOOSE</a></li>
		</ul>
		
		<h3>Tabs</h3>
		<ul class="nav nav-tabs">
			<li class="active"><a href="#">HOME</a></li>
			<li><a href="#">BOOK</a></li>
			<li><a href="#">MOBILE</a></li>
			<li><a href="#">CHOOSE</a></li>
		</ul>
		
		<h3>Tabs With Dropdown Menu</h3>
		<ul class="nav nav-tabs">
			<li class="active"><a href="#">HOME</a></li>
			<li class="dropdown">
				<a class="dropdown-toggle" data-toggle="dropdown" href="#">Pencil<span class="carset"></span></a>
				<ul class="dropdown-menu">
					<li><a href="#">빨강연필</a></li>
					<li><a href="#">노랑연필</a></li>
					<li><a href="#">검정연필</a></li>
				</ul>
			</li>
			<li><a href="#">BOOK</a></li>
			<li><a href="#">MOBILE</a></li>
			<li><a href="#">CHOOSE</a></li>
		</ul>	
	</div>
</body>
</html>

 

 

 

 

 

 

 

 

 

 

 

8. 다이어로그

 

 

 

modal-dialog

 

기존 화면이 있다면 그 위에 다른 창으로 뭔가를 표시를 하려고 할 때 사용한다.

아래는 새로 띄우는 창에 대한 구조이다.

해더~푸터까지 새로운 창도 기본적으로 같은 구조로 구성할 수 있게 되어있다.

 

<div class="modal fade" id="다이어로그 아이디" role="dialog"  aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                ……헤더 내용……
            </div>
            <div class="modal-body">
                ……바디 내용……
            </div>
            <div class="modal-footer">
                ……푸터 내용……
            </div>
        </div>
    </div>
</div>

 

 

 

위의 새로운 창을 띄우게 하는 구문은 아래와 같다.

 

<a href="다이어로그의 지정" data-toggle="modal"> ...... </a>

 

 

 

새로운 창을 닫는 구문은 아래와 같다.

 

<a href="#" data-dismiss="modal"> ...... </a>



 

 

 

아래의 예를 보면서 이해해보자

 

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>modal</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

	<!-- 부가적인 테마 -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">

	<!-- jQuery -->
	<script src="../js/jquery-3.6.1.js"></script>
	
	<!-- 합쳐지고 최소화된 최신 자바스크립트 -->
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
	
	<style>
		.modal-header, h4, .close {
			background-color: #5C885C;
			color: white !important;
			text-align: center;
			font-size: 30px;
		}
		.modal-footer {
			background-color: #F9F9F9;
		}
	</style>
</head>



<body>
	<div class="container">
	
		<h2>Modal Example</h2>
		<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">
			내버튼
		</button>
		
		<!-- Modal -->
		<div class="modal fade" id="myModal" role="dialog">
			<!-- div class="modal-dialog -->
			<div class="modal-dialog modal-sm">
				<!-- Modal content -->
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal">&times;</button>
						<h4><span class="glyphicon glyphicon-lock"></span> Member Login</h4>
					</div>
					<div class="modal-body" style="padding: 40px 50px;">
						<form class="form-horizontal" method="post" action="welcome.html">
							<div class="form-group">
								<label><span class="glyphicon glyphicon-user"></span> Member ID</label>
								<input type="text" class="form-control" id="id" name="id" maxlength="20"
								placeholder="Enter Member ID"/>
							</div>
							<div class="form-group">
								<label><span class="glyphicon glyphicon-eye-open"></span>Password</label>
								<input type="password" class="form-control" id="pass" name="pass" maxlength="20"
								placeholder="Enter Member Password"/>
							</div>
							<button type="submit" class="btn btn-success btn-block">
								<span class="glyphicon glyphicon-off"></span> Login
							</button>
						</form>
					</div>
					<div class="modal-footer">
						<button type="reset" class="btn btn-danger pull-left" data-dismiss="modal">
							<span class="glyphicon glyphicon-remove"></span> Close
						</button>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>

 

728x90
반응형
저작자표시 비영리 변경금지

'코딩수업 > AWS 클라우드환경 네이티브' 카테고리의 다른 글

9/23 1차 프로젝트 진행 관련 회의 + 깃허브 개인 공부  (0) 2022.09.23
(미완) 9/22 Bootstrap 프레임워크로 웹페이지 만들어보기  (0) 2022.09.22
9/20 웹페이지 만들어 보기, Bootstrap 프레임워크 시작  (0) 2022.09.20
9/19 HTML을 이용해서 웹페이지 만들어 보기  (0) 2022.09.19
9/16 CSS 속성 ( 배경, 테두리, 박스, 위치, Animation )  (2) 2022.09.16

관련글

댓글

티스토리툴바