1. 부트스트랩

- html, css, js를 합쳐놓은 프레임워크

- html, css, js를 활용하여 만들진 많은 컴포넌트 (기능-자바스크립트 + 화면-html, css)제공

- 부트스트랩으로 만들어진 웹사이트는 반응형 웹사이트이다. (비반응형도 가능)

- 반응형이란 ? -> 디바이스의 크기에 따라 크기에 맞는 최적화된 화면으로 변환

​

1) 다운로드

- bootstrap.min.js, bootstrap.min.css 파일 필요

- 테마css(필수x)

- 버저너에 따라 제이쿼리 필요

​

2) 구조 및 준비

- html5, 뷰포트 메타태그(모바일 웹 구성시 필수 정보), bootstrap.min.js, bootstrap.min.css 파일

- 3버전과 4버전은 제이쿼리가 필수이나, 5버전은 제이쿼리가 없어도 된다(필요에 의하여 추가 가능)

>> 웹컨텐츠 하위에 plugin 폴더를 생성하여 홈페이지에서 다운로드받은 부트스트랩폴더를 삽입하였다.

​

3) 부트스트랩 사용하기

- 부트스트랩 사용을 위한 jsp:include

1. index파일을 하나 잡는다.

2. include폴더를 생성하여 head와 foot 부분의 페이지를 각각 작성한다.

​

* head

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- 모바일웹 작업시 필수 메타 태그 정보 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="${pageContext.servletContext.contextPath}/plugin/bootstrap-3.3.2/css/bootstrap.min.css">
<script type="text/javascript" src="${pageContext.servletContext.contextPath}/plugin/js/jquery-3.6.0.min.js"></script>
<title>${param.pageTitle}</title>
</head>
<body>

​

* foot

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<script type="text/javascript" src="${pageContext.servletContext.contextPath}/plugin/bootstrap-3.3.2/js/bootstrap.min.js"></script>
</body>
</html>

 

* index

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<% request.setCharacterEncoding("UTF-8"); %>
<jsp:include page="/include/head.jsp">
	<jsp:param value="부트스트랩 시작하기" name="pageTitle"/>
</jsp:include>
	
	<h1>부트스트랩 시작하기</h1>
	<span class="glyphicon glyphicon-asterisk"></span>
	
	<button type="button" class="btn btn-default" aria-label="Left Align">
		<span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
	</button>
	
<jsp:include page="/include/foot.jsp"></jsp:include>

>>>이렇게 해주는 이유는 이런식으로 부분을 나눠두고 include 하면 매 페이지마다 부트스트랩 사용을위한 링크를 걸지않아도 되기때문에, 편리성과 중복의 우려를 배제할 수 있기 때문이다.

>> index 페이지 상의 버튼과 *컴포넌트 사용 예시

​

4) 컴포넌트

- 부트스트랩 기반으로 작성된 디자인 요소를 컴포넌트라 한다.

- 컴포넌트는 html과 css의 구조가 있다.

​

1. css 구조

- 컴포넌트는 대표 클래스와 옵션 클래스로 구성되어 있다.

- 대표클래스 : 전체적인 외형

- 옵션클래스 : 색상, 여백 등

- 헬퍼클래스 : 각 컴포넌트에 종속이 없으며 모든 곳에서 도움을 줄 수 있는 클래스

​

* 대표적인 옵션클래스 *

- 크기

> class="대표클래스 대표클래스-*"

> 크기 옵션 클래스 종류 : lg > md > sm > xs

ex) class="대표클래스 대표클래스-lg"

<h4>크기</h4>
	<button type="button" class="btn btn-lg">버튼1</button>
	<button type="button" class="btn btn-md">버튼2</button>
	<button type="button" class="btn btn-sm">버튼3</button>
	<button type="button" class="btn btn-xs">버튼4</button>
	
	<input type="text" class="form-control">
	<input type="text" class="form-control input-lg">

​

- 색상

> class="대표클래스 대표클래스-*"

> 색상 옵션 클래스 종류 : defalut, danger, warning, primary, success, info

ex) class="대표클래스 대표클래스-danger"

