본문 바로가기
코딩/수업 정리

20.12.31 Thu [028]

by 6^6 2020. 12. 31.
728x90

 

 

 

 

 

 

실전 HTML5 & CSS동영상강좌_09강_CSS 기본-IV

 

↓제대로 출력안되니까 다시 확인 first.html파일임

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title></title>
<style>
#wrap {
	width: 800px;
	margin: 0 auto;
}
 
#header {
	border-bottom: 1px solid #cccccc;
}
 
#content p:first-child::selection { /* 이부분이 드래그하면 다른색*/
	background-color: blue;
	color: yellow
}
 
#history2:first-letter, #history1:first-letter {
	font-size: 2em;
}
 
#histroy2:first-line, #history1:first-line {
	font-weight: bold;
	color: #2160d1;
}
 
#footer ul {
	overflow: hidden;
	border: 2px solid #cccccc;
}
 
#footer ul li {
	list-style: none;
	float: left;
	padding: 20px;
}
</style>
</head>
<body>
	<div id="wrap">
		<div id="header">
			<h1>설립개요</h1>
		</div>
		<div id="content">
			<p>중소기업 지원업무의 전문성과 효율성을 확보하고 중소기업에 대한 기술, 경영, 인력 등의 종합지원체계를
				구축함으로써 중소기업의 경쟁력 제고를 위해 설립된 서울산업진흥원은 중소기업의자생력을 키우고 안정적인 경영여건을 조성하기
				위하여 끊임없이 노력하고 있습니다.</p>
			<p id="history2">
				2014 04월 09일<br />서울산업진흥원 사명변경06월 30일 서울산업진흥원 상암DMC 이전
			</p>
			<p id="history1">
				2013 01월 12일<br />다누리 시민청 개관05월 09일 꿈꾸는청년가게 명동점 개관05월 10일 큐비드 광화문
				개관06월 21일 다누리 강남점 개관07월 20일 서울크리에티브랩 개관08월 27일 다누리 성북점 개관
			</p>
		</div>
		<div id="footer">
			<ul>
				<li><img
					src="http://www.sba.seoul.kr/kr/images/footer/f_logo.png"></li>
				<li><img
					src="http://www.sba.seoul.kr/kr/images/footer/copyright.png"></li>
			</ul>
		</div>
	</div>
</body>
</html>

<!DOCTYPE html>
 
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
 
        #wrap {
            width:800px;
            margin:0 auto;
        }
 
        #header {
            border-bottom:1px solid #cccccc;
        }
 
        #content a {
            text-decoration:none;
        }
 
        #content a::after {
            content: ' - ' attr(href);
        }
 
        #footer ul {
            overflow:hidden;
            border:2px solid #cccccc;
        }
 
        #footer ul li {
            list-style:none;
            float:left; padding:20px;
        }
 
    </style>
</head>
<body>
    <div id="wrap">
 
        <div id="header">
            <h1>weekly connect website</h1>
        </div>
 
        <div id="content">
            <ul>
                <li><a href="http://www.sba.seoul.kr" target="_blank">서울산업진흥원</a></li>
                <li><a href="http://wiz.center" target="_blank">위즈센터</a></li>
                <li><a href="http://www.yahoo.com" target="_blank">야후</a></li>
                <li><a href="http://www.google.com" target="_blank">구글</a></li>
            </ul>
        </div>
 
        <div id="footer">
            <ul>
                <li><img src="http://www.sba.seoul.kr/kr/images/footer/f_logo.png"></li>
                <li><img src="http://www.sba.seoul.kr/kr/images/footer/copyright.png"></li>
            </ul>
        </div>
 
    </div>
 
</body>
</html>

        #content a::after {
            content: ' - ' attr(href);
        }// 여기서 #content랑 밑에 content는 다르다! 

 

 

뒤에 targer="_bland"의미

_blank
새 윈도우 창을 열어서, 웹페이지를 엶.

_self
현재 윈도우창에서 링크된 웹페이지 엶.

_parent // 아직 안배움
현재 프레임의 부모 프레임에서 새웹페이지가 열립니다.
만약 어떤 창 A에서 창 B를 새로 열었습니다. 그런데 창 B에서 _parent로 창을 열면 창 A에서 열리게 되는 것이죠.

