이안의 평일코딩

국비 CSS - DB연동 본문

Front-end/CSS & SASS

국비 CSS - DB연동

이안92 2020. 9. 15. 10:58
반응형

2020.09.15(화)

 

css1.jsp

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<%-- 
	1) 프로젝트 생성
		= Java Resources => JRE System Library => 3DK변경
		= WEB-INF => lib => ojdbc6.jar
--%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<!-- 내부 CSS -->
<style type="text/css">
/*
	div#aaa
	#aaa
*/
#aaa {
	/*크기*/
	width:200px;
	height:200px;
	/*
	브라우저
	===============================
	margin
		=======================
			
			AAA
			padding
		=======================
	
	===============================
	padding : (top) (left) (bottom) (right)
	padding : 20px
			  20px (20px) (20px) (20px)
	padding : 50px 20px
			  50px 20px (50px) (20px)
	padding : 50px 20px 30px (20px)
			  top => bottom
			  left => right
	===============================
	 margin, padding => 화면 분할
	*/
	padding: 20px;
	border: 1px solid red;
	margin: 50px;
	/* 글자 관련
		font-size : 글자 크기
		font-weight : bold
		font-family : 글꼴 ==> 외부에서 불러서 사용 (google)
		
		사이트 : 같은 글꼴을 사용 (google폰트 사용)
	*/
	font-size: 12pt; /* 폰트의 기본: 10pt */
	font-weight: bold;
	font-family: 궁서체;
}
</style>
</head>
<body>
	<!--  화면 분할 -->
	<!-- 
	같은 태그명을 구분할때 : id(한개만 이용), class(같은 태그가 여러개를 동시에 제어)
	 -->
	<div id="aaa">CSS (Box-Model):내부 CSS</div> <%-- display : block --%>
	<%-- 인라인 --%>
	<%--
	 순서 (지원, 우선순위)
	 외부 CSS
	 내부 CSS
	 인라인
	 	===> bootstrap
	 --%>
	 <!-- 
	 	solid
	 	dotted
	 	==> 카드만들기
	  -->
	<div style="border: 5px solid green;width:100px;height:100px"></div>
	<div style="border: 5px dashed green;width:100px;height:100px"></div>
	<div style="border: 5px dotted green;width:100px;height:100px"></div>
	<div style="border: 5px double green;width:100px;height:100px"></div>
	<div style="border: 5px ridge green;width:100px;height:100px"></div>
	<div style="border: 5px outset green;width:100px;height:100px"></div>
	<div style="border: 5px groove green;width:100px;height:100px"></div>
</body>
</html>

css2.jsp

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<%--
  가상 Selector
  태그:가상 (예 a:hover,p:active)
 li:nth-child(1) (2) (3)... => 메뉴제작 
 --%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<style type="text/css">
/*
    원래상태 복귀
*/
a:link {
	color:darkgrey;
}
a:visited {
	color:green;
}
/*
     기억  (마우스)
*/
a:hover{
    color:orange;
}
/*
   마우스 클릭 
*/
p:active {
	color:red;
}
/*
     박스안에 마우스 클릭 => focus
*/
input:focus {
	background: blue;
}
/*
     table , dl , li => 순서를 지정해서 찾는 방법 
     nth-child(1~)
     
        메뉴 
*/
li:nth-child(1) {
  color:red;	
}
li:nth-child(2) {
  color:blue;	
}
li:nth-child(3) {
  color:green;	
}
/*
    데이터 수집 (Jsoup)
*/
tr:nth-child(1) {
   background-color: orange;	
}
tr:nth-child(2n) {
   background-color: RGB(255,255,200);	
}
</style>
</head>
<body>
  <!-- 사이트 이동 (링크 태그) -->
  <!-- 
     a : 인라인 속성 => 옆에 출력 
     
     div , ul , ol , h1~h6 => block 
     a input img  => inline
   -->
  <a href="http://daum.net" style="display: block;">다음</a>
  <%-- \n을 포함한다 (block) --%>
  <a href="http://naver.net" style="display: block">네이버</a>
  <p>클릭하세요</p>
  <input type=text size=15>
  <ul>
    <li>자바</li>
    <li>오라클</li>
    <li>스프링</li>
    <li>MyBatis</li>
    <li>자바스트립트</li>
    <li>Ajax</li>
    <li>React</li>
  </ul>
  <table border=1 bordercolor=black width=500>
    <tr>
      <th>이름</th>
      <th>국어</th>
      <th>영어</th>
      <th>수학</th>
    </tr>
    <tr>
      <td>홍길동</td>
      <td>89</td>
      <td>90</td>
      <td>78</td>
    </tr>
    <tr>
      <td>심청이</td>
      <td>89</td>
      <td>90</td>
      <td>78</td>
    </tr>
    <tr>
      <td>박문수</td>
      <td>89</td>
      <td>90</td>
      <td>78</td>
    </tr>
  </table>
