오픈프레임워크_Day48

OpenFrameWork 2015. 5. 21. 17:27
### : 목차 구분 기호
--- : 목차 내에 항목 구분 기호
@@@ : 태그 용도 
,,, : 같은 항목 내에 구분 기호

목차
1. 이론 및 정보
2. 설정 및 그 밖에
3. 소스코드 또는 실습
4. 과제

###################################
1. 이론 및 정보
-----------------------------------
10. Twitter BootStrap Framework(틀) (센차터치 라는 것도 있음)
- jquery가 안에서 많이 사용됨
- 레이아웃을 잡아줄 때 매우 좋음
(1) 버전
          1) 1.X : PC 환경
          2) 2.X : 모바일 겸용
          3) 3.X : 모바일 우선 지원

(2) 참고 사이트
          1) http://www.getbootstrap.com/2.3.2

----------------------------------- 
----------------------------------- 
----------------------------------- 
###################################
2. 설정 및 그 밖에
-----------------------------------
* 부트스트랩을 연습하기 위한 새로운 프로젝트 생성 - BootStrap2
/BootStrap2/WebContent/bootstrap
다운 받은 부트스트랩 압축 풀어서 복사함

bootstrap-responsive.css 는 반응형 css
bootstrap-responsive.min.css 는 최소 기능만
----------------------------------- 
* /BoardApp/WebContent/v2/*.jsp
v2 jsp파일에 bean.v0.~ 를 bean.v2.~로 변경
----------------------------------- 
###################################
3. 소스코드 또는 실습 
-----------------------------------
3-1
Workspace : ~\JSP\EclipseWork
/BoardApp/src/bean/v2/BoardDao.java

package bean.v2;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.Vector;

import javax.naming.InitialContext;
import javax.sql.DataSource;

public class BoardDao {
     private Connection con;
     private PreparedStatement pstmt;
     private ResultSet rs;
     private DataSource dataSource;

     public BoardDao() {
          try {
               dataSource = (DataSource)new InitialContext()
                         .lookup("java:comp/env/jdbc/oracleDB");
               
          } catch (Exception e) {
               System.out.println("DB연결 객체준비 : " + e);
          }
     }
     
     public void freeConnection(){
          if(con!=null)try{con.close();}catch (Exception e) {}
          if(pstmt!=null)try{pstmt.close();}catch (Exception e) {}
          if(rs!=null)try{rs.close();}catch (Exception e) {}
     }
     
     // List.jsp     
     public Vector getBoardList(String keyField, String keyWord){
          Vector list = new Vector();
          String sql = "";          
          if(keyWord==""|| keyWord.isEmpty()){
               sql = "select * from tblboard order by pos";
          }else{
               sql = "select * from tblboard where "+keyField
                         +" like '%"+keyWord+"%' order by pos";
          }
          try {
               con = dataSource.getConnection();
               pstmt = con.prepareStatement(sql);
               rs = pstmt.executeQuery();
               while(rs.next()){
                    BoardDto dto = new BoardDto();
                    dto.setNum(rs.getInt("num"));
                    dto.setName(rs.getString("name"));
                    dto.setEmail(rs.getString("email"));
                    dto.setHomepage(rs.getString("homepage"));
                    dto.setSubject(rs.getString("subject"));
                    dto.setContent(rs.getString("content"));
                    dto.setPass(rs.getString("pass"));
                    dto.setCount(rs.getInt("count"));
                    dto.setIp(rs.getString("ip"));
                    dto.setRegdate(rs.getString("regdate"));
                    dto.setPos(rs.getInt("pos"));
                    dto.setDepth(rs.getInt("depth"));
                    list.add(dto);
               }
          }catch(Exception e) {
               System.out.println("Vector getBoardList(String keyField, String keyWord) : " + e);
          }finally{freeConnection();}
          return list;
     }
     
     // Post.jsp
     public void updatePos(Connection con){
          String sql = "update tblboard set pos=pos+1";
          try{
               pstmt = con.prepareStatement(sql);
               pstmt.executeUpdate();
          }catch(Exception e){
               System.out.println("void updatePos(Connection con) : " + e);
          }
     }
     
     public void insertBoard(BoardDto dto){
          int result = 0;
          String sql = "insert into " 
                    + "tblboard (num,name,email,homepage,subject,content,"
                    + "pass,count,ip,regdate,pos,depth)"
                    + " values(seq_num.nextVal,?,?,?,?,?,?,?,?,sysdate,0,0)";
          try {
               con = dataSource.getConnection();
               updatePos(con);
               pstmt = con.prepareStatement(sql);
               pstmt.setString(1, dto.getName());
               pstmt.setString(2, dto.getEmail());
               pstmt.setString(3, dto.getHomepage());
               pstmt.setString(4, dto.getSubject());
               pstmt.setString(5, dto.getContent());
               pstmt.setString(6, dto.getPass());
               pstmt.setInt(7, dto.getCount());
               pstmt.setString(8, dto.getIp());
               result = pstmt.executeUpdate();                    
          }catch(Exception e) {
               System.out.println("void insertBoard(BoardDto dto) : " + e);
          }finally{freeConnection();}
     }
     
     // Read.jsp, Update.jsp
     public BoardDto getBoard(int num, String page){
          BoardDto dto = new BoardDto();
          String sql = "";
          try {
               con = dataSource.getConnection();
               if(page.equals("read")){
                    sql = "update tblboard set count=count+1 where num=?";
                    pstmt = con.prepareStatement(sql);
                    pstmt.setInt(1, num);
                    pstmt.executeUpdate();
               }
               sql = "select * from tblboard where num=?";
               pstmt = con.prepareStatement(sql);
               pstmt.setInt(1, num);
               rs = pstmt.executeQuery();
               if(rs.next()){
                    dto.setNum(rs.getInt("num"));
                    dto.setName(rs.getString("name"));
                    dto.setEmail(rs.getString("email"));
                    dto.setHomepage(rs.getString("homepage"));
                    dto.setSubject(rs.getString("subject"));
                    dto.setContent(rs.getString("content"));
                    dto.setPass(rs.getString("pass"));
                    dto.setCount(rs.getInt("count"));
                    dto.setIp(rs.getString("ip"));
                    dto.setRegdate(rs.getString("regdate"));
                    dto.setPos(rs.getInt("pos"));
                    dto.setDepth(rs.getInt("depth"));
               }
          }catch(Exception e) {
               System.out.println("void BoardDto getBoard(int num) : " + e);
          }finally{freeConnection();}
          return dto;
     }
     
     // Updateproc.jsp
     public void updateBoard(BoardDto dto){
          int result = 0;
          String sql = "update tblboard set name=?,email=?,"
                    + "subject=?,content=? where num=?";
          try {
               con = dataSource.getConnection();
               pstmt = con.prepareStatement(sql);
               pstmt.setString(1, dto.getName());
               pstmt.setString(2, dto.getEmail());
               pstmt.setString(3, dto.getSubject());
               pstmt.setString(4, dto.getContent());
               pstmt.setInt(5, dto.getNum());
               result = pstmt.executeUpdate();               
          }catch(Exception e) {
               System.out.println("void updateBoard(BoardDto dto) : " + e);
          }finally{freeConnection();}
     }
     
     // Delete.jsp
     public void deleteBoard(int num){
          int result = 0;
          String sql = "delete from tblboard where num = ?";
          try {
               con = dataSource.getConnection();
               pstmt = con.prepareStatement(sql);
               pstmt.setInt(1, num);
               result = pstmt.executeUpdate();               
          }catch(Exception e) {
               System.out.println("void deleteBoard(int num) : " + e);
          }finally{freeConnection();}
     }
     
     // ReplyProc.jsp
     public void replyUpdatePos(BoardDto dto){
          int result = 0;
          String sql = "update tblboard set pos=pos+1 where pos > ?";
          try {
               con = dataSource.getConnection();
               pstmt = con.prepareStatement(sql);
               pstmt.setInt(1, dto.getPos());
               result = pstmt.executeUpdate();
          }catch(Exception e) {
               System.out.println("void reqlyUpdatePos(int pos) : " + e);
          }finally{freeConnection();}
     }
     
     public void replyBoard(BoardDto dto){
          int result = 0;
          String sql = "insert into " 
                    + "tblboard (num,name,email,homepage,subject,content,"
                    + "pass,count,ip,regdate,pos,depth)"
                    + " values(seq_num.nextVal,?,?,?,?,?,?,?,?,sysdate,?,?)";
          try {
               con = dataSource.getConnection();
               pstmt = con.prepareStatement(sql);
               pstmt.setString(1, dto.getName());
               pstmt.setString(2, dto.getEmail());
               pstmt.setString(3, dto.getHomepage());
               pstmt.setString(4, dto.getSubject());
               pstmt.setString(5, dto.getContent());
               pstmt.setString(6, dto.getPass());
               pstmt.setInt(7, dto.getCount());
               pstmt.setString(8, dto.getIp());
               pstmt.setInt(9, dto.getPos()+1);
               pstmt.setInt(10, dto.getDepth()+1);
               result = pstmt.executeUpdate();          
          }catch(Exception e) {
               System.out.println("void replyBoard(BoardDto dto) : " + e);
          }finally{freeConnection();}
     }
     
     // 들여쓰기
     public String useDepth(int depth){
          String result = "";
          for(int i=0;i<depth*3;i++){
               result+="&nbsp";               
          }
          return result;
     }
     
     /*
     try {
          
     }catch(Exception e) {
          System.out.println("empty : " + e);
     }finally{freeConnection();}
     */
}
-----------------------------------  
3-2
Workspace : ~\JSP\EclipseWork
/BoardApp/WebContent/v2/Reply.jsp