<h4>색상</h4>
	<button type="button" class="btn btn-dafault">버튼1</button>
	<button type="button" class="btn btn-danger">버튼2</button>
	<button type="button" class="btn btn-warning">버튼3</button>
	<button type="button" class="btn btn-primary">버튼4</button>
	<button type="button" class="btn btn-success">버튼5</button>
	<button type="button" class="btn btn-info">버튼6</button>

​

2. 이벤트 메서드

- 각 컴포넌트들이 특정 행위(이벤트)가 발동시 등록해놓은 콜백함수가 작동된다.

- data-toggle 속성 : 이벤트 종류

- data-target 속성 : 이벤트 작동 대상

- data-dismiss 속성 : 이벤트 종료

<!-- Button trigger modal -->
	<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
	  Launch demo modal
	</button>
	
	<!-- Modal -->
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	  <div class="modal-dialog">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
	        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
	      </div>
	      <div class="modal-body">
	      		<input type="text" id="myInput">
	      </div>
	      <div class="modal-footer">
	        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
	        <button type="button" class="btn btn-primary">Save changes</button>
	      </div>
	    </div>
	  </div>
	</div>
	
	<script>
		$(function(){
			var
			$myInput = $('#myInput'),
			$myModal = $('#myModal');
			
			$myModal.on('show.bs.modal', function (e) {
				  alert('모달이 호출 되었습니다.');
			});
			$myModal.on('hidden.bs.modal', function (e) {
				$myInput.val('');
			});
		});
	</script>

>> 자바스크립트를 이용한 모달(Modal) 사용

>> 버튼클릭시 모달실행. 모달이 실행되면 alert, 종료되면 input의 value를 초기화시킨다.

​

3. 그리드 시스템

- 1행을 부요 요소 기준의 크기로 12열로 나눈다.

- col-* 접두사로 시작된다.

- 디바이스 크기의 옵션도 부여 할 수 있다.(디바이스 크기 영역에 도달될 시 해당 클래스만 작동된다.)

- col-lg-*, col-md-*, col-sm-*, col-xs-*

ex) [col-lg-6 col-md-12][col-lg-6 col-md-12]

- 1행을 초기화 하는 클래스는 row 클래스이다. (1행을 표현하기전에 row 클래스로 감싼다.)

​

1. 1행 표기

- 설정된 디바이스 크기 미만으로 넘어갔을 경우 그 이하의 디바이스 크기 12로 강제 변환

- sm 영역 미만으로 사이즈 변경시 xs-12로 강제 변환

<div class="row">
		<div class="col-sm-4">
			<div class="alert alert-danger"></div>
		</div>
		<div class="col-sm-4">
			<div class="alert alert-danger"></div>
		</div>
		<div class="col-sm-4">
			<div class="alert alert-danger"></div>
		</div>
	</div>

​

2. 1행 디바이스 크기별로 지정

- 해당 디바이스 크기에 관련된 그리드 시스템 클래스 적용

<div class="row">
		<div class="col-lg-3 col-md-6">
			<div class="alert alert-info"></div>
		</div>
		<div class="col-lg-3 col-md-6">
			<div class="alert alert-info"></div>
		</div>
		<div class="col-lg-3 col-md-6">
			<div class="alert alert-info"></div>
		</div>
		<div class="col-lg-3 col-md-6">
			<div class="alert alert-info"></div>
		</div>
	</div>

​

3. 반응형 유틸

- 특정 디바이스 크기에서만 보이게하거나 감추게 할 수 있다.

- visible-*(lg, md, sm, xs)-*(inline, block, inline-block)

ex) class="visible-lg-block" -> lg 영역에서 블럭요소로 보이도록

- hidden-*(lg, md, sm, xs)

ex) class="hidden-xs" -> xs 영역에서만 보이지 않도록

<div class="row">
		<div class="col-lg-3 col-md-6">
			<div class="alert alert-info"></div>
		</div>
		<div class="col-lg-3 col-md-6">
			<div class="alert alert-info"></div>
		</div>
		<div class="col-lg-3 col-md-6">
			<div class="alert alert-info"></div>
		</div>
		<div class="col-lg-3 col-md-6 hidden-xs hidden-sm">
			<div class="alert alert-info">최소 사이즈에서는 안보여야함</div>
		</div>
		<div class="col-xs-12 visible-xs-block">
			<div class="alert alert-warning">작은 사이즈의 컨텐츠</div>
		</div>
	</div>