_top //아직 안배움
최상위 프레임에서 열립니다. _parent와 비슷한데요. _parent는 바로 이전창(부모창)에서 열리는 반면
_top은 최상위( 가장 최고 부모)창에서 열립니다.

 

<!DOCTYPE html>
 
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
#wrap {
	width: 800px;
	margin: 0 auto;
}
 
#header {
	border-bottom: 1px solid #cccccc;
}
 
#content a {
	text-decoration: none;
}
 
#content a::after {
	content: ' - ' attr(href);
}
 
#content li:not(.fa) {
	background-color: #ffd800;
}
 
#footer ul {
	overflow: hidden;
	border: 2px solid #cccccc;
}
 
#footer ul li {
	list-style: none;
	float: left;
	padding: 20px;
}
</style>
</head>
<body>
	<div id="wrap">
 
		<div id="header">
			<h1>weekly connect website</h1>
		</div>
 
		<div id="content">
			<ul>
				<li><a href="http://www.sba.seoul.kr" target="_blank">서울산업진흥원</a></li>
				<li class = "fa"><a href="http://wiz.center" target="_blank">위즈센터</a></li>
				<li><a href="http://www.yahoo.com" target="_blank">야후</a></li>
				<li class = "fa"><a href="http://www.google.com" target="_blank">구글</a></li>
			</ul>
		</div>
 
		<div id="footer">
			<ul>
				<li><img
					src="http://www.sba.seoul.kr/kr/images/footer/f_logo.png"></li>
				<li><img
					src="http://www.sba.seoul.kr/kr/images/footer/copyright.png"></li>
			</ul>
		</div>
 
	</div>
 
</body>
</html>

#content li:not(.fa) {
background-color: #ffd800;
}

<li class = "fa"><a href="주소값">

<li><a href="주소값">

 

 

 

 

 

실전 HTML5 & CSS동영상강좌_10강_CSS 속성-I

em : 16px을 기준으로함.

8px은 0.5em

 

 

#content가있다는것 →해당 아이디가있다.

margin:0 auto; 뜻: 센터에 온다.

width:80% 는 전체화면에서 80%채우겠다.

100%는 100%로 채우겠다.

 

background-image : url('http://~~~');  -이렇게 이미지 바로 백그라운드에 넣을 수 있다.

 

 

div -block

il(인라인) - nonblock

 

<!DOCTYPE html>
 
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
 
    <style>
 
        body div:nth-child(1) {
            width:100px;
            height:100px;
            background-color:#ff0000;
            color:#ffffff;
            font-weight:bold;
            text-align:center;
        }
 
        body div:nth-child(2) {
            width:100px;
            height:100px;
            background-color:#00ff00;
            color:#ffffff;
            font-weight:bold;
            text-align:center;
        }
 
        body div:nth-child(3) {
            width:100px;
            height:100px;
            background-color:#0000ff;
            color:#ffffff;
            font-weight:bold;
            text-align:center;
        }
 
        body div:nth-child(4) {
            width:100px;
            height:100px;
            background-color:#ff0000;
            color:#ffffff;
            font-weight:bold;
            text-align:center;
        }
 
        body div:nth-child(5) {
            width:100px;
            height:100px;
            background-color:#00ff00;
            color:#ffffff;
            font-weight:bold;
            text-align:center;
            display:inline;
            margin:10px 10px 10px 10px;
        }
 
        body div:nth-child(6) {
            width:100px;
            height:100px;
            background-color:#0000ff;
            color:#ffffff;
            font-weight:bold;
            text-align:center;
            display:inline;
        }
        body div:nth-child(7) {
            width:100px;
            height:100px;
            background-color:#ff0000;
            color:#ffffff;
            font-weight:bold;
            text-align:center;
            display:none;
        }
        body div:nth-child(8) {
            width:100px;
            height:100px;
            background-color:#00ff00;
            color:#ffffff;
            font-weight:bold;
            text-align:center;
            display:inline;
        }
        body div:nth-child(9) {
            width:100px;
            height:100px;
            background-color:#0000ff;
            color:#ffffff;
            font-weight:bold;
            text-align:center;
            display:inline-block;
        }
 
    </style>
 
</head>
<body>
 
    <div>
        content1
    </div>
    <div>
        content2
    </div>
    <div>
        content3
    </div>
 
    <div>
        content4
    </div>
    <div>
        content5
    </div>
    <div>
        content6
    </div>
    <div>
        content7
    </div>
    <div>
        content8
    </div>
    <div>
        content9
    </div>
 