<%@page import="bean.v2.BoardDto"%>
<%@ page contentType="text/html; charset=EUC-KR"%>
<html>
<head> <title>JSPBoard</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script>
     function check() {
        if (document.form.pass.value == "") {
          alert("등록을 위해 패스워드를 입력하세요.");
          form.pass.focus();
          return false;
          }
        document.form.submit();
     }
</script>
</head>
<body>
<%request.setCharacterEncoding("euc-kr");%>
<jsp:useBean id="dao" class="bean.v2.BoardDao"/>
<%
int num = Integer.parseInt(request.getParameter("num"));
BoardDto dto = dao.getBoard(num, "update");
String subject = dto.getSubject();
String content = dto.getContent();
%>
<center>
<br><br>
<table width=460 cellspacing=0 cellpadding=3>
  <tr>
   <td bgcolor=#FF9018  height=21 align=center class=m>답변하기</td>
  </tr>
</table>
<form name=form method=post action="ReplyProc.jsp" >
<input type="hidden" name="num" value="<%=num %>" />
<input type="hidden" name="ip" value="<%=request.getRemoteAddr() %>" />
<table width=70% cellspacing=0 cellpadding=7>
<tr>
  <td align=center>
   <table border=0>
    <tr>
     <td width=20%>성 명</td>
     <td width=80%>
       <input type=text name=name size=30 maxlength=20 >
     </td>
     </tr>
    <tr>
     <td width=20%>E-Mail</td>
     <td width=80%>
       <input type=text name=email size=30 maxlength=30 >
     </td>
    </tr>
     <tr>
     <td width=20%>제 목</td>
     <td width=80%>
       <input type=text name=subject size=50 maxlength=50 value="답변:<%=subject %>">
     </td>
    <tr>
     <td width=20%>내 용</td>
     <td width=80%>
       <textarea name=content rows=10 cols=50>--------------------