</body>
</html>

 

css3.jsp (1일차 EmpDAO.java이용)

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR" import="java.util.*,com.sist.dao.*"%>
<%
   // 시작 => 출력할 데이터를 읽어 온다 
   EmpDAO dao=new EmpDAO();
   ArrayList<EmpVO> list=dao.empListData();
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<style type="text/css">
#wrap{
   width: 900px;
   border:1px solid red;
   height:700px;
}
.row{
   width:700px;
   /* center를 사용하지 않고 margin을 이용해서 가운데 정렬 : 0px auto*/
   margin: 0px auto;
}
h1 {
  text-align: center;
}
/*테이블 디자인 설정*/
#sawon{
  border:1px solid black;
  width:600px;
  border-collapse: collapse; /* 구분선 사라짐 */
}
#sawon tr:nth-child(1){
  background-color: blue;
  color:white;
}
#sawon td{
  /*정렬*/
   text-align: center;
   font-family: 맑은 고딕;
}
/*짝수만*/
#sawon tr:nth-child(2n) {
  	background-color: RGB(255,255,200);
}
</style>
<!-- 
   만약 다음주 (온라인)==> 원격 
 -->
</head>
<body>
   <div id="wrap">
     <div class="row">
       <h1>사원 목록</h1>
       <table id="sawon">
          <tr>
           <th>사번</th>
           <th>이름</th>
           <th>직위</th>
           <th>입사일</th>
           <th>급여</th>
          </tr>
          <%-- 실제 데이터 출력 위치 --%>
          <%
             for(EmpVO vo:list)
             {
          %>
               <tr>
                 <td><%=vo.getEmpno() %></td>
                 <td><%=vo.getEname() %></td>
                 <td><%=vo.getJob() %></td>
                 <td><%=vo.getHiredate().toString() %></td>
                 <td><%=vo.getSal() %></td>
               </tr>
          <%
             }
          %>
       </table>
     </div>
   </div>
</body>
</html>

 

css4.jsp

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<!-- 
  1. 간격
     margin , padding
  2. 정렬
     text-align: left , right , center
  3. \n , \n없는 경우
     display:block , display:inline
  4. font 관련 
     font-size
     font-family
     font-weight
  5. 색상 
     color (글자 색상)
     background-color(바탕색)
  6. 넓이  : width
  7. 크기  : height
  
  => text 관련
     => 웹사이트 => 문자열 
     color 지정 
     1)글자 색상 : color 
     => color:red
     => color:RGB(255,255,255)
     => color:RGBA()
     2)text-decoration:none , underline
     ***3)text-align:left,center,right
     4)text-shadow:none|(가로거리) 세로거리 번짐정도 색상
     5)text-transform : 대문자 변환,소문자변환
     ***6) white-space: 내용보기 , 댓글 
     white-space : normal|nowrap|pre(줄바꿈이 없다)|pre-line|pre-wrap(자동 줄바꿈)
         ==================
                  뫙ㅁ옴옴옴오미왐이ㅗㅁ이
                  ㅗㅁㅇ미옴ㅇ밍몽묑묑
         ==================
     ===> fixed 고정 
  => img 관련 
  
  => div 관련
  
  => span 관련 
  
  => 애니메이션 
  
  => CSS3
      = 브라우저마다 속성명이 다르다 
     
 -->