</body>
</html>

↑inline-block의 속성은?

       body div:nth-child(9) {
            width:100px;
            height:100px;
            background-color:#0000ff;
            color:#ffffff;
            font-weight:bold;
            text-align:center;
            display:inline-block;
        }

margin : 외부에 공백 주는것. 10이면 10씩 겉에 공백주는것.

 

display속성은 이거 3개 중 하나가 쓰인다. 특징 차이점 꼭 알기

block,    inline,   inline-block

 

block - 개행

inline - 개행X

  inline에서는 width와 height가 먹히지 않는다.

  

block은 그 모양만주고 개행되는 것이아니라 줄의 옆 공백까지 전부 차지. 그래서 공백이 있어도 다른값이 넣어지지않는다. -그래서 width, height 이런거 적용 안된다.(inline도) padding,margin만 적용됨. --밑에 궁금증 이어짐

 

F12 - Elements에 들어가면 해당 그림이 가진 태그들 알수있음

여기서 content9에 마우스갖다대면 content9값만 가짐(다른위에 content1,2,3,4는 줄 전부 차지). 그래서 다음 그림이 와도 바로 옆에 붙을 수 있다.

 

content9(inline-block)은 왜 자기 값만 가지는지? 그게 inline-block의 특징이다.

 

 

 

 

 

 

 

 

 

 

 

display:none; - 숨기는것. 공간 차지x

visibility:hidden; - 숨기는것. 공간은 차지함

<!DOCTYPE html>
 
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
 
    <style>
 
        #display_none div:nth-child(1) {
            width:100px;
            height:100px;
            background-color:#ff0000;
            color:#ffffff;
            font-weight:bold;
            text-align:center;
        }
 
        #display_none div:nth-child(2) {
            width:100px;
            height:100px;
            background-color:#00ff00;
            color:#ffffff;
            font-weight:bold;
            text-align:center;
            display:none;
        }
 
        #display_none div:nth-child(3) {
            width:100px;
            height:100px;
            background-color:#0000ff;
            color:#ffffff;
            font-weight:bold;
            text-align:center;
        }
 
 
        #visibility_hidden div:nth-child(1) {
            width:100px;
            height:100px;
            background-color:#ff0000;
            color:#ffffff;
            font-weight:bold;
            text-align:center;
        }
 
        #visibility_hidden div:nth-child(2) {
            width:100px;
            height:100px;
            background-color:#00ff00;
            color:#ffffff;
            font-weight:bold;
            text-align:center;
            visibility:hidden;
        }
 
        #visibility_hidden div:nth-child(3) {
            width:100px;
            height:100px;
            background-color:#0000ff;
            color:#ffffff;
            font-weight:bold;
            text-align:center;
        }
 
    </style>
 
</head>
<body> 
    <div id="display_none">
        <div>
            content1
        </div>
        <div>
            content2
        </div>
        <div>
            content3
        </div>
    </div>
 
    <div id="visibility_hidden">
        <div>
            content1
        </div>
        <div>
            content2
        </div>
        <div>
            content3
        </div>
    </div>
 
</body>
</html>

 

 

 

 

 

 

↑display속성을 inline-block으로 줘서 width, height값 적용되게 함

 

opacity CSS 속성은 요소의 불투명도를 설정

 

 

 

***헷갈리는 거 다시 복습

 

width와 height 속성은 각각 가로 길이, 세로 길이를 의미합니다.

값을 정의 할때는 “100px” 처럼 숫자 뒤에 단위를 표시하여 적습니다.
(px는 픽셀 이라는 의미의며 ‘50%’ 처럼 ‘%’ 단위를 사용 할 수도 있음)

<span> 태그등 inline 요소는 적용 되지 않는데, 이는 display 속성에서 다시한번 다룹니다.

block

div 태그, p 태그, h 태그#, li 태그 등이 이에 해당됩니다.

기본적으로 가로 영역을 모두 채우며, block 요소 다음에 등장하는 태그는 줄바꿈이 된 것처럼 보입니다. 이는 word 같은 문서에서 문단을 표시할 때, 한 문단이 끝난 뒤에 나타나는 요소는 항상 다음 줄에 표시되던 것과 비슷한 맥락입니다.

 