<%=dto.getContent()%></textarea>
     </td>
    </tr>
     <tr>
     <td width=20%>비밀 번호</td> 
     <td width=80%><input type=password name=pass size=15 maxlength=15 value="">
      등록시에는 비밀번호가 필요합니다.</td>
    </tr>
     <tr>
     <td colspan=2 height=5><hr size=1></td>
    </tr>
     <tr>
     <td colspan=2>
       <input type=Button value="등록" onClick="check()">
      <input type=reset value="취소"> 
      <input type=button value="뒤로" onClick="history.back()">
     </td>
    </tr> 
   </table>
  </td>
</tr>
</table>
</form> 
</center>
</body>
</html>
-----------------------------------  
3-3
Workspace : ~\JSP\EclipseWork
/BoardApp/WebContent/v2/ReplyProc.jsp

<%@page import="bean.v2.BoardDto"%>
<%@ page contentType="text/html; charset=EUC-KR"%>
<%request.setCharacterEncoding("euc-kr");%>
<jsp:useBean id="dao" class="bean.v2.BoardDao"/>
<jsp:useBean id="dto" class="bean.v2.BoardDto"/>
<jsp:setProperty name="dto" property="*"/>
<%
     int num = Integer.parseInt(request.getParameter("num"));
     BoardDto parentDto = dao.getBoard(num, "reply");
     dao.replyUpdatePos(parentDto);
     dto.setPos(parentDto.getPos());
     dto.setDepth(parentDto.getDepth());
     dao.replyBoard(dto);
     response.sendRedirect("List.jsp");