<style type="text/css">
h1 {
   color:rgb(0,200,0);/*그림판에서 색상을 선택 => RGB css파일을 제작하면 색상선택*/
}
h2 {
    color:blue;
}
h3 {
   text-decoration: underline;
   /*a 태그는 기본 : underline*/
}
.t {
   text-transform: uppercase;/*대문자*/
}
.t1 {
    text-transform: capitalize;/*INITCAP*/
}
.t2 {
      text-transform: lowercase;/*소문자 출력*/
}
#h1{
   color: orange;
}
#h2{
     text-shadow: 5px 5px 3px #f00;
}
#h3{
   color:#FFF;/*흰색*/
   text-shadow:7px -7px 5px #000;
}
</style>
</head>
<body>
 <!-- color -->
 <h1>10000개의 레시피</h1>
 <h2>레시피종류</h2>
 <h3>탕/국</h3>
 <ul>
   <li class="t">java</li>
   <li class="t">oracle</li>
   <li class="t1">spring</li>
   <li class="t2">MYBATIS</li>
 </ul>
 <h1 id="h1">HTML&CSS</h1>
 <h1 id="h2">HTML&CSS</h1>
 <h1 id="h3">HTML&CSS</h1>
 <table border=1 bordercolor=black width=100>
   <tr>
    <td>
    <pre style="white-space: pre-wrap;">
    fslafjkasjflasfjklasjfsaljfsakljfjasklfasjfjkalfhfhfhfhfhfhfhf
    dgdsdgdgdgdgdgdgdgdgdgfhfhfhf
    </pre>
    </td>
   </tr>
 </table>
</body>
</html>

 

css5.jsp

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR" import="java.util.*,com.sist.dao.*"%>
<%
   // 데이터 읽기
   EmpDAO dao=new EmpDAO();
   ArrayList<MovieVO> list=dao.movieListData();
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<style type="text/css">
#list-table{
  border: 1px solid black;
  border-collapse: collapse;
}
#list-table tr:nth-child(1) {
	background-color: #999;
	font-family: 맑은 고딕
}
h1 {
     text-shadow: 5px 5px 3px #0f0;
}
.container{
  width:1300px;
  border:1px solid red;
}
.row {
   width:1200px;
   margin: 0px auto;
}
h1 {
   text-align:center;
}
.aaa {
  width:30px;
  height:30px;
  border-radius: 30px;
}
#list-table td{
  border-bottom-width: 1px;
  border-bottom-style: dotted;
  border-bottom-color: black;
  font-family: 맑은 고딕;
  font-size: 9pt;
}
#list-table .dataTr:hover{
   /*background-color: FC6;*/
   cursor: pointer;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
// Jquery => JavaScript 라이브러리
/*
 *  $(function(){  ==> jquery main ==> window.onload
	 
     )}
 */
$(function(){
	// 자바스크립트 => 모든 태그를 클릭해서 처리가 가능 
	// $(selector) => tag명 , id명 , class명
	// $('h1') ==> $('#data') ==> $('div .dataTr')
	$('.dataTr').click(function(){
		// 클릭시마다 영화번호를 가지고 온다 
		var no=$(this).attr("value");
		//alert(no);
		/*
			$.ajax({
				type:'post', = get/post
				url:'detail.jsp', = 전송받을 주소
				data:{"no":no}, = 보내주는 값
				success:function(result) // 정상 수행시에 처리
				{
					$('#detail').html(result);
				}
			})
		*/
		$.ajax({
			type:'post',
			url:'detail.jsp',
			data:{"no":no},
			success:function(result)
			{
				$('#detail').html(result);
			}
		})
	});
});
</script>
</head>
<body>
  <%--
       id , class => 앞에 숫자를 사용할 수 없다
       
       JSP => 서버를 통해서 변경된 HTML을 출력 => AJAX , Modal창
   --%>
  <div class="container">
    <div class="row">
     <h1>영화목록</h1>
     <table width=1200>
       <tr>
        <td><%--목록 출력 --%>
          <table id="list-table" width=60%>
            <tr>
             <th>번호</th>
             <th></th>
             <th>제목</th>
             <th>감독</th>
             <th>장르</th>
            </tr>
            <%
               for(MovieVO vo:list)
               {
            %>
                  <tr class="dataTr" value="<%=vo.getMno()%>">
                    <td><%=vo.getMno() %></td>
                    <td>
                      <img src="<%=vo.getPoster()%>" class="aaa">
                    </td>
                    <td><%=vo.getTitle() %></td>
                    <td><%=vo.getDirector() %></td>
                    <td><%=vo.getGenre() %></td>
                  </tr>
            <%
               }
            %>
          </table>
        </td>
        <td id="detail" valign="top"><%--상세 보기 --%>
          
        </td>
       </tr>
     </table>
    </div>
  </div>