width(가로), height(세로) 속성을 지정 할 수 있으며, block 요소 뒤에 등장하는 태그가 그 이전 block 요소에 오른쪽에 배치될 수 있어도 항상 다음 줄에 렌더링됩니다.

 

 

inline

span 태그, b 태그, i 태그, a 태그 등이 이에 해당됩니다.

 

block 과 달리 줄 바꿈이 되지 않고, width와 height를 지정 할 수 없습니다. word 같은 문서에서 볼드, 이탤릭, 색상, 밑줄 등 글자나 문장에 효과를 주기 위해 존재하는 단위라고 할 수 있습니다. 문서에서 특정 부분에 색상을 입힌다고 다음에 나오는 글이 줄바꿈 되지 않듯이 inline 요소 뒤에 나오는 태그 또한 줄바꿈 되지 않고 바로 오른쪽에 표시됩니다.

 

 

inline-block

block과 inline의 중간 형태라고 볼 수 있는데, 줄 바꿈이 되지 않지만 크기를 지정 할 수 있습니다.
Internet Explorer 7 이하에서는 사용할 수 없습니다.

 

 

 

 

 

 

jdk

 

저번시간까진 servlet

오늘부터 jsp

 

jsp_lecture_09

jsp는 servlet이다.

 

 

 

동적문서, 정적문서 차이 -특히 동적문서는 반드시 이해

Servlet은 Javav언어를 이용하여 문서를 작성하고, 출력객체를 이용하여 HTML코드를 삽입하였습니다.

JSP는 Servlet과 반대로 HTML코드에 JAVA언어를 삽입하여 동적 문서를 만들 수 있습니다.

HTML코드안에 JAVA코드를 삽입하기 위해서는 태그를 이용해야 하며, 이러한 태그를 공부해야 합니다.

 

시계를 예로 들면

그냥 <p>현재시간 : 2020-12-31-04:55:56<p> 으로 넣으면 언제들어가도 저 상태이다. = 정적페이지

계속 시간이 바뀌는 동적페이지로 만드려면? →프로그래밍을 해주면된다.(전에 했던 캘린더 코드 처럼)

html은 정적페이지. jsp는 동적페이지(java를 통해서 날짜를 집어넣을 수 있다.)

 

페이지를 동적으로 만드는 것들 종류:

jsp, asp(c#)-거의사용x, php //이렇게 3가지 +  java script(얘는 클라이언트도 사용가능)

 

<% %> jsp태그라고 생각하기 

 

원리는 servlet이랑 똑같다. 위의 그림은 무조건 외울것.

 

 

 

 

 

jsp_lecture_10

 

 

 

파일 만드는 방법
webcontent 에 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>
</head>
<body>
 
	<%
		int i = 0;
	while (true) {
		i++;
		out.println("2 * " + i + " = " + (2 * i) + "<br />");
	%>
 
	==========
	<br />
	<%
	if (i >= 9) break; } 
	%>
</body>
</html>
 
//출력창
2 * 1 = 2
==========
2 * 2 = 4
==========
2 * 3 = 6
==========
2 * 4 = 8
==========
2 * 5 = 10
==========
2 * 6 = 12
==========
2 * 7 = 14
==========
2 * 8 = 16
==========
2 * 9 = 18
==========

<%

%>

여기는 println안씀 바로 위의 조건식에 같이 붙어서 돌아감.

 

<%

%>

 

 

 

↓잘 사용안함

 

<%@ 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>
</head>
<body>
 
	<%
		int i = 10;
	String str = "ABCDE";
	%>
	<%!
	public int sum(int a, int b) {
		return a + b;
	}%>
 
	<%
	out.println("i = " + i +"<br />");
	out.println("str = "+str + "<br />");
	out.println("sum = " +sum(1,5)+"<br />");
	%>
</body>
</html>
 
//출력창
i = 10
str = ABCDE
sum = 6

 

 

 

<%=  %> 자주씀

<%=  %> 이 안에 넣어주면 ;안들어가고 그냥 변수 넣은거에 출력. 근데 String타입으로 출력.

<%@ 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>
</head>
<body>
 
	<%!
	int i = 10;
	String str = "ABCDE";
 
	public int sum(int a, int b) {
		return a + b;
	}%>
 
	<%=i%><br />
	<%=str%><br />
	<%=sum(1, 5)%>
</body>
</html>
 
 
//출력화면
10
ABCDE
6

안에 

public int sum() 이런 함수선언 무조건 있어야한다!

 

 

지시자 - <%@ %> 이런 형태임. page, include,, taglib 이 있다.(외울필욘없음 page가 제일 많이 쓰임)

<%@ 다음엔 페이지 속성이 나옴

 

<%@page import="java.util.Arrays"%>
<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
</head>
<body>
 
<%
	int[] iArr = {10, 20, 30};
	out.println( Arrays.toString(iArr) );
%>
 
</body>
</html>

 

 

 

 

파일자체를 그냥 갖다 넣음.

 

jsp주석은 <%-- --%> 랑 자바 주석 //랑 /* */둘다 가능하다.

html주석은 <!-- -->

 

 

 

 

 

 

 

 

서버 기본 구성
1] 실행 환경
  1. 웹 서버 - 클라이언트에게 요청을 받고, 코드 실행한 결과를 (WAS에게 받아) 요청자에게 전달하는 주체(실체)
  2. WAS - 코드를 실행하고, 실행된 결과를 보여주는 서비스 환경. 웹어플리케이션

