1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* css주석 */
        body {background-color: mistyrose;}
        h3 {color: purple;}
        hr {border: 5px solid yellowgreen;}
        span {color: blue; font-size: 20px;}
    </style>
</head>
<body>
    <h3>Css 스타일 맛보기</h3><hr>
    <p>나는  <span>웹프로그래밍</span>을 좋아합니다.</p>
</body>
</html>
 
<!--
    css 꾸미는 방법 3가지
    1.태그에 속성으로 입력
    2.head태그안에 style태그를 만들어서 작성
    3.따로 파일을 만들거나 링크를 이용
-->
 cs

위 코드를 적용하면 크롬에서 아래와 같이 나옵니다.

'Web > Html_Css' 카테고리의 다른 글

css 기초 적용 예제2  (0) 2020.03.05
css 기초 적용 예제1 , 콤마, 자손, 자식, id, class  (0) 2020.03.05
form 태그 - 날짜, 숫자 입력, 이메일, 홈페이지, 전화번호, 검색어  (0) 2020.03.05
form태그와 input 태그의 여러가지 타입 type, select태그  (0) 2020.03.04
검색 페이지 만들기  (0) 2020.03.04

html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
     <script>
         function check() {
             alert("호출");
         }
     </script>
</head>
<body>
    <h3>회원정보</h3>
    <form method="post" action="member.jsp">
        <!-- 
            label 태그안에 아래와 같이 코드를 넣으면, [이름:] 글자를 클릭 할 시
            입력박스안으로 커서가 옮겨진다
        -->
        <label>이름: <input type="text" name="name" placeholder="이름 입력" required></label><br>
        아이디: <input type="text" name="id" placeholder="아이디 입력" required><input type="button" value="중복확인"><br>
        비밀번호: <input type="password" placeholder="비밀번호 입력" name="pwd" required><br>
        비밀번호 확인: <input type="password" placeholder="비밀번호 확인" name="repwd" required><br>
        이메일: <input type="email" name="email" placeholder="Ex) aa@aa.com" required><br>
 
        이메일 수신동의:
        <input type="radio" name="mailagree" value="yes"> 동의
        <input type="radio" name="mailagree" value="no"> 비동의<br>
 
        전화번호: 
        <select name="phone">
            <option value="KT" selected>KT</option>
            <option value="SKT">SKT</option>
            <option value="U+" >U+</option>
        </select> 
        <input type="tel" name="number" placeholder="-빼고 숫자만 입력" required><br>
 
        정보이용
        <input type="checkbox" name="pagree1" value="1"> 개인정보이용
        <input type="checkbox" name="pagree2" value="2"> 개인정보사용<br>
        <input type="submit" value="가입"><br>
        <input type="button" value="가입2" onclick="check()"><br>
    </form>
</body>
</html>
 cs

 

jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<%@ page contentType="text/html; charset=utf-8"%>
<%
    request.setCharacterEncoding("utf-8");
    String name = request.getParameter("name");
    String id = request.getParameter("id");
    //ctrl+alt+방향키
    String pwd = request.getParameter("pwd");
    String email = request.getParameter("email");
    String mailagree = request.getParameter("mailagree");
    String phone = request.getParameter("phone");
    String number = request.getParameter("number");
    String pagree1 = request.getParameter("pagree1");
    String pagree2 = request.getParameter("pagree2");
    
 
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>회원가입 확인</title>
</head>
<body>
    name: <%=name%><br/>
    id: <%=id%><br/>
    email: <%=email%><br/>
    mailagree: <%=mailagree%><br/>
    phone: <%=phone%><br/>
    number: <%=number%><br/>
    agree1: <%=pagree1%><br/>
    agree2: <%=pagree2%><br/>
</body>
</html>
 cs

 

위 코드를 적용시 크롬에서 아래와 같이 나옵니다.

--

칸을채우고 [가입] 버튼을 누르면 jsp 주소로이동

'Web > Jsp' 카테고리의 다른 글