​

4. 빈 영역 -> offset

- offset이 지정된 대상 왼쪽으로 빈공간 할당

<div class="row">
		<div class="col-sm-3">
			<div class="alert alert-warning"></div>
		</div>
		<div class="col-sm-6"></div>
		<div class="col-sm-3">
			<div class="alert alert-warning"></div>
		</div>
	</div>
	<div class="row">
		<div class="col-sm-3">
			<div class="alert alert-warning"></div>
		</div>
		<div class="col-sm-3 col-sm-offset-6">
			<div class="alert alert-warning"></div>
		</div>
	</div>

>> 다른코드지만 같은모습인걸 확인할 수 있다.

​

*** 네비게이션바와 케러셀을 이용하여 화면 구성해보기 ***

>>> 부트스트랩 홈페이지의 네비게이션바와 케러셀을 이용하여 화면구성

​

>> 네비게이션 바

// 네비게이션바 부분
<nav class="navbar navbar-inverse navbar-static-top">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <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="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

​

>> 케러셀부분

<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="http://hrdmarket.co.kr/resources/file/hrd/institution_ksmart_13123100001/220214113940-9d2ce2c0-d984-4117-ac74-b31d17cdb4d6.jpg" alt="...">
      <div class="carousel-caption">
		이미지 설명입니다.1
      </div>
    </div>
    <div class="item">
      <img src="http://hrdmarket.co.kr/resources/file/hrd/institution_ksmart_13123100001/220214113940-9d2ce2c0-d984-4117-ac74-b31d17cdb4d6.jpg" alt="...">
      <div class="carousel-caption">
		이미지 설명입니다.2
      </div>
    </div>
    <div class="item">
      <img src="http://hrdmarket.co.kr/resources/file/hrd/institution_ksmart_13123100001/220214113940-9d2ce2c0-d984-4117-ac74-b31d17cdb4d6.jpg" alt="...">
      <div class="carousel-caption">
		이미지 설명입니다.3
      </div>
    </div>
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

<div class="container" style="margin-top: 15px;">
	<div class="row">
		<div class="col-sm-6">
			<div class="panel panel-default">
			  <div class="panel-body">
			    	<table class="table table-striped">
			    		<thead>
			    			<tr>
			    				<th>제목</th>
			    				<th>등록일</th>
			    			</tr>
			    		</thead>
			    		<tbody>
			    			<tr>
			    				<th>공지사항입니다.</th>
			    				<th>2022-06-08</th>
			    			</tr>
			    			<tr>
			    				<th>공지사항입니다.</th>
			    				<th>2022-06-08</th>
			    			</tr>
			    			<tr>
			    				<th>공지사항입니다.</th>
			    				<th>2022-06-08</th>
			    			</tr>
			    			<tr>
			    				<th>공지사항입니다.</th>
			    				<th>2022-06-08</th>
			    			</tr>
			    			<tr>
			    				<th>공지사항입니다.</th>
			    				<th>2022-06-08</th>
			    			</tr>
			    		</tbody>
			    	</table>
			  </div>
			</div>
		</div>
		<div class="col-sm-6">
			<div class="panel panel-default">
			  <div class="panel-body">
			    	<table class="table table-striped">
			    		<thead>
			    			<tr>
			    				<th>제목</th>
			    				<th>등록일</th>
			    			</tr>
			    		</thead>
			    		<tbody>
			    			<tr>
			    				<th>공지사항입니다.</th>
			    				<th>2022-06-08</th>
			    			</tr>
			    			<tr>
			    				<th>공지사항입니다.</th>
			    				<th>2022-06-08</th>
			    			</tr>
			    			<tr>
			    				<th>공지사항입니다.</th>
			    				<th>2022-06-08</th>
			    			</tr>
			    			<tr>
			    				<th>공지사항입니다.</th>
			    				<th>2022-06-08</th>
			    			</tr>
			    			<tr>
			    				<th>공지사항입니다.</th>
			    				<th>2022-06-08</th>
			    			</tr>
			    		</tbody>
			    	</table>
			  </div>
			</div>
		</div>
	</div>
