- [JSP] POST 방식과 getParameterValues 2019.10.07
- [JSP] 이클립스에서 import javax.servlet에 오류 날 때 2019.10.02
- [JSP] GET방식 전송 2019.10.02
- [JSP] Servlet이 요청받는 방식 - GET 과 POST 2019.10.02
- [JSP] 서블릿의 라이프사이클(Life Cycle) 2019.10.01
- [JSP] 14 . HTML 텍스트 태그 <font> 2019.05.27
- [JSP] 13 - 3 . HTML 문단 태그 <hr> <h> 2019.05.27
- [JSP] 13 - 2 . HTML 문단 태그 <p> 2019.05.23
- [JSP] 13 - 1 . HTML 문단 태그 <br> 2019.05.23
- [JSP] 13. HTML 문단 태그 2019.05.23
- [JSP] 12. HTML ? 2019.05.23
- [JSP] 11. HTML 작성 2019.05.16
- [JSP] 10. Tomcat서버에 HTML 작성하여 띄워보기 2019.05.16
- [JSP] 9. 공유기 설정 (포트 포워딩) 2019.05.16
- [JSP] 8. HTML 파일 만들기 WebContent(디렉터리) 2019.05.16
- [JSP] 7. 동적 웹 프로젝트 생성하기 2019.05.16
- [JSP] 6. 이클립스웹 프로젝트 화면 구성 2019.05.16
- [JSP] 4. Window - Preference 에 Server가 안보여요 2019.05.09
- [JSP] 5. 웹 프로그래밍? 2019.05.09
- [JSP] 3. 이클립스 설치 2019.05.09
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
</head>
<body>
<h1> 당신이 좋아하는 강아지를 선택하세요 </h1>
<form action="ChoiceDog" method ="post">
<input type="checkbox" name = "dog" value = "jolin.jpg">졸린개
<input type="checkbox" name = "dog" value = "michin.jpg">미친개
<input type="checkbox" name = "dog" value = "shirt.jpg">옷입은개
<input type="checkbox" name = "dog" value = "noon.jpg">눈썹개
<input type="submit" value = "전송">
</form>
</body>
</html>>> action = ChoiceDog 는 @Webservlet과 동일하게 작성
>> method = get과 post방식중 get방식
>> <input>태그 중에 타입 checkbox
>> name을 같게 주어 묶을 수 있음(배열로 받아올 수 있음)
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 ChoiceDogServlet
*/
@WebServlet("/ChoiceDog")
public class ChoiceDogServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public ChoiceDogServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
response.setContentType("text/html;charset=euc-kr");
PrintWriter out = response.getWriter();
String[] dog = request.getParameterValues("dog");
out.println("<html>");
out.println("<head>");
out.println("</head>");
out.println("<body bgcolor='black'>");
out.println("<table align='center' bgcolor='yellow'>");
out.println("<tr>");
for(int i = 0; i < dog.length; i ++)
{
out.println("<td>");
out.println("<img src='img/" + dog[i] + "'/>");
out.println("</td>");
}
out.println("</tr>");
out.println("</table>");
out.println("</body>");
out.println("</html>");
}
}>> response.setContentType("text/html;charset=euc-kr"); << 문자 처리 방식
>>PrintWriter out = response.getWriter(); << 출력스트림 생성
>>String[] dog 배열 생성
>>request.getParameterValues("dog"); <<request.getParameter
getParameter(String형 name 파라미터)
파라미터 - 한개의 파라미터를 나타낼 수 있음
>>앞에 String[] 배열이 옴
>>getParameterValues(String형 name파라미터)
'JSP' 카테고리의 다른 글
| [JSP]서블릿 (httpservlet) (0) | 2019.10.30 |
|---|---|
| [JSP]SERVER.XML (0) | 2019.10.16 |
| [JSP] 이클립스에서 import javax.servlet에 오류 날 때 (0) | 2019.10.02 |
| [JSP] GET방식 전송 (0) | 2019.10.02 |
| [JSP] Servlet이 요청받는 방식 - GET 과 POST (0) | 2019.10.02 |
1. 패키지에서 WEB-INF -> lib -> servlet-api.jar 파일을 넣어준다.
또는
2. 패키지에서 오른쪽 마우스 클릭후 bulid Path - Configure Build Path - Libraries - Add External JARs 클릭
Apache Tomcat 경로에 가서 lib폴더에 servlet-api.jar을 추가해준다.
'JSP' 카테고리의 다른 글
| [JSP]SERVER.XML (0) | 2019.10.16 |
|---|---|
| [JSP] POST 방식과 getParameterValues (0) | 2019.10.07 |
| [JSP] GET방식 전송 (0) | 2019.10.02 |
| [JSP] Servlet이 요청받는 방식 - GET 과 POST (0) | 2019.10.02 |
| [JSP] 서블릿의 라이프사이클(Life Cycle) (0) | 2019.10.01 |
login.html
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Account</title>
<style type="text/css">
#loginFormArea{
text-align : center;
width : 500px;
margin : auto;
border : 1px solid red
}
h1{
text-align : center;
}
</style>
</head>
<body>
<!-- https://docs.oracle.com/javaee/7/api/javax/servlet/http/HttpServletResponse.html -->
<!-- 서블릿 페이지 애노테이션 값이 login인 페이지로 요청하여 처리해주기를 요구 -->
<h1>로그인</h1>
<section id = "loginFormArea">
<form action="login" method="get">
<!-- id input-->
<label id="id"> 아이디 : </label>
<input type="text" name="id" id="id">
<br>
<!-- passwd input-->
<label id="passwd"> 비밀번호 : </label>
<input type="password" name="passwd" id="passwd">
<br>
<!-- submit button -->
<input type="submit" value ="로그인">
<br>
</form>
</section>
</body>
</html>
KEYWORD
>> action값이 의미하는 login은
>> servlet페이지의 @WebServlet("/login")이다.
>> method="get" 방식으로 전송한다
LoginServlet.java
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 LoginServlet
*/
@WebServlet("/login")
public class LoginServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public LoginServlet() {
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
String id = request.getParameter("id");
String passwd = request.getParameter("passwd");
response.setContentType("text/html;charset=euc-kr");
PrintWriter out = response.getWriter();
out.println("아이디 : " + id + "<br>");
out.println("비밀번호 : " + passwd + "<br>");
}
}
KEYWORD
>> @WebServlet("/login")
>> doGet()메서드
>> request.getParamter() 메서드를 호출해서 login.html의 <form>태그속의 속성값을 파라미터로 하여 값을 얻어온다.
>> response.setContentType()메서드는 브라우저로 보내지는 데이터의 형식처리
>> PrintWriter out = response.getWriter() 출력 스트림을 생성
>> out.println()으로 출력
'JSP' 카테고리의 다른 글
| [JSP] POST 방식과 getParameterValues (0) | 2019.10.07 |
|---|---|
| [JSP] 이클립스에서 import javax.servlet에 오류 날 때 (0) | 2019.10.02 |
| [JSP] Servlet이 요청받는 방식 - GET 과 POST (0) | 2019.10.02 |
| [JSP] 서블릿의 라이프사이클(Life Cycle) (0) | 2019.10.01 |
| [JSP] 14 . HTML 텍스트 태그 <font> (0) | 2019.05.27 |
GET 방식
서버에 존재하는 보안성이 필요하지 않은 요청들..
ex) 페이지 번호, 게시판 글 목록 등..
GET 방식
1. <a href ="asdf.jsp"> - <a>태그 방식
2. 브라우저 주소 표시줄에 주소를 직접 입력해서 요청
3. <form>태그에서<form action = "asdf.jsp" name = "asdf" method = "GET">
작동 방식
jsp 페이지 요청
----------------------------> ------------------------------>
client 웹 서버 jsp 파일
<--------------------------- <-----------------------------
응답
POST 방식
단순한 페이지 요청이 아닌 많은 양의 파라미터 전송을 처리할 때 POST방식으로 요청을 전송한다.
회원 가입 요청, 글쓰기, 업로드 등...
POST 방식
1. 반드시 <form>태그 사용
2. <form action = "asdf.jsp" name = "asdf" method = "POST">
작동 방식
회원 가입 요청
----------------------------> ------------------------------> -------->
client 웹 서버 jsp 파일 DB
<--------------------------- <----------------------------- <--------
응답
'JSP' 카테고리의 다른 글
| [JSP] 이클립스에서 import javax.servlet에 오류 날 때 (0) | 2019.10.02 |
|---|---|
| [JSP] GET방식 전송 (0) | 2019.10.02 |
| [JSP] 서블릿의 라이프사이클(Life Cycle) (0) | 2019.10.01 |
| [JSP] 14 . HTML 텍스트 태그 <font> (0) | 2019.05.27 |
| [JSP] 13 - 3 . HTML 문단 태그 <hr> <h> (0) | 2019.05.27 |
서블릿 라이프사이클
1.
클라이언트의 첫 번째 요청 시 OR 컨테이너가 시작될 때 생성
위의 두 가지 선택지는 컨테이너 속성 값으로 설정
2.
첫 번째의 클라이언트 요청에 대해서만 객체가 생성
- 서블릿 객체 생성
- init() 메소드 호출되어 서블릿에 필요한 초기화 작업을 수행
-init()메소드에서는 서블릿 전체에서 공유되는 자원을 생성
두 번째 부터는 각 클라이언트 마다 스레드를 생성하여 요청 처리
- 두 번째 요청 시 부터 service() 메소드 호출
- 요청당 한개의 service() 메소드 호출
컨테이너에서는 service 메소드를 호출하기 전
HttpServletRequest 객체와 HttpServlet Response 객체를 생성하여
service 메소드 파라미터로 전송한다.
- 클라이언트 요청이 GET방식이면 doGet() 메소드를 호출하고,
- 클라이언트가 POST 방식이면 doPost() 메소드를 호출한다
service() 메서드는 재정의 하지 않는다
3.
컨테이너가 종료될 때 서블릿 객체는 소멸
동작
Client ------------> Server ------------------------------> Container---------------------->Servlet
1) 1번요청 2) 요청 url 분석 후 서블릿 결정 3) 서블릿 객체 생성
4) init 메소드 호출
5) service 메소드 호출
6) doGet 이나
doPost 메소드 호출
7) destroy 메소드 호출
import java.io.IOException;
import javax.servlet.ServletConfig;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
//서블릿 클래스를 정의한다. 서블릿 클래스를 정의할 때는 HttpServlet 클래스를 상속한다
public class ServletLifeCycle extends HttpServlet {
private static final long serialVersionUID = 1L;
//생성자를 정의한 부분이다. 이 부분은 첫 번째 클라이언트 요청이 들어올 때 실행된다.
public ServletLifeCycle ()
{
super();
System.out.println("Constructor");
}
//init 메소드를 재정의한 부분이다. 이 메소드는 첫 번째 요청이 들어올 때만 호출된다.
//두 번째 요청부터는 호출 되지 않는다.
@Override
public void init(ServletConfig config) throws ServletException
{
super.init(config);
System.out.println("init");
}
//service 메소드를 정의한 부분이다. 이 메소드는 클라이언트의 요청이 들어올 때 마다 반복적으로 호출되면서 각 클라이언트의 요청을 처리한다.
@Override
protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
{
System.out.println("service");
super.service(request, response);
}
//doGet 메소드를 정의한 부분이다. 이 메소드는 클라이언트의 요청이 들어올 때 마다 반복적으로 호출되면서 각 클라이언트의 요청을 처리한다.
protected void doGet (HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
{
System.out.println("doGet");
}
//doPost 메소드를 정의한 부분이다. 이 메소드는 클라이언트가 post 방식으로 요청을 하면 호출된다.
protected void doPost (HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
{
System.out.println("doPost");
}
//destroy() 메소드를 정의한 부분이다. 서블릿 인스턴스가 소멸되기 직전에 단 한번만 호출되는 메소드이다. 톰캣 서비스를 중지하면 실행된다.
@Override
public void destroy()
{
System.out.println("destroy");
super.destroy();
}
}
'JSP' 카테고리의 다른 글
| [JSP] GET방식 전송 (0) | 2019.10.02 |
|---|---|
| [JSP] Servlet이 요청받는 방식 - GET 과 POST (0) | 2019.10.02 |
| [JSP] 14 . HTML 텍스트 태그 <font> (0) | 2019.05.27 |
| [JSP] 13 - 3 . HTML 문단 태그 <hr> <h> (0) | 2019.05.27 |
| [JSP] 13 - 2 . HTML 문단 태그 <p> (0) | 2019.05.23 |
<font> 태그 - 글꼴 태그
| 속성 | 설명 |
| face | 글꼴 |
| color | 색상 |
| size | 글꼴 크기 지정(1~7) , 디폴트 3 |
<strong> 굵게
<i> 이텔릭체
<u> 밑줄
<sup> 윗 첨자
<sub> 아랫 첨자
<s> 텍스트 가운데 줄
<blockquote> 문단을 들여써서 하나의 덩어리로 표시
<xmp> 코드에 작성한 내용중에 태그도 표시
<pre> 코드에 작성한 내용 그대로 표시
<html>
<head> 폰트 태그 </head>
<xmp>
<font face="바탕체" color="blue" size="7"> 바탕체 파란색 사이즈 7의 글꼴 </font>
</xmp>
<font face="바탕체" color="blue" size="7"><i>바탕체 파란색 사이즈 7 이텔릭 </i></font>
</br></br></br>
<xmp>
<font face="바탕체" color="blue" size="7"><strong> 바탕체 파란색 사이즈 7의 굵게(strong) 글꼴 </strong> </font>
</xmp>
<font face="바탕체" color="blue" size="7"><strong> 바탕체 파란색 사이즈 7의 굵게(strong) 글꼴 </strong> </font>
</br></br></br>
<xmp>
<font face="고딕" color="red" size="7"><strong><i><u> 고딕체 빨강 7사이즈 강조 이텔릭 밑줄</u> </i></strong></font>
</xmp>
<font face="고딕" color="red" size="7"><strong><i><u> 고딕체 빨강 7사이즈 강조 이텔릭 밑줄</u> </i></strong></font>
</br></br></br>
<xmp>
<font face="굴림체" color="yellow" size="7"><strong><s> 굴림체 노랑 7사이즈 강조 중앙줄 </s></strong></font>
</xmp>
<font face="굴림체" color="yellow" size="7"><strong><s> 굴림체 노랑 7사이즈 강조 중앙줄 </s></strong></font>
</br></br></br>
<xmp>
<font face="돋움체" color="black" size="7">x<sup>2</sup>=2<sup>2</sup></font>
</xmp>
<font face="돋움체" color="black" size="7">x<sup>2</sup>=2<sup>2</sup></font>
</html>결과
'JSP' 카테고리의 다른 글
| [JSP] Servlet이 요청받는 방식 - GET 과 POST (0) | 2019.10.02 |
|---|---|
| [JSP] 서블릿의 라이프사이클(Life Cycle) (0) | 2019.10.01 |
| [JSP] 13 - 3 . HTML 문단 태그 <hr> <h> (0) | 2019.05.27 |
| [JSP] 13 - 2 . HTML 문단 태그 <p> (0) | 2019.05.23 |
| [JSP] 13 - 1 . HTML 문단 태그 <br> (0) | 2019.05.23 |
<hr>태그 - 수평선 태그
| 속성 | 설명 |
| align | 수평선 정렬 (left, right, center) |
| color | 색상 |
| size | 굵기 (단위 숫자) |
| width | 가로 길이 ( 단위 %) |
| noshade | 그림자가 없는 평면 수평선 |
<h>태그 - 헤드라인 태그
1~6 사이의 숫자와 사용하고 글자의 크기를 지정한다.
<h1> 안녕하살법! </h1>
<h6> 안녕하살법! </h6>
<html>
<head>
<title> hr, h 태그 </title>
</head>
<body>
<h1> h1은 크다</h1> <h6>h6은 작다 </h6>
<hr width = "50%" color = "blue" align = "center"></hr>
<h1> 안녕하살법! </h1>
<h2> 안녕하살법! </h2>
<h3> 안녕하살법! </h3>
<h4> 안녕하살법! </h4>
<h5> 안녕하살법! </h5>
<h6> 안녕하살법! </h6>
<h7> 안녕하살법! </h7>
<h8> 안녕하살법! </h8>
</body>
</html>
- 책에는 <h1>~<h6>까지 쓴다했지만 궁금하여 <h7>과 <h8>을 해본결과
- <h7> = <h4>와 같은 크기로 출력되고 대신에 글씨 두께가 다르게 나온다.
- 그리고 맨 윗줄의 <h1> h1은 크다 </h1> <h6> h6은 작다 </h6>는
- 처음에 를 써서 공백을 줘야겠다 생각한 것인데 결과는 조금 다르다.
- <h>태그는 태그종료가 되면 줄바꿈을 한다.
이 때는 아래의 사진과 같이 를 줄바꿈으로 인식하여 위아래 간격이 늘어난다.
'JSP' 카테고리의 다른 글
| [JSP] 서블릿의 라이프사이클(Life Cycle) (0) | 2019.10.01 |
|---|---|
| [JSP] 14 . HTML 텍스트 태그 <font> (0) | 2019.05.27 |
| [JSP] 13 - 2 . HTML 문단 태그 <p> (0) | 2019.05.23 |
| [JSP] 13 - 1 . HTML 문단 태그 <br> (0) | 2019.05.23 |
| [JSP] 13. HTML 문단 태그 (0) | 2019.05.23 |
<p> 태그
<p>태그는 문단 태그로 단을 정렬할 때 사용한다.
단락을 나누는데에는 문단을 정렬하는 데에 목적이 있다.
따라서 글을 어떻게 배치할 것인지 정렬하는 속성을 지정할 수 있는데
| 속성 | 설명 |
| align | 문단정렬 ( left, right, center ) |
<html>
<head>
<title> 제목을 적는 곳인가? </title>
</head>
<body>
<p align="center">
띄어쓰기를 해봅니다.!!!!!!!!!</br>
</p>
<p align="right">
한칸 두칸 세칸을 차례로
1 @
2 @
3 @
</p>
</body>
</html>
'JSP' 카테고리의 다른 글
| [JSP] 14 . HTML 텍스트 태그 <font> (0) | 2019.05.27 |
|---|---|
| [JSP] 13 - 3 . HTML 문단 태그 <hr> <h> (0) | 2019.05.27 |
| [JSP] 13 - 1 . HTML 문단 태그 <br> (0) | 2019.05.23 |
| [JSP] 13. HTML 문단 태그 (0) | 2019.05.23 |
| [JSP] 12. HTML ? (0) | 2019.05.23 |
<br> 태그
<html>
<head>
<title> 제목을 적는 곳인가? </title>
</head>
<body>
띄어쓰기를 해봅니다.!!!!!!!!!</br>
한칸 두칸 세칸을 차례로
1 @
2 @
3 @
</body>
</html>
실제쓰임은 닫힘태그만 쓴다고 합니다
</br> 태그를 쓰자 결과가 나옵니다
'JSP' 카테고리의 다른 글
| [JSP] 13 - 3 . HTML 문단 태그 <hr> <h> (0) | 2019.05.27 |
|---|---|
| [JSP] 13 - 2 . HTML 문단 태그 <p> (0) | 2019.05.23 |
| [JSP] 13. HTML 문단 태그 (0) | 2019.05.23 |
| [JSP] 12. HTML ? (0) | 2019.05.23 |
| [JSP] 11. HTML 작성 (0) | 2019.05.16 |
<문단태그>
텍스트를 좌측정렬을 하거나 우측정렬을 하거나 등 한 칸 띄어쓰는 것 부터 시작해서
단을 나누거나 EX) 글을 작성하고 들여쓰거나 단을 나누거나 하는 편집적인 요소 라고 생각
위의 사진은 내가 책을 한번 읽고 HTML에서는 (한칸띄움) 와 같은 예약어(Keyword)가 두 칸 이상을 띄어쓸때
꼭 필요하다고 해서 확인을 하기 위해 한 칸을 띄어써보고 두 칸을 띄어 써보고 하면서 나온결과이다.
<html>
<head>
<title> 제목을 적는 곳인가? </title>
</head>
<body>
띄어쓰기를 해봅니다.!!!!!!!!!
한칸 두칸 세칸을 차례로
1 @
2 @
3 @
</body>
</html>HTML문서에 줄 바꿈과 띄어쓰기처럼 같은 결과가 나오기를 바라면서 적은 것이지만 실제로는 그렇지 않았다.
띄어쓰기도 한번 띄어쓰기가 최대였다.
<알아볼 것 - <br> <p> <h> <hr>
|
일단 그리하여 궁금한 것이 두가지 생겼는데 이 의미모를 것 부터 시작해서 줄 바꿈도 필요함이 보인다.
|
줄 바꿈 없는 공백(non-breaking space, no-break space, 줄여서 NBSP) 또는 단어 잘림 방지 공백[1], 줄 바꿈하지 않는 공백[2]은 공백 문자의 한 형태로, 현 위치에서 자동 줄 바꿈(워드랩)을 막는 데 쓰인다. 고정 공백이라고도 한다.
-> 는 영어약자이다!
|
줄 바꿈하는 태그를 먼저 소개하자면 <br> 이다. 끝 태그가 필요없지만 </br> 같이 시작태그를 적지 않고 그 자리에 </br>만 써주는 식으로 사용한다고 한다.
|
'JSP' 카테고리의 다른 글
| [JSP] 13 - 2 . HTML 문단 태그 <p> (0) | 2019.05.23 |
|---|---|
| [JSP] 13 - 1 . HTML 문단 태그 <br> (0) | 2019.05.23 |
| [JSP] 12. HTML ? (0) | 2019.05.23 |
| [JSP] 11. HTML 작성 (0) | 2019.05.16 |
| [JSP] 10. Tomcat서버에 HTML 작성하여 띄워보기 (0) | 2019.05.16 |
https://namu.wiki/w/HTML/%ED%83%9C%EA%B7%B8#fn-1
namu.wiki
읽으면서 모르는 말과 요약
1. <html> : 위의 DTD는 뭐지?
DTD :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
이런 형식으로 문서가 어떤 html라이브러리를 참고하는지 알려주는 것이라고 한다.
html5 이전 형식으로 현재는 <!DOCTYPE html>이것만 쓰는 것으로 끝이라고 한다.
2. <head> 문서 속성을 지정한다고 하는데 문서의 속성에는 어떤 것들이 있는지? 타이틀태그는 알겠지만
메타 태그는 무엇인지 그 이외에는 또 있는지?
<티스토리> 작성하다가 F12를 눌러 <head>부분이 어떻게 이루어져 있는가 궁금해서 찾아보았다.
<title> 제목
<meta charset="utf-8">은 인코딩
<link>는 아직 잘 모르겠다.
3. <body> 은 레이아웃 지정
4. CSS는 대체 무엇인가?
https://m.post.naver.com/viewer/postView.nhn?volumeNo=16806930&memberNo=29566044&vType=VERTICAL
04. CSS란 무엇인가?
[BY 더굿북] HTML을 통해 웹페이지에 들어가는 여러 형태의 구성요소를 만들 수 있게 됐다. 이제 CSS를 ...
m.post.naver.com
CSS란 무엇인가?
HTML로 웹페이지에 구성요소를 추가할 수는 있지만 이들의 위치, 색깔, 폰트 또는 스타일을 조절하기는 쉽지 않다.
스타일 정보를 페이지 내용과 별도로 저장하여 내용에 영향을 주지 않고 쉽게 스타일을 조정하자는 것이 주된 아이디어였다. 실제로 HTML은 전혀 손대지 않고 CSS만 변경하여 웹페이지의 모습과 레이아웃을 완전히 바꿀 수 있다.
CSS는 연속되는 스타일 시트(Cascading Style Sheets)의 줄임말이다. ‘Cascading’은 여러 가지 서로 다른 규칙이 존재할 때 어떤 스타일 ‘규칙’을 적용할지를 브라우저가 결정하는 방식을 일컫는다. 예를 들어 하나의 스타일 시트가 <p> 요소를 파란색으로 규정할 때 다른 시트가 빨간색이라고 규정하면 우리는 <p> 요소가 실제로 어떤 색을 가져야 할지 알 수 있는 일관된 방식이 필요하다.
라고 서술되어 있다.
결국 자기 입맛에 맞게 HTML을 손대지 않고 웹페이지의 모습을 변화시키기 위해 쓴다!
'JSP' 카테고리의 다른 글
| [JSP] 13 - 1 . HTML 문단 태그 <br> (0) | 2019.05.23 |
|---|---|
| [JSP] 13. HTML 문단 태그 (0) | 2019.05.23 |
| [JSP] 11. HTML 작성 (0) | 2019.05.16 |
| [JSP] 10. Tomcat서버에 HTML 작성하여 띄워보기 (0) | 2019.05.16 |
| [JSP] 9. 공유기 설정 (포트 포워딩) (0) | 2019.05.16 |
1. loggin_Page.html
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>TITLE</title>
</head>
<body>
<form name="loggin_page" method="post" action="loggin.jsp">
id : <input type="text" name="id"/><br/>
password : <input type="text" name="password"/><br/>
<button>로그인</button>
</form>
<button onclick="location.href='reg_page.html'">회원가입</button>
</body>
</html>
2. reg_page.html
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>회원가입 페이지</title>
<script>
function check_form()
{
var id = document.reg_form.id.value ;
if(id == null || id.length < 4)
{
alert('아이디는 4자 이상이어야 한다!');
return false;
}
return true;
}
</script>
</head>
<body>
<form name="reg_form" method="post" action="reg_page.jsp" onSubmit="return check_form()">
id : <input type="text" name="id"/><br/>
password : <input type="text" name="password"/><br/>
password check : <input type="text" name="password1"/><br/>
<input type="submit" value="회원가입">
</form>
</body>
</html>>자바스크립트 <script></script>
>> var id = document.reg_form.id.value;
자바스크립트에서 document 제타위키 내용
- 웹브라우저가 HTML 문서를 적재하면 document 객체가 됨
- HTML 태그들 중 최상위 노드
- 다른 모든 노드(태그)들의 소유자
>alert 오타 주의하기
>onclick >> 클릭하면
>location.href >> reg_page.html로 이동한다는 의미
3. loggin.jsp
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<%
request.setCharacterEncoding("euc-kr");
String id = request.getParameter("id");
String password = request.getParameter("password");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<%= id %>님! 환영합니다!<br/>
</body>
</html>4. reg_page.jsp
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<%
request.setCharacterEncoding("euc-kr");
String id = request.getParameter("id");
String password = request.getParameter("password");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<%= id %>님! 환영합니다!<br/>
</body>
</html>
데이터 베이스와 연동한것이 아니기때문에 로그인도 아무거나 쳐도 로그인되고 가입도 아무거나 쳐도 가입이되는데
html과 jsp사이의 이해를 위한 것이니 동작의 흐름이 중요
jsp는 서버에서 결과를 처리해서 보여주는 결과
'JSP' 카테고리의 다른 글
| [JSP] 13. HTML 문단 태그 (0) | 2019.05.23 |
|---|---|
| [JSP] 12. HTML ? (0) | 2019.05.23 |
| [JSP] 10. Tomcat서버에 HTML 작성하여 띄워보기 (0) | 2019.05.16 |
| [JSP] 9. 공유기 설정 (포트 포워딩) (0) | 2019.05.16 |
| [JSP] 8. HTML 파일 만들기 WebContent(디렉터리) (0) | 2019.05.16 |
1. 간단한 HTML 코드 작성
form 태그
>> 기능
웹페이지의 방문자에게 정보를 얻고 서버에 내용을 전송할 수 있는 기능
action > form 이 제출되는 경우에 이동할 url주소
method > 전송 방식
name > form의 name 값을 설정
input은 form의 자식요소
이 때 button태그는 form내부에 선언되었을 때 기본값이 submit이므로
action="Register_Proc.jsp" url로 이동한다
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<form name="loggin_page" method="post" action="Register_Proc.jsp">
id : <input type="text" name="id"/><br/>
password : <input type="text" name="password"/><br/>
<button>회원가입</button><button>로그인</button>
</form>
</body>
'JSP' 카테고리의 다른 글
| [JSP] 12. HTML ? (0) | 2019.05.23 |
|---|---|
| [JSP] 11. HTML 작성 (0) | 2019.05.16 |
| [JSP] 9. 공유기 설정 (포트 포워딩) (0) | 2019.05.16 |
| [JSP] 8. HTML 파일 만들기 WebContent(디렉터리) (0) | 2019.05.16 |
| [JSP] 7. 동적 웹 프로젝트 생성하기 (0) | 2019.05.16 |
우선 공유기 환경이 아니라면 localhost나 ipconfig 를 통해보이는 ip주소를 입력하면 접속이 될 것인데
공유기는 상황이 조금 다르다.
1. 공유기 환경에서는 192.168.0.1 같은 ip를 할당 받는다. 가상ip이기 때문!
2. 그리고 외부 ip라는 것이 있다.
3. 일단 아파치를 접속하려면 http://외부ip주소:8080 이런 형식으로 접속해야 한다.
4. 우선 공유기 설정을 들어간다.
5. 실행 -> cmd -> ipconfig -all 을 입력한다.
6. 기본 게이트웨이 주소를 입력하면 공유기 페이지로 들어간다.
7. 포트 포워딩 부분을 클릭한다.
8. 외부포트를 톰캣 설정과 같은 8080포트를 열어주어야하고 내부포트도 8080로 설정해준다.
ip주소입력하는 칸이 있다면 192.168.0.102 같은 내 컴퓨터가 할당 받은 가상ip주소를 말하는데 IPv4 주소 옆의 주소다
'JSP' 카테고리의 다른 글
| [JSP] 11. HTML 작성 (0) | 2019.05.16 |
|---|---|
| [JSP] 10. Tomcat서버에 HTML 작성하여 띄워보기 (0) | 2019.05.16 |
| [JSP] 8. HTML 파일 만들기 WebContent(디렉터리) (0) | 2019.05.16 |
| [JSP] 7. 동적 웹 프로젝트 생성하기 (0) | 2019.05.16 |
| [JSP] 6. 이클립스웹 프로젝트 화면 구성 (0) | 2019.05.16 |
1. WebContent 디렉터리에 우 클릭 (New - HTML File)
2. File name : 파일이름.html
3. Finish
'JSP' 카테고리의 다른 글
| [JSP] 10. Tomcat서버에 HTML 작성하여 띄워보기 (0) | 2019.05.16 |
|---|---|
| [JSP] 9. 공유기 설정 (포트 포워딩) (0) | 2019.05.16 |
| [JSP] 7. 동적 웹 프로젝트 생성하기 (0) | 2019.05.16 |
| [JSP] 6. 이클립스웹 프로젝트 화면 구성 (0) | 2019.05.16 |
| [JSP] 4. Window - Preference 에 Server가 안보여요 (0) | 2019.05.09 |
1. Menu - File - Dynamic Web Project
2. Finish 선택
3. Dynamic Web Project 생성후 화면
'JSP' 카테고리의 다른 글
| [JSP] 9. 공유기 설정 (포트 포워딩) (0) | 2019.05.16 |
|---|---|
| [JSP] 8. HTML 파일 만들기 WebContent(디렉터리) (0) | 2019.05.16 |
| [JSP] 6. 이클립스웹 프로젝트 화면 구성 (0) | 2019.05.16 |
| [JSP] 4. Window - Preference 에 Server가 안보여요 (0) | 2019.05.09 |
| [JSP] 5. 웹 프로그래밍? (0) | 2019.05.09 |
1. 메뉴 바 - Window - Open Perspective - Other - J2EE
1을 시행하면 웹 프로그램을 작성 할 수 있는 환경이 된다.
'JSP' 카테고리의 다른 글
| [JSP] 8. HTML 파일 만들기 WebContent(디렉터리) (0) | 2019.05.16 |
|---|---|
| [JSP] 7. 동적 웹 프로젝트 생성하기 (0) | 2019.05.16 |
| [JSP] 4. Window - Preference 에 Server가 안보여요 (0) | 2019.05.09 |
| [JSP] 5. 웹 프로그래밍? (0) | 2019.05.09 |
| [JSP] 3. 이클립스 설치 (0) | 2019.05.09 |
안나오는 원인은 기본버전을 받아서 Web개발환경이 탑재되어 있지 않기 때문
'JSP' 카테고리의 다른 글
| [JSP] 7. 동적 웹 프로젝트 생성하기 (0) | 2019.05.16 |
|---|---|
| [JSP] 6. 이클립스웹 프로젝트 화면 구성 (0) | 2019.05.16 |
| [JSP] 5. 웹 프로그래밍? (0) | 2019.05.09 |
| [JSP] 3. 이클립스 설치 (0) | 2019.05.09 |
| [JSP] 2. 아파치 톰캣 설치 (0) | 2019.05.09 |
1. 웹 프로그램은 클라이언트 위주의 프로그램(HTML, 자바스크립트, 애플릿)
2. 서버 위주의 프로그램(서블릿, JSP, PHP)
| >>HTML이 정적인 페이지를 나타내는 것이 한계점 |
| >>동적인 웹페이지를 필요에 의해 개발이 된것이 서블릿, JSP, PHP, ASP 등이 등장 |
| >>자바 기반의 웹 프로그램 언어가 서블릿(Servlet)과 JSP |
|
>>HTML 코드 내부에 Servlet 이나 JSP를 사용하는 기술로 정적인 페이지를 동적으로 변화가 가능하게 만들어주는 언어 |
|
일반적인 프로그램의 실행흐름은
> 로컬 응용 프로그램 > 멀티스레드 프로그램 (시분할개념에 의한 CPU 점유 및 다중처리) > GUI프로그램에서 Frame이 실행되는 동안의 스레드 동작중 이벤트 발생 (로컬+멀티스레드) > 애플릿 (웹 브라우저에서 실행되는 자바 프로그램이며 요청 페이지에 애플릿이 기술되있을때 자바 코드의 main()메서드를 찾지 않고 |
|
public void init() -> public void start() -> public void paint(Graphics g) 실행하고 종료시에 public void stop() -> public void destroy() 이러한 동작이 일어난다.) = 애플릿 라이프사이클 |
|
일반적으로
클라이언트(웹 브라우저)-> 네이버검색-> DNS(네이버 주소 요청받음) -> 클라이언트(DNS서버에서 ip주소를 알려줌) ->웹브라우저에서 네이버로 접속 요청-> 네이버 서버 (listen상태) -> 요청내용을 클라이언트 웹브라우저로 전송
서버에서 기본적으로
회원가입 폼을 만들때 아이디 글자수나 소문자 대문자등등 데이터베이스의 내용을 쓰지 않아도 되는 것은 서버에 요청하지 않아도 되기 때문에 서버에 부담을 주지않기 위해서 서버에 요청하지않고 클라이언트(웹 브라우저)가 담당하여 처리한다. (물론 자동이 아니고 프로그래머가 코딩을 해줘야한다) |
| netstat -a listen상태를 확인 할 수 있음 |
'JSP' 카테고리의 다른 글
| [JSP] 6. 이클립스웹 프로젝트 화면 구성 (0) | 2019.05.16 |
|---|---|
| [JSP] 4. Window - Preference 에 Server가 안보여요 (0) | 2019.05.09 |
| [JSP] 3. 이클립스 설치 (0) | 2019.05.09 |
| [JSP] 2. 아파치 톰캣 설치 (0) | 2019.05.09 |
| [JSP] 1. 환경 구축 (0) | 2019.05.07 |
The Platform for Open Innovation and Collaboration | The Eclipse Foundation
The Eclipse Foundation - home to a global community, the Eclipse IDE, Jakarta EE and over 350 open source projects, including runtimes, tools and frameworks.
www.eclipse.org
저기로 들어가면 이클립스를 받을 수 있는 홈페이지가 나옵니다.
저기서 DOWNLOAD 를 찾아서 들어가면
아래에 펼쳐지는 내용을 보면 Korea, Republic OF 라고 적힌 것을 선택해서 하나만 받으시면 됩니다.
'JSP' 카테고리의 다른 글
| [JSP] 6. 이클립스웹 프로젝트 화면 구성 (0) | 2019.05.16 |
|---|---|
| [JSP] 4. Window - Preference 에 Server가 안보여요 (0) | 2019.05.09 |
| [JSP] 5. 웹 프로그래밍? (0) | 2019.05.09 |
| [JSP] 2. 아파치 톰캣 설치 (0) | 2019.05.09 |
| [JSP] 1. 환경 구축 (0) | 2019.05.07 |