%>
----------------------------------- 
3-4
Workspace : ~\JSP\EclipseWork
/BoardApp/WebContent/v2/List.jsp

<%@page import="java.util.Vector"%>
<%@page import="bean.v2.BoardDto"%>
<%@ page contentType="text/html;charset=euc-kr" %>
<html>
<link href="style.css" rel="stylesheet" type="text/css">
<script>
     function check(){
          if(document.search.keyWord.value == ""){
               alert("검색어를 입력하세요.");
               document.search.keyWord.focus();
               return;
          }
          document.search.submit();
     }
     
     function read(num) {
          document.read.num.value = num;
          document.read.submit();
     }
</script>
<body>
<jsp:useBean id="dao" class="bean.v2.BoardDao"/>
<%!
     int totalRecord = 0;          // 전체 글의 갯수
     int numPerPage = 5;               // 한 페이지당 보여질 글의 갯수
     int pagePerBlock = 3;          // 한 블럭당 페이지 수 
     int totalPage = 0;               // 전체 페이지 갯수
     int totalBlock = 0;               // 전체 블럭 수
     int nowPage = 0;               // 현재 페이지 번호
     int nowBlock = 0;               // 현재 블럭 번호
     int beginPerPage = 0;          // 페이지당 시작 번호, 똑같은 글이 중복되서 보여주는 것을 방지
%>
<%
     String keyField = request.getParameter("keyField");
     String keyWord = request.getParameter("keyWord");
     if(keyField == null){
          keyField = "name";
          keyWord = "";
     }
     
     if(request.getParameter("reload")!=null){
          if(request.getParameter("reload").equals("true")){
               keyWord = "";
          }
     }
     Vector list = dao.getBoardList(keyField, keyWord);
     
     // 페이징 기능 구현
     totalRecord = list.size();
     totalPage = (int)Math.ceil((double)totalRecord/numPerPage);
     if(request.getParameter("nowPage") != null){
          nowPage = Integer.parseInt(request.getParameter("nowPage"));
     }
     if(request.getParameter("nowBlock") != null){
          nowBlock = Integer.parseInt(request.getParameter("nowBlock"));
     }
     beginPerPage = nowPage * numPerPage;
     
     totalBlock = (int)Math.ceil((double)totalPage/pagePerBlock);
%>
<center><br>
<h2>JSP Board</h2>

<table align=center border=0 width=80%>
<tr>
     <td align=left>Total : <%=totalRecord%> Articles(
          <font color=red>  <%=nowPage+1%> / <%=totalPage%> Pages </font>)
     </td>
</tr>
</table>

<table align=center width=80% border=0 cellspacing=0 cellpadding=3>
<tr>
     <td align=center colspan=2>
          <table border=0 width=100% cellpadding=2 cellspacing=0>
               <tr bgcolor=#D0D0D0 height=120%>
                    <td> 번호 </td>
                    <td width=80%> 제목 </td>
                    <td> 이름 </td>
                    <td> 날짜 </td>
                    <td> 조회수 </td>
               </tr>
               <%
                    if(list.size() == 0){
                         // 등록된 글이 없습니다.
                    }
               %>
               <%
                    if(list.size() != 0){
                         for(int i=beginPerPage;i<beginPerPage+numPerPage;i++){
                              if(i == totalRecord)
                                   break; 
                              BoardDto dto = (BoardDto)list.get(i);     
                    
               %>
               <tr height=120%>
                    <td><%=dto.getNum()%></td>
                    <td>
                    <%=dao.useDepth(dto.getDepth())%>
                    <%if(dto.getDepth()>0){ %>
                         <img src="../image/re.gif"/>
                    <%}%>
                    <a href="javascript:read('<%=dto.getNum()%>')"><%=dto.getSubject()%></a>
                    </td>
                    <td> <%=dto.getName()%> </td>
                    <td> <%=dto.getRegdate()%> </td>
                    <td> <%=dto.getCount()%> </td>
               </tr>
               <%          }
                    }%>
          </table>
     </td>