자바스크립트의 역할  (1) 2020.05.19
QueryBean  (0) 2020.05.19
out.print  (0) 2020.05.19
데이터베이스의 자료를 Jsp를 이용하여 출력하기  (0) 2020.04.23
이클립스에 톰캣 설치하기  (0) 2020.04.23
 

날짜


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h3>form에 사용된 시간 날짜 요소</h3>
    <form method="get" >
 
        <!-- 
            날짜요소는 html5에서 새로 추가됨 
            외관상, 편의상 불편하기 때문에 
            자바스크립트로 만든 날짜요소를 넣는 것이 보통
        -->
        month: <input type="month"><br>
        week: <input type="week"><br>
        date: <input type="date"><br>
        time: <input type="time"><br>
        local: <input type="datetime-local"><br>
    </form>
</body>
</html>
 cs

위 코드를 적용시 크롬에서 아래와 같이 나옵니다.

 

창을 누를시 나타나는  모습

--

숫자 입력

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h3>숫자를 입력</h3>
    <form>
        지속시간 <input type="number" min="0.0" max="10.0" step="0.5"><br>
        온도 <input type="range" min="10" max="30" list="temp">
            <datalist id="temp">
                <option value="12" label="Low"></option>
                <option value="20" label="Medium"></option>
                <option value="28" label="High"></option>
            </datalist>
    </form>
</body>
</html>
 cs

 

위 코드를 적용시 크롬에서 아래와 같이 나옵니다.

--

이메일 홈페이지 전화번호 검색어

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h3>회원가입</h3>
    <form>
        <!-- placeholder는 예시나 안내를 보여줌 -->
        email <input type="email" placeholder="id@host"><br>
        홈페이지 <input type="url" placeholder="http://"><br>
        전화번호 <input type="url" placeholder="010-0000-0000"><br>
        검색어 <input type="search" placeholder="검색어"><br>
    </form>
</body>
</html>
 cs

위 코드를 적용시 크롬에서 아래와 같이 나옵니다.

'Web > Html_Css' 카테고리의 다른 글

css 기초 적용 예제1 , 콤마, 자손, 자식, id, class  (0) 2020.03.05
Css 스타일 맛보기  (0) 2020.03.05
form태그와 input 태그의 여러가지 타입 type, select태그  (0) 2020.03.04
검색 페이지 만들기  (0) 2020.03.04
form 폼 태그  (0) 2020.03.04

html파일에서 사용할 수 있는 코드
html
css
j.s

jsp 파일에서 사용할 수 있는 코드

html
css
j.s
jsp
java

'낙서장' 카테고리의 다른 글

200313  (0) 2020.03.13
코드펜 테스트  (0) 2020.03.08
웹서버 메모1  (0) 2020.03.04
이클립스 코드 실행 단축키, form 태그 method 속성  (0) 2020.03.04
포트번호, iframe  (0) 2020.03.03
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form>
        <textarea cols="20" rows="5">
폼에 들어가는 value 영역
        </textarea>
    </form><hr>
    <form>
        
        <!-- 속성 style="resize: none;"을 넣으면 사이즈 조절이 안되도록 가능 -->
        <textarea cols="20" rows="5" style="resize: none;">
폼에 들어가는 value 영역
        </textarea>
    </form><hr>
    <form>
 
        <!--input의 list속성의 값과 datalist의 id값은 반드시 같아야한다 -->
        <input list="country">
        <datalist id="country">
            <option>대한민국</option>
            <option>일본</option>
            <option>중국</option>
        </datalist><br>
        짜장면 <input type="checkbox" value="1" name="china">
 
        <!-- checkbox타입에서 속성checked 를 입력하면 실행시 기본으로 체크가 되어 있다 -->
        짬뽕 <input type="checkbox" value="2" name="china" checked>
        탕수육 <input type="checkbox" value="3" name="china" checked><br>
 
        <!-- 
            checkbox 타입은 checked를 여러항목에 쓸수 있는 반면,
            radio 타입은 checked를 여러개 써도 하나만 선택된다
        -->
        짜장면 <input type="radio" value="1" name="china" checked>
        짬뽕 <input type="radio" value="2" name="china" checked>
        탕수육 <input type="radio" value="3" name="china"><br>
    </form><hr>
 
    <!-- 
        select타입의 폼에서 option태그 안에 속성selected 
        를 입력하면 실행시 기본으로 체크가 되어 있다 
    -->
    <select name="china">
        <option value="1">짜장면</option>
        <option value="2">짬뽕</option>
        <option value="3" selected>탕수육</option>
    </select><hr>
    글자색 선택 <input type="color" value="#FFFFFF" 
    onchange="document.body.style.color=this.value"><br>
    배경색 선택 <input type="color" value="#FFFFFF" 
    onchange="document.body.style.background=this.value"><br>