</body>
</html>

 

css6.jsp

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<!-- 내부 스타일 (한개의 파일에서만 적용) -->
<style type="text/css">
.book1 {
   list-style-type: lower-alpha;
}
.book2 {
   list-style-type: upper-roman;
}
.book3 {
  list-style-type: square;/*이미지 첨부가 가능*/
  /*display: inline-block;*/
}
.book3 li{
  /*display: inline;*/
}
</style>
</head>
<body>
  <%--
       메뉴 ==> 부메뉴 (span)
    ol (order list)
    li (list item)
    => block 
   --%>
  <ol class="book1">
    <li>자바의 정석</li>
    <li>오라클의 정석</li>
  </ol>
  <ol class="book2">
    <li>자바의 정석</li>
    <li>오라클의 정석</li>
  </ol>
  <ul class="book3">
    <li>자바의 정석</li>
    <li>오라클의 정석</li>
  </ul>
</body>
</html>

detail.jsp

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR" import="com.sist.dao.*"%>
<%
	String no = request.getParameter("no");
	EmpDAO dao = new EmpDAO();
	MovieVO vo = dao.movieDetailData(Integer.parseInt(no));
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
 <table width=400>
  <tr>
   <td rowspan=4 width=30% align=center>
    <img src="<%=vo.getPoster() %>" width=250 height=>
   </td>
   <td colspan="2"><%=vo.getTitle() %></td>
  </tr>
  <tr>
   <td>감독</td>
   <td><%=vo.getDirector() %></td>
  </tr>
  <tr>
   <td>출연</td>
   <td><%=vo.getActor() %></td>
  </tr>
  <tr>
   <td>장르</td>
   <td><%=vo.getGenre() %></td>
  </tr>
  <tr>
   <td colspan="3" valign="top"><%=vo.getStory() %></td>
   <td></td>
  </tr>
 </table>
</body>
</html>

 

 

css7.jsp

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<%--
  이미지 제어 
 --%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<style type="text/css">
.image {
  width:500px;
  height:500px;
  border:2px solid red;
  background-image: url('a.jpg');
  background-size: cover;/*이미지를 축소/확대*/
}
h1 {
  font-family: sans-serif;
  text-align: center;
  padding-top: 200px;
  color:white;
}
</style>
</head>
<body>
  <div class="image">
    <h1>Hello CSS!!</h1>
  </div>
</body>
</html>

 

====================================================

css1.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%--
     1) CSS 작업 
              1.외부 CSS,2.내부 CSS,3.인라인 CSS
              => BootStrap (twitter) = 반응형 (CSS 라이브러리)
     2) JavaScript 
              1. 라이브러리 (Jquery)
     3) JSP => MVC
              1. 라이브러리 (Spring)
              
     4) JDBC => 오라클 연결 
              1. MyBatis
              
     ==> Spring 기반(MVC) => Jquery => Mybatis (XML)
     
     CSS
     ====
       1) 선택자 => bootstrap (class)
          id
          <a href="#" id="aaa"> : id는 태그당 한개만 지정
          class
          <a href="" class="aaa bbb ccc">
                   태그명  
       2) 가상
                   태그명:선택자 (a:hover)
          id명:선택자 (#aaa:hover)
          class:선택자 (.data:hover)
          
          ==> Jquery (태그를 제어하는 프로그램) => DOM(Document Object Model)
          ==> Jsoup (태그 => 선택자) , reactjs,vuejs
      ====================    
      3) MVC(JSP) 기반  
         MyBatis 
         Ajax 
         reactjs 
      ==================== 