</tr>
<tr>
     <td><BR><BR></td>
</tr>
<tr>
     <td align="left">Go to Page 
     <%if(nowBlock > 0){%>
     <a href="List.jsp?nowBlock=<%=nowBlock-1%>&nowPage=<%=(nowBlock-1) * pagePerBlock%>">이전 <%=pagePerBlock%>개</a> :::&nbsp;&nbsp;
     <%}%>
     <%
          for(int i=0;i<pagePerBlock;i++){
               if(i+(nowBlock * pagePerBlock) == totalPage){                    
                    break;
               }
          %>
               <a href="List.jsp?nowPage=<%=i+(nowBlock * pagePerBlock)%>&nowBlock=<%=nowBlock%>"/><%=i+1+(nowBlock * pagePerBlock)%></a>&nbsp;&nbsp;
          <%
          }
     %>
     <%if(totalBlock > nowBlock+1){%>
     &nbsp;&nbsp;::: <a href="List.jsp?nowBlock=<%=nowBlock+1%>&nowPage=<%=(nowBlock+1) * pagePerBlock%>">다음 <%=pagePerBlock%>개</a>
     <%}%>
     </td>
     <td align=right>
          <a href="Post.jsp">[글쓰기]</a>
          <a href="List.jsp?reload=true">[처음으로]</a>
     </td>
</tr>
</table>
<BR>
<form action="List.jsp" name="search" method="post">
     <table border=0 width=527 align=center cellpadding=4 cellspacing=0>
     <tr>
          <td align=center valign=bottom>
               <select name="keyField" size="1">
                    <option value="name" <%if(keyField.equals("name")){%>selected="selected"<%}%>> 이름</option>
                    <option value="subject" <%if(keyField.equals("subject")){%>selected="selected"<%}%>> 제목</option>
                    <option value="content" <%if(keyField.equals("content")){%>selected="selected"<%}%>> 내용</option>
               </select>

               <input type="text" size="16" name="keyWord">
               <input type="button" value="찾기" onClick="check()">
               <input type="hidden" name="page" value= "0">
          </td>
     </tr>
     </table>
</form>
<form name="read" metho="post" action="Read.jsp">
     <input type="hidden" name="num" />
     <input type="hidden" name="keyWord" value="<%=keyWord%>" />
     <input type="hidden" name="keyField" value="<%=keyField%>" />
</form>
</center>
</body>
</html>
----------------------------------- 
3-5
Workspace : ~\JSP\EclipseWork
/BootStrap2/WebContent/HelloWorld.html

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
     <p>안녕하세요</p>
     <p>반갑습니다</p>
     <p>또 만나요</p>     
</body>
</html>
----------------------------------- 
3-6
Workspace : ~\JSP\EclipseWork
/BootStrap2/WebContent/HelloWorld_bootstrap.html

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
     <p>안녕하세요</p>
     <p>반갑습니다</p>
     <p>또 만나요</p>     
</body>
</html>
----------------------------------- 
3-7 
Workspace : ~\JSP\EclipseWork
/BootStrap2/WebContent/BootStrapDemo.html

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<style> 
     body {padding:30px}
</style>
</head>
<body>
     <p class="well">안녕하세요</p>
     <p class="lead">반갑습니다</p>
     <p class="alert">또 만나요</p>     
     
     <span class="icon-search"></span>검색
     
     <table class="table table-striped table-hover table-bordered">
          <tr><td>HTML</td></tr>
          <tr><td>CSS</td></tr>
          <tr><td>JavaScript</td></tr>
     </table>
     
     <div class="pagination pagination-centered">
          <ul>
               <li>처음</li>
               <li>1</li>
               <li>2</li>
               <li>다음 10개</li>
          </ul>
     </div>
</body>
</html>
-----------------------------------  
3-8 
Workspace : ~\JSP\EclipseWork
/BootStrap2/WebContent/layout/layout.html

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
<style>
     div{border: 1px solid red}
</style>
</head>
<body>
<div class="row">
     <div class="span7">
          <h1>제목</h1>
          <p>내용...<br/>내용...<br/>내용...<br/>내용...<br/>
          내용...<br/>내용...<br/>내용...<br/>내용...</p>
     </div>
     
     <div class="span2">
          <h2>사이드바</h1>
          <p>내용...<br/>내용...<br/>내용...</p>
     </div>