2] 실행 대상
  1. Server App - WAS에서 실행되는 것으로, "동적인 방식으로" 문서를 만들기 위한 코드
  2. Servlet 
-
     Server  + -let을 합친 말로
     Server Application let(작은 조각, 파편)의 줄임말로 추측, 
     내용은 Server App 각각의 코드를 의미

 

 

뉴렉 42강

request - 내장객체

response

session

application

 

 

뉴렉 43강 연습문제 

[nana.jsp] - WebContent에 만들어줌
 
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%
	String cnt_ = request.getParameter("cnt");
int cnt = 100;
if (cnt_ != null && !cnt_.equals(""))
	cnt = Integer.parseInt(cnt_);
%>
 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<%
		for (int i = 0; i < cnt; i++) {
	%>
	안녕 Servlet!!
	<br>
	<%
		}
	%>
</body>
</html>

출력화면

 

뉴렉 44강 연습문제

[spagetti.jsp] - WebContent에 만들어줌
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%
int num = 0;
String num_ = request.getParameter("n");
if(num_ != null && num_.equals(""))
	num = Integer.parseInt(num_);
%>
 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<%if(num%2 != 0){ %>
	홀수입니다.
	<% }else{%>
	짝수입니다.
	<%} %>
</body>
</html>

 

뉴렉 45강

MVC에 대해서 - model1

[spagetti.jsp] - WebContent에 만들어줌
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%
	int num = 0;
String num_ = request.getParameter("n");
if (num_ != null && num_.equals(""))
	num = Integer.parseInt(num_);
 
String model;
if (num % 2 != 0)
	model = "홀수";
else
	model = "짝수";
%>
 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<%=model%>입니다.
</body>
</html>

 

 

뉴렉 46강 - model2 →controller단이 물리적으로 분리되었나!?

분리되었으면 서로 연결해주는게 필요 = 그게 forwarding (2가지)

//redirect:현재작업한거 상관없이 새로운거 요청 
//forward:현재작업한 것을 이어나가게 하는것

[Spag.servlet(=Spag.java)] Java Resources에 패키지 만들어서 만듦 - 여기서실행
 
package jsp_0103;
 
import java.io.IOException;
 
import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
 
/**
 * Servlet implementation class Spag
 */
@WebServlet("/spag")
public class spag extends HttpServlet {
	private static final long serialVersionUID = 1L;
 
	/**
	 * @see HttpServlet#HttpServlet()
	 */
	public spag() {
		super();
		// TODO Auto-generated constructor stub
	}
 
	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse
	 *      response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		int num = 0;
		String num_ = request.getParameter("n");
		if (num_ != null && num_.equals(""))
			num = Integer.parseInt(num_);
 
		String result;
		if (num % 2 != 0)
			result = "홀수";
		else
			result = "짝수";
		
		request.setAttribute("result", result);
		
		RequestDispatcher dispatcher=
		request.getRequestDispatcher("spagetti.jsp");
		
		dispatcher.forward(request, response);
	
	}
 
	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse
	 *      response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}
 
}
[spagetti.jsp] - WebContent에 만들어줌
 
<%@ 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>
</head>
<body>
	<%=request.getAttribute("result")%>입니다.
</body>
</html>

 

 

 

 

오늘의 문제