</body>
</html>
 cs

위 코드를 적용하면 아래와 같이 나옵니다.

--

글자색, 배경색 선택

'Web > Html_Css' 카테고리의 다른 글

Css 스타일 맛보기  (0) 2020.03.05
form 태그 - 날짜, 숫자 입력, 이메일, 홈페이지, 전화번호, 검색어  (0) 2020.03.05
검색 페이지 만들기  (0) 2020.03.04
form 폼 태그  (0) 2020.03.04
html 미디어 (비디오, 오디오) 재생  (0) 2020.03.04

웹서버는 24시간 365일 켜져 있는 것이 보통이다.
client -> server - 요청 
server -> client - 응답
client, server - c/s

client 가 전송한 정보를 server가 받아서 database에서 확인하여
server로 결과값을 전송 후 client로 응답

웹상에서보이는 .jsp확장자 - 회사에서 원하는대로 변경가능

'낙서장' 카테고리의 다른 글

코드펜 테스트  (0) 2020.03.08
html파일과 jsp파일에서 사용할 수 있는 언어  (0) 2020.03.04
이클립스 코드 실행 단축키, form 태그 method 속성  (0) 2020.03.04
포트번호, iframe  (0) 2020.03.03
테이블, 정적페이지, 동적페이지  (0) 2020.03.03
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h3>네이버 검색하기</h3>
    <form method="get" action="https://search.naver.com/search.naver">
        검색어 <input name="query">
        <input type="submit" value="검색">
    </form><hr>
    <h3>구글 검색하기</h3>
    <form method="get" action="https://www.google.com/search">
        검색어 <input name="q">
        <input type="submit" value="검색">
    </form><hr>
    <h3>다음 검색하기</h3>
    <form method="get" action="https://search.daum.net/search">
        검색어 <input name="q">
        <input type="submit" value="검색">
    </form><hr>
</body>
</html>
 cs

위 코드를 적용하면 아래와 같이 나옵니다.

--

검색시

'Web > Html_Css' 카테고리의 다른 글

form 태그 - 날짜, 숫자 입력, 이메일, 홈페이지, 전화번호, 검색어  (0) 2020.03.05
form태그와 input 태그의 여러가지 타입 type, select태그  (0) 2020.03.04
form 폼 태그  (0) 2020.03.04
html 미디어 (비디오, 오디오) 재생  (0) 2020.03.04
페이지 내의 프레임에 사이트 띄우기  (0) 2020.03.04

이클립스 코드 실행 단축키 ctrl + f11

form 태그의  method속성에서 

get 방식은 무언가를 가져오는 것

로그인에 사용시 주소에 아이디 패스워드가 노출된다



post 방식은 무언가를 보내는 것

로그인에 사용시 주소에 아이디 패스워드가 노출되지 않는다

'낙서장' 카테고리의 다른 글

html파일과 jsp파일에서 사용할 수 있는 언어  (0) 2020.03.04
웹서버 메모1  (0) 2020.03.04
포트번호, iframe  (0) 2020.03.03
테이블, 정적페이지, 동적페이지  (0) 2020.03.03
브라우저 출력  (0) 2020.03.03

+ Recent posts

티스토리툴바