</div>

<div class="row">
     <div class="span3">
          <h1>카테고리</h1>
     </div>
     
     <div class="span7">
          <h1>제목</h1>
          <p>내용...<br/>내용...<br/>내용...<br/>내용...<br/>
          내용...<br/>내용...<br/>내용...<br/>내용...</p>
     </div>
     
     <div class="span2">
          <h2>사이드바</h1>
          <p>내용...<br/>내용...<br/>내용...</p>
     </div>
</div>
</body>
</html>
-----------------------------------  
3-9 
Workspace : ~\JSP\EclipseWork
/BootStrap2/WebContent/layout/fixedLayout.html

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
<style>
     
     [class*="span"]{
          background-color: gray;
          text-align: center;
          margin-top: 10px;
     }
</style>
</head>
<div class="container">
     <div class="row">
          <div class="span7">
               <h1>제목</h1>
               <p>내용...<br/>내용...<br/>내용...<br/>내용...<br/>
               내용...<br/>내용...<br/>내용...<br/>내용...</p>
          </div>
          
          <div class="span2">
               <h2>사이드바</h1>
               <p>내용...<br/>내용...<br/>내용...</p>
          </div>
     </div>
     <div class="row">
          <div class="span3">3</div>
          <div class="span4">4</div>
          <div class="span5">5</div>
     </div>
     <div class="row">
          <div class="span3">3</div>
          <div class="span6 offset3">6 3칸공백</div>
     </div>
     <div class="row">
          <div class="span12">
               <img src="../images/Desert.jpg"/>
          </div>
     </div>
</div>
<div class="row">
     <div class="span3">
          <h1>카테고리</h1>
     </div>
     
     <div class="span7">
          <h1>제목</h1>
          <p>내용...<br/>내용...<br/>내용...<br/>내용...<br/>
          내용...<br/>내용...<br/>내용...<br/>내용...</p>
     </div>
     
     <div class="span2">
          <h2>사이드바</h1>
          <p>내용...<br/>내용...<br/>내용...</p>
     </div>
</div>
</body>
</html>
-----------------------------------  
3-10 
Workspace : ~\JSP\EclipseWork
/BootStrap2/WebContent/layout/fluidLayout.html

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
<style>
     
     [class*="span"]{
          background-color: gray;
          text-align: center;
          margin-top: 10px;
     }
</style>
</head>
<div class="container">
     <div class="row">
          <div class="span7">
               <h1>제목</h1>
               <p>내용...<br/>내용...<br/>내용...<br/>내용...<br/>
               내용...<br/>내용...<br/>내용...<br/>내용...</p>
          </div>
          
          <div class="span2">
               <h2>사이드바</h1>
               <p>내용...<br/>내용...<br/>내용...</p>
          </div>
     </div>
     <div class="row">
          <div class="span3">3</div>
          <div class="span4">4</div>
          <div class="span5">5</div>
     </div>
     <div class="row">
          <div class="span3">3</div>
          <div class="span6 offset3">6 3칸공백</div>
     </div>
     <div class="row">
          <div class="span12">
               <img src="../images/Desert.jpg"/>
          </div>
     </div>
</div>

<h1>가변 길이</h1>
<div class="container-fluid">
     <div class="row-fluid">
          <div class="span7">
               <h1>제목</h1>
               <p>내용...<br/>내용...<br/>내용...<br/>내용...<br/>
               내용...<br/>내용...<br/>내용...<br/>내용...</p>
          </div>
          
          <div class="span2">
               <h2>사이드바</h1>
               <p>내용...<br/>내용...<br/>내용...</p>
          </div>
     </div>
     <div class="row-fluid">
          <div class="span3">3</div>
          <div class="span4">4</div>
          <div class="span5">5</div>
     </div>
     <div class="row-fluid">
          <div class="span3">3</div>
          <div class="span6 offset3">6 3칸공백</div>
     </div>
     <div class="row-fluid">
          <div class="span12">
               <img src="../images/Desert.jpg"/>
          </div>
     </div>
</div>


<div class="row">
     <div class="span3">
          <h1>카테고리</h1>
     </div>
     
     <div class="span7">
          <h1>제목</h1>
          <p>내용...<br/>내용...<br/>내용...<br/>내용...<br/>
          내용...<br/>내용...<br/>내용...<br/>내용...</p>
     </div>
     
     <div class="span2">
          <h2>사이드바</h1>
          <p>내용...<br/>내용...<br/>내용...</p>
     </div>