1.css 에서의 display 종류와 속성에 대하여 설명하시오.

display속성 3가지

block,    inline,   inline-block

 

block - 개행 (block은 그 모양만주고 개행되는 것이아니라 줄의 옆 공백까지 전부 차지. 그래서 공백이 있어도 다른값이 넣어지지않는다. -그래서 width, height 이런거 적용 안된다.(inline도) padding,margin만 적용됨)

inline - 개행X (inline에서는 width와 height가 먹히지 않는다.)

inline-block = block+inline (개행X, width height적용 가능, inline처럼 자기값만 가진다.) ex.<bottom><select>


2.px 과 em 의 차이는?

em : 16px을 기준으로함.

ex) 8px은 0.5em


3.inline-block 태그의 종류는?

-inline 요소-

<a>, <i>, <span>, <abbr>, <img>, <strong>, <b>, <input>, <sub>, <br>, <code>, <em>, <small>, <tt>, <map>, <textarea>, <label>, <sup>, <q>, <button>, <cite>


4.opacity 속성의 사용법은?

opacity CSS 속성은 요소의 불투명도를 설정

0은 투명, 1은 불투명


5.display:none 과 visibility:hidden 의 차이는?

display:none; - 숨기는것. 공간 차지x

visibility:hidden; - 숨기는것. 공간은 차지함


6.아래의 동영상 사이트를 시청하시오.

www.youtube.com/watch?v=O-n1EjDEuIc

 

7.동적문서와 정적문서의 차이는?

ex) <p>현재시간 : 2020-12-31-04:55:56<p> 으로 넣으면 언제들어가도 저 상태이다. = 정적페이지

계속 시간이 바뀌는 동적페이지로 만드려면? →프로그래밍을 해주면된다.(전에 했던 캘린더 코드 처럼)

html은 정적페이지. jsp는 동적페이지(java를 통해서 날짜를 집어넣을 수 있다.)


8.아래를(JSP 태그) 설명하시오.

지시자 : <%@     %>  : 페이지 속성

주석 : <%--  --%> / html은 <!-- -->

선언 : <%!     %>  : 변수, 메소드 선언

표현식 : <%=     %>  : 결과값 출력

스크립트릿 : <%     %>  : JAVA 코드 → 자바 문법 들어감!

액션태그 : <jsp:action>  </jsp:action> : 자바빈 연결

 

 

-지시자 :  <%@ %> 이런 형태임. page, include,, taglib 이 있다.
-주석 :  jsp주석은 <%-- --%> 랑 자바 주석 //랑 /* */둘다 가능하다.

-선언 : public int sum() 이런 함수선언 무조건 있어야한다
-표현식
-스크립트릿
-액션태그 : 페이지와 페이지 사이를 연결해주는 역할이다. ex) <jsp:forward>페이지 사이의 제어를 이동시킬 때 사용 

<jsp:include>다른 페이지의 실행 결과를 현재의 페이지에 포함시킬때 사용 

1.위 구구단을 servlet으로 작성하시오. //가로세로 바꾸고 싶으면 i,j만 바꾸면됨

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>gugudan</title>
</head>
<body>
	<form action="../gugudan" method="post">
		구구단을 출력하시겠습니까? <input type="submit" value="yes">
	</form>
 
</body>
</html>
 
package Servlet_20_12_31_hw;
 
import java.io.IOException;
import java.io.PrintWriter;
 
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
 
/**
 * Servlet implementation class gugudan
 */
@WebServlet("/gugudan")
public class gugudan extends HttpServlet {
	private static final long serialVersionUID = 1L;
 
	/**
	 * @see HttpServlet#HttpServlet()
	 */
	public gugudan() {
		super();
		// TODO Auto-generated constructor stub
	}
 
	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse
	 *      response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		// TODO Auto-generated method stub
		response.getWriter().append("Served at: ").append(request.getContextPath());
	}
 
	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse
	 *      response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
 
		response.setContentType("text/html; charset=UTF-8");
		PrintWriter writer = response.getWriter();
 
		writer.println("<html><head></head><body>");
 
		writer.println("<table border=\"1\">");
 
		for (int i = 1; i <= 9; i++) {
			writer.println("<tr>");
			for (int j = 2; j <= 9; j++) {
 
				writer.println("<td>" + j + "*" + i + "=" + j * i + "</td>");
 
			}
			writer.println("</tr>");
			writer.println("<br/>");
		}
		writer.println("</table>");
 
		writer.println("</body></html>");
 
		writer.close();
 
	}
 
}