--%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.news{
  background-color:#0094ff;
  background-clip: padding-box;/*배경 적용범위  : border-box , content-box padding-box*/
  width:80%;
  padding: 15px;
  border: 1px solid black;
  color:white;
}
</style>
</head>
<body>
    <div class="news">
        이날 MLB닷컴에 따르면 김광현은 내셔널리그 사상 처음으로 4경기 연속 5이닝 3피안타 이하, 
        비자책을 기록한 선수가 됐다.
        개막전을 마무리 투수로 시작한 김광현은 팀 내 신종 코로나바이러스 감염증(코로나19) 
        확진자가 나오면서 선발로 보직이 바뀌었다.
        그는 빅리그 선발 데뷔전이었던 8월 17일 시카고 컵스전에서 3⅔이닝 2피안타(1피홈런) 1실점으로 호투했고, 
        이후 무서운 기세를 보이고 있다.
    8월 23일 신시내티 레즈전에서 6이닝 3피안타 3탈삼진 무실점 완벽투로 데뷔 첫 승을 수확했고, 
    8월 28일 피츠버그 파이어리츠전에서 6이닝 3피안타 1볼넷 3탈삼진 1실점(비자책점)으로 잘 던졌다.
    </div>
</body>
</html>

 

css2.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
/*
   <img src="" width=100%> => height까지 결정 
   1) float , z-index...
*/
.image {
   width:500px;
   height:500px;
   border:1px solid red;
   background: url('b.jpg') no-repeat left top;
   /*background-size: auto;*/
   /*background-size: 100px 200px;*/
   /* background-size:40% 60% */
   /* background-size: contain; */
   /* background-size: 100% 100%; */
   background-size: cover;
}
</style>
</head>
<body>
  <div class="image"></div>
</body>
</html>

 

css3.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
/*
   공통부분을 먼저 처리 
   태그마다 다른 속성을 처리 
*/
.box1 {
  width:400px;
  height: 100px;
  background: #ccffcc;
}
.box2 {
   width:600px;
   height: 100px;
   background: #ccccff;
   padding: 50px;
}
/*공통으로 적용하는 부분*/
div{
  margin: 10px;
}
</style>
</head>
<body>
  <div class="box1">
  
  </div>
  <div class="box1">
  
  </div>
  <div class="box2">
   <h1>Hello</h1>
  </div> 
  <div class="box2">
  
  </div>
</body>
</html>

 

css4.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%--
   inline / block
 --%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
/*가로 (img), 세로 */
.inline img {
   width:100px;
   height:150px;
   display:inline;
   margin: 10px;/* top=10 left=10 bottom=10 right=10*/
}
.block img{
   width:100px;
   height:150px;
   display:block;
   margin: 10px;
}
nav {
   background-color: #999;
}
nav ul li{
  display: inline-block;
  margin: 20px;
  /* color:white; */
}
a {
    text-decoration: none;
    color:white;
    font-family: 맑은 고딕;
}
a:hover{
   text-decoration: underline;
   color:green;
   font-family: 맑은 고딕;
}
div {
  width: 100px;
  height: 100px;
  margin: 30px;
  display: inline-block;
  /*HTML5 => 테이블 사용을 금지 권장*/
}
</style>
</head>
<body>
  <!-- <div class="inline">
   <img src="b.jpg">
   <img src="b.jpg">
   <img src="b.jpg">
  </div>
  <div class="block">
   <img src="b.jpg">
   <img src="b.jpg">
   <img src="b.jpg">
  </div> -->
  <!-- 
     header 
     section
     aside
     footer
     nav
     
     =========================================
                 header(로고) 해당이미지
     =========================================
                 nav (메뉴)
     =====================|====================
                          |
                          |
          내용 (section)        |  부가설명(날씨) aside
                          |
                          |
     =========================================
                                회사정보 (footer)
     =========================================
     
   -->
  <nav><!-- 메뉴 -->
    <ul>
      <li><a href="#">영화</a></li>
      <li><a href="#">음악</a></li>
      <li><a href="#">맛집</a></li>
      <li><a href="#">레시피</a></li>
      <li><a href="#">쇼핑몰</a></li>
    </ul>
  </nav>
  <div style="background: green"></div>
  <div style="background: red"></div>
  <div style="background: blue"></div>
</body>
</html>
반응형

'Front-end > CSS & SASS' 카테고리의 다른 글

[CSS] 우선순위 배치 Navbar 가장 최상단으로 올리기  (0) 2021.05.12
[CSS in JS] Styled-Components란?  (0) 2021.03.09
SASS/SCSS 기초 문법 총정리  (0) 2021.01.01
국비 CSS - 화면분할  (0) 2020.09.17
국비 CSS - Selector  (0) 2020.09.14
'Front-end/CSS & SASS' Related Articles more
Comments