</div>
</body>
</html>
-----------------------------------  
3-11 
Workspace : ~\JSP\EclipseWork
/BootStrap2/WebContent/layout/responsiveDesign.html

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="../bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet">
<style>
     
     [class*="span"]{
          background-color: gray;
          text-align: center;
          margin-top: 10px;
     }
</style>
</head>
<div class="container">
     <div class="row">
          <div class="span7">
               <h1>제목</h1>
               <p>내용...<br/>내용...<br/>내용...<br/>내용...<br/>
               내용...<br/>내용...<br/>내용...<br/>내용...</p>
          </div>
          
          <div class="span2">
               <h2>사이드바</h1>
               <p>내용...<br/>내용...<br/>내용...</p>
          </div>
     </div>
     <div class="row">
          <div class="span3">3</div>
          <div class="span4">4</div>
          <div class="span5">5</div>
     </div>
     <div class="row">
          <div class="span3">3</div>
          <div class="span6 offset3">6 3칸공백</div>
     </div>
     <div class="row">
          <div class="span12">
               <img src="../images/Desert.jpg"/>
          </div>
     </div>
</div>

<h1>가변 길이</h1>
<div class="container-fluid">
     <div class="row-fluid">
          <div class="span7">
               <h1>제목</h1>
               <p>내용...<br/>내용...<br/>내용...<br/>내용...<br/>
               내용...<br/>내용...<br/>내용...<br/>내용...</p>
          </div>
          
          <div class="span2">
               <h2>사이드바</h1>
               <p>내용...<br/>내용...<br/>내용...</p>
          </div>
     </div>
     <div class="row-fluid">
          <div class="span3">3</div>
          <div class="span4">4</div>
          <div class="span5">5</div>
     </div>
     <div class="row-fluid">
          <div class="span3">3</div>
          <div class="span6 offset3">6 3칸공백</div>
     </div>
     <div class="row-fluid">
          <div class="span12">
               <img src="../images/Desert.jpg"/>
          </div>
     </div>
</div>


<div class="row">
     <div class="span3">
          <h1>카테고리</h1>
     </div>
     
     <div class="span7">
          <h1>제목</h1>
          <p>내용...<br/>내용...<br/>내용...<br/>내용...<br/>
          내용...<br/>내용...<br/>내용...<br/>내용...</p>
     </div>
     
     <div class="span2">
          <h2>사이드바</h1>
          <p>내용...<br/>내용...<br/>내용...</p>
     </div>
</div>
</body>
</html>
-----------------------------------  
3-12 
Workspace : ~\JSP\EclipseWork
/BootStrap2/WebContent/layout/responsiveDesignClass.html

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="../bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet">
<style>
     /*div{border:1px solid red}*/
     [class*="span"]{
          background-color:gray;
          text-align:center;
          margin-top:10px
     }
</style>
</head>
<body>
     <div class="container">
          <div class="row">
               <div class="span4">
                    <div class="visible-phone">휴대폰 환경에서만 보여짐</div>
               </div>
               <div class="span4">
                    <div class="visible-tablet">태블릿 환경에서만 보여짐</div>
               </div>
               <div class="span4">
                    <div class="visible-desktop">데스크 탑 환경에서만 보여짐</div>
               </div>
          </div>
     </div>
     
     <div class="container">
          <div class="row">
               <div class="span4">
                    <div class="hidden-phone">휴대폰 환경에서만 숨겨짐</div>
               </div>
               <div class="span4">
                    <div class="hidden-tablet">태블릿 환경에서만 숨겨짐</div>
               </div>
               <div class="span4">
                    <div class="hidden-desktop">데스크 탑 환경에서만 숨겨짐</div>
               </div>
          </div>
     </div>
</body>
</html>
-----------------------------------  
3-13 
Workspace : ~\JSP\EclipseWork
/BootStrap2/WebContent/BaseCss/code.html

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="../bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet">
<style>
     /*div{border:1px solid red}*/
     [class*="span"]{
          background-color:gray;
          text-align:center;
          margin-top:10px
     }