</div>

<footer>
	ksmart.or.kr 2022-06-08
</footer>

>>결과확인

​

'CSS' 카테고리의 다른 글

가상선택자(CSS)  (0) 2023.05.09
CSS 속성 종류  (0) 2023.04.17
form 요소, 화면 구성 태그 활용  (0) 2023.04.17

가상선택자란, 현재 상태를 확인할 수 있는 선택자로 선택자: 가상선택자 ==> { css 속성 : css 값; } 의

형태로 작성할 수 있다.

 

1. hover (선택된 대상에 마우스가 업(커서가 대상 위에 위치)되었을때 반응)

1-1) hover를 이용한 drop down 실습

2. active(마우스로 누르고 있을 경우)

3. focus (키보드 입력 커서가 활성화 되있을 시)

4. first-child, last-child(첫번째, 마지막번째 대상 선택)

4-1. first, last-child 실습 : 테두리 만들기

5. nth-child (n번째 대상 선택)

'CSS' 카테고리의 다른 글

부트스트랩(bootstrap)  (0) 2023.05.15
CSS 속성 종류  (0) 2023.04.17
form 요소, 화면 구성 태그 활용  (0) 2023.04.17

1) font

1. 글꼴의 크기, 종류, 굵기 등을 표현

* 웹폰트 사용 방법 *

1. 구글 웹폰트 검색

2. 마음에 드는 폰트 선택 후 우측에 select this style 선택

3. link 복사하여 head 부분에 삽입

4. font-family에 폰트명 삽입

 

2) text

1. text 요소 정렬 및 표기 옵션

2. text 스타일이 적용된 대상의 하위 요소에서 표현이 된다.

 

3) color

1. 텍스트 요소의 색상을 결정한다. (웹색상표, rgb, rgba 등등..)

4) border

1. 선택된 대상의 테두리, 색상, 굵기, 스타일 설정

2. 상하좌우 등 각 위치에 별도로 적용 가능

3. 굵기, 스타일, 색상이 전부 지정되어야 화면에 반영

5) padding

1. 안쪽여백으로 가로사이즈 + 패딩사이즈가 전체 크기가 된다.

6) margin

1. 바깥여백으로 가로사이즈 + 바깥여백이 전체 크기가된다

7) width, height

1. width는 가로폭, height는 높이를 지정한다.

8) background

1. 배경색, 이미지, 패턴 등을 지정

2. 선택자로 선택된 대상의 배경 옵션 선택 가능

- 기본값 : repeat; (상하반복)

- repeat-x : 가로반복

- repeat-y : 세로반복

- no-repeat : 반복없음 .

- background-position : 배경의 위치를 설정

9) position, z-index

1. position : 배치 옵션 설정

- 생성된 블럭요소는 기본적으로 position: static; 을 가지고있다.

2. position: relative;

-  top, left, right, bottom 속성으로 절대값 위치를 지정 할 수 있다.

- 지정된 상위 요소를 찾아 찾은 대상의 영역이 배치 기준 점이 된다.

- top, left, right, bottom의 속성으로기준점 절대 위치에 배치 할 수 있다.

- static과 유사하게 블럭 요소를 순차적으로 배치가 가능하다.

- position-fixed로 디바이스 크기 기준으로 선택된 대상을 절대값으로 배치할수있다.

3. position: absolute 대상의 절대값 위치 기준이 된다.

- position: absolute로 설정된 대상의 position: relative; 설정된

상위 요소의 절대 위치로 대상 배치 가능

4. z-index : 겹쳐진 요소의 정렬 순서(앞뒤), 값이 높은 순으로 정렬한다.

10) display

- 선택된 대상의 보기 옵션 설정

- 감추기, 보이기(인라인요소, 블럭요소, 인라인블럭요소 등) 변경 가능

- 감추기 : display: none;

- 인라인요소로 변경 : display: inline;

- 블럭요소로 변경 : display: block;

- 인라인-블럭으로 변경(인라인 성격을 띄면서 높이 및 넓이 설정 가능) : display: inline-block;

​

11) line-height