2. 위 구구단을 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>
</head>
<body>
	구구단
	<table border="1">
		<%
			for (int i = 1; i < 10; i++) {
			out.println("<tr>");
			for (int j = 2; j < 10; j++) {
				out.println("<td>");
				out.println(i + "*" + j + "=" + i * j);
				out.println("</td>");
			}
			out.println("</tr>");
		}
		%>
	</table>
</body>
</html>

 

 

3. 아래를 jsp로 작성하시오.

1) include.jsp파일을 생성합니다.

-<h4>태그에 '구구단 출력하기'를 작성합니다.

-include 액션 태그로 구구단을 출력하는 include_data.jsp 파일로 이동하도록 작성합니다

-param 액션 태그로 숫자 5를 출력하는 include_data.jsp파일에 전달하도록 작성합니다.

2) include_data.jsp파일을 생성합니다.

-전달받은 숫자 5의 구구단을 출력하도록 작성합니다.

3) 웹 브라우저에 http://localhost:8080/Exercise/ch04/include.jsp를 입력하여 실행 결과를 확인합니다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>gugudanPrint</title>
</head>
<body>
	<%
		String dan = request.getParameter("dan");
		int danPrint = Integer.parseInt(dan);
		
		for(int i =1; i<=9;i++){
			out.println(danPrint + "*" + i + "=" + (danPrint*i));
			out.println("<br/>");
		}
	%>
 
</body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>gugudanPrint</title>
</head>
<body>
	<%
		String dan = request.getParameter("dan");
		int danPrint = Integer.parseInt(dan);
		
		for(int i =1; i<=9;i++){
			out.println(danPrint + "*" + i + "=" + (danPrint*i));
			out.println("<br/>");
		}
	%>
 
</body>
</html>

 

 

4. 아래를 jsp로 작성하시오

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>address</title>
</head>
<body>
	
	<form action="address_process.jsp">
	이름 : <input type="text" name="uname"><br>
	주소 : <input type="text" name="uaddress"><br>
	이메일 : <input type="text" name="uemail"><br>
	전송<input type="submit" value="전송">
	</form>
	
	
</body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>print</title>
</head>
<body>
	<%
		String name = request.getParameter("uname");
		String address= request.getParameter("uaddress");
		String email= request.getParameter("uemail");
		
		out.println("아이디 : " + name + "<br>");
		out.println("주소 : " + address+ "<br>");
		out.println("이메일 : " + email+ "<br>");
		
	%>
	
	
</body>
</html>

 

 

 

5. 아래를 jsp로 작성하시오

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>fruit</title>
</head>
<body>
	<form action="fruit_print.jsp">
		오렌지<input type="checkbox" name = "fruit" value="오렌지">
		사과 <input type="checkbox" name = "fruit" value="사과">
		바나나<input type="checkbox" name = "fruit" value="바나나">
		<input type="submit" value="전송">
	
	</form>
 
</body>
</html>
<%@page import="java.util.Arrays"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>fruit_print</title>
</head>
<body>
	<%
		String[] fruit =request.getParameterValues("fruit");
	
		out.println("<h3>선택한과일</h3>");
		for(int i = 0;i<fruit.length;i++){
			out.println(fruit[i]);
		}
		
		
	%>
 
</body>
</html>

 

6. 아래를 jsp로 작성하시오

<%@page import="java.text.SimpleDateFormat"%>
<%@page import="java.util.Date"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>calendar</title>
</head>
<body>
	<h1>몇시 일까요?</h1>
	<% 
		Date date = new Date();
		SimpleDateFormat sd = new SimpleDateFormat("yy년mm월dd일 a hh:mm:ss");
	%>
	현재 날짜와 시간은 <%=date %> 입니다.
 
 
</body>
</html>
728x90
저작자표시 비영리 변경금지

'코딩 > 수업 정리' 카테고리의 다른 글

21.01.05 Tue [030]  (0) 2021.01.05
21.01.04 Mon [029]  (0) 2021.01.04
20.12.30 Wed [027]  (0) 2020.12.30
20.12.29 Tue [026]  (0) 2020.12.29
20.12.28 Mon [025]  (0) 2020.12.28

관련글

댓글

티스토리툴바