</style>
<body>
코드는 인라인(<cope>&lt;span&gt;안녕&lt;/span&gt;</cope>)으로 표시됩니다
<hr/>
<pre class="pre-scrollable">
&lt;span&gt;안녕&lt;/span&gt;
&lt;span&gt;안녕&lt;/span&gt;
&lt;span&gt;안녕&gt;/span&gt;
&lt;span&gt;안녕&lt;/span&gt;
&lt;span&gt;안녕&lt;/span&gt;
&lt;span&gt;안녕&lt;/span&gt;
</pre>
</body>
</html>
-----------------------------------  
3-14 
Workspace : ~\JSP\EclipseWork
/BootStrap2/WebContent/BaseCss/form.html

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h2>기본 폼</h2>
<div class="container">
     <div class="row">
          <div class="span12">
               <form>
                    <fieldset>
                         <legend>범례</legend>
                         <label>레이블</label> <input type="text" placeholder="플레이스 홀더">
                         <span class="help-block">샘플 도움말 텍스트</span> 
                         <label class="checkbox"> 
                              <input type="checkbox"> 체크 박스 
                         </label>
                         <button type="submit" class="btn">전송 버튼</button>
                    </fieldset>
               </form>
          </div>
     </div>
     
     <div class="row">
          <div class="span12">
               <h2>폼 레이아웃 옵션</h2>
               <h3>1. 검색 폼</h3>
               <form class="form-search">
                    <input type="text" class="input-large search-query" /> <input
                         type="submit" class="btn" />
               </form>

               <h3>2. 인라인 폼</h3>
               <form class="form-inline">
                    <input type="text" class="input-small" placeholder="이메일" /> <input
                         type="password" class="input-small" placeholder="암호" /> <label
                         class="checkbox"> <input type="checkbox" /> 체크 박스
                    </label>
                    <button type="submit" class="btn">가입</button>
               </form>

               <h3>3. 수평 폼</h3>
               <form class="form-horizontal">
                    <div class="control-group">
                         <label class="control-label">이메일</label>
                         <div class="controls">
                              <input type="text" placeholder="이메일">
                         </div>
                    </div>
                    <div class="control-group">
                         <label class="control-label">패스워드</label>
                         <div class="controls">
                              <input type="password" placeholder="패스워드">
                         </div>
                    </div>
                    <div class="control-group">
                         <div class="controls">
                              <label class="checkbox"> 
                                   <input type="checkbox">체크박스
                              </label>
                              <button type="submit" class="btn">가입</button>
                         </div>
                    </div>
               </form>
          </div>
     </div>
</div>
</body>
</html>
-----------------------------------  
3-15 
Workspace : ~\JSP\EclipseWork
/BootStrap2/WebContent/BaseCss/table.html

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="../bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet">
<style>
.table-hover tbody tr:hover td,
.table-hover tbody tr:hover th {background-color: pink;}
</style>
</head>
<body>
<div class="span12">
     <table class="table table-bordered table-hover table-condensed table-striped">
          <caption>강의 리스트</caption>
          <thead>
               <tr><th>구분</th><th>제목</th></tr>     
          </thead>
          <tbody>
               <tr><td>프로그래밍 언어</td><td>C언어</td></tr>
               <tr><td>프로그래밍 언어</td><td>C++</td></tr>
               <tr><td>프로그래밍 언어</td><td>C#</td></tr>
               <tr><td>프로그래밍 언어</td><td>JAVA</td></tr>
          </tbody>
     </table>
</div>
</body>
</html>
-----------------------------------  
###################################
4. 과제
-----------------------------------
4-1
----------------------------------- 
4-2
----------------------------------- 
4-3
----------------------------------- 
4-4
----------------------------------- 
4-5
-----------------------------------
###################################
5. 과제 해결
-----------------------------------
5-1
-----------------------------------
5-2
----------------------------------- 
5-3
-----------------------------------
5-4
-----------------------------------
###################################
6. 기타
----------------------------------- 
----------------------------------- 


저작자표시 비영리 변경금지 (새창열림)

'OpenFrameWork' 카테고리의 다른 글

오픈프레임워크_Day50  (0) 2015.05.26
오픈프레임워크_Day49  (0) 2015.05.22
오픈프레임워크_Day47  (0) 2015.05.20
오픈프레임워크_Day46  (0) 2015.05.19
오픈프레임워크_Day45  (0) 2015.05.18
,

티스토리툴바