- 텍스트의 높이 설정(세로 자간 설정)

​

12) list-style

- li 태그에 표현되는 불릿 모형을 변경(이미지로 교체 가능)하거나 감춘다.

- 불릿삭제 : list-style: none;

​

13) overflow

- 선택된 대상에 정해진 사이즈에서 하위 요소들의 높이나 넓이가 넘어 갈 경우 보이기 옵션 설정

- 높이나 너비가 넘어간 대상 감추기 : overflow: hidden;

- 스크롤로 하위 요소의 컨텐츠를 볼 수 있도록하기 : overflow: scroll;

14) float, clear

- float : 블럭요소 정렬

- clear : float 설정 부분 혹은 전체 해제

- float 적용된 대상은 높이 인식이 안된다.

- 다음 정렬된 블럭요소에서는 float에 영향을 받으며, float 적용대상의 높이 인식을 못한다.

(소스코드 순서와 상관없이 그 다음에 정렬되는 대상에 영향)

(clear 속성으로 float을 해제)

- float 적용된 대상에 가로 크기가 없을 경우 기본적으로 부모크기 100%를 상속받아

가로 크기 적용되는 부분이 해제가 된다.

- 이와 같은 성격으로 인하여 높이를 인식을 할 수 있도록 처리하는 방법이 몇가지 존재한다.

1. clear를 활용하여 float 해제

2. overflow : hidden -> float 적용된 대상의 상위 요소에 적용

'CSS' 카테고리의 다른 글

부트스트랩(bootstrap)  (0) 2023.05.15
가상선택자(CSS)  (0) 2023.05.09
form 요소, 화면 구성 태그 활용  (0) 2023.04.17

1) form 요소 공통 속성

1. readonly : 입력 혹은 선택 불가능, 서버에 데이터 전송 가능

2. disabled: 입력 혹은 선택 불가능, 서버에 데이터 전송 불가능

3. name: 서버에 전송될 데이터명

4. value: 서버에 전송될 데이터 값

 

2) form 태그 요소 - input

1. 사용자에게 단문 데이터 혹은 체크 형태로 데이터를 받을 수 있다.

2. type 속성값을 변경함으로써 사용 용도를 변경할 수 있다.

3. type="text"

> 사용자에게 텍스트 형식의 정보를 입력받을 때 사용

> placeholder 속성 사용을 통해 안내글을 표시할 수 있음.

4. type="password"

> 사용자에게 암호를 입력받을 때 사용

> 입력한 정보를 표시하지 않음

5. type="hidden"

> 사용자에게 감춰진 태그로, 사용자에게 표시될 필요는 없지만 서버에 데이터 전송이 필요할 경우 사용

 

6. type="radio"

> 다수 중 1개를 선택하도록 만드는 태그로 name 속성 값을 동일하게 작성해야 한다.

> checked 속성 사용을 통해 기본 선택 값 변경가능

7. type="checkbox"

> 다수중 다중 선택이 가능한 태그로, checked 속성을 통해 선택 값 변경 가능

8. 기타 type

> date(날짜 선택), number(숫자 입력), color(색깔 선택), email(이메일 형식 입력) 등 많은 type이 존재한다.

 

3) form 태그요소 - select

1. 다수 중 1개를 선택하는 dropdown 형태

2. select와 option 태그로 이루어져 있어 선택 시 목록을 확인하고 선택할 수 있다.

3. select에는 name 속성, option에는 value 속성을 사용한다.

4. selected 속성을 통해 기본 선택값을 설정할 수 있다.

5. 기본적으로는 1개 선택이지만, multiple 속성 사용을 통해 다중 선택이 가능하다.

 

4) form 태그요소 - textarea

1. 사용자에게 장문의 데이터를 받아야할 때 사용

2. value속성이 존재하지 않으며, 공백 및 개행 등을 인식한다.

3. cols와 row 속성을 사용하여 폭과 너비를 조정한다.

'CSS' 카테고리의 다른 글

부트스트랩(bootstrap)  (0) 2023.05.15
가상선택자(CSS)  (0) 2023.05.09
CSS 속성 종류  (0) 2023.04.17

+ Recent posts

티스토리툴바