'분류 전체보기' 카테고리의 글 목록 (3 Page)

분류 전체보기

JSP servlet 맵핑

잰찌 2018. 10. 19. 03:36

2018. 10. 19. 03:36

servlet 맵핑

: 너무 길고, 보안에 노출되어 있는 경로를 간단하게 맵핑하는 것 입니다.

기존 경로 : http://loclalhost:8282/testservlet/20181019.TestServlet

URL맵핑 경로 : http://localhost:8282/testservlet/TS

기존 경로의 서블릿 파일명인 testservlet/ 뒤로 맵핑을 하여 간단하게 하나의 닉네임TS로 바꾸어 주었습니다.

어노테이션방식

맵핑명을 java소스에 직접 입력합니다.

web.xml에서 입력

<servlet-name>

:임의의 이름을 만들어 준다

<servlet-class>

:맵핑할 클래스 파일명을 패키지명까지 포합하여 정확하게 입력한다.

<url-pattern>

:servlet-class의 클래스를 매핑할 임의의 이름 입력한다(/로 시작해야함)

만들때 설정하는 법

결과

'Jsp' 카테고리의 다른 글

Jsp,JavaScript로 구구단 만들기 (0)	2018.10.23

HTML div와span태그의 차이점

잰찌 2018. 10. 18. 22:03

2018. 10. 18. 22:03

Html로 레이아웃을 꾸밀 때 필연적으로 사용하게 되는 태그가 있습니다.

바로 <div>와 <span>태그 입니다.

이 두태그는 비슷하면서도 다른데 차이점을 알아보겠습니다.

<div>

-가로폭을 전부 차지합니다.

-사각형 박스로 구역을 정합니다.

-폭과 넓이를 지정할 수 있습니다.

-사용할 때 마다 줄바꿈을 동반합니다.

<span>

-태그 안의 내용만 차지합니다.

-문장단위로 지정됩니다.

-폭과 넓이 지정이 불가능합니다.

-줄 바꿈 없이 중간에 들어갈 수 있습니다.

예제

가로폭을 전부차지하는 div와 달리 태그안의 내용까지만 차지하는 span

크기조정가능한 div(상자안에 있어요!!) 와 불가능한 span(문장단위로 지정이 되요!!)

필연적인 줄바꿈div와 줄바꿈이 없는 span

'Html' 카테고리의 다른 글

HTML 이미지 넣기(절대경로와 상대경로) (0)	2018.10.18

HTML 이미지 넣기(절대경로와 상대경로)

잰찌 2018. 10. 18. 21:18

2018. 10. 18. 21:18

절대경로

어떠한 웹 페이지나 파일이 가지고 있는 고유한 경로를 절대경로라고 합니다.

웹페이지에서 이미지의 URL을 가지고 오거나 내 컴퓨터 안의 이미지 경로를 가져올 때 절대경로를 사용하는 것 입니다.

<img src="http;//www......../image.jpg"> -웹페이지 이미지 주소를 불러오는경우

<img src="C:\user\...\image.jpg"> -내 컴퓨터 안의 이미지 경로를 불러오는 경우

위의 방식을 절대경로를 이용한 방식이라고 합니다.

그러나 절대경로를 이용하면 웹페이지의 이미지가 사라지거나 내컴퓨터에서 만든 파일을

다른 웹서버로 올릴 때에는 다시 고쳐줘야 하는 불편함이 있습니다.

상대경로

작업중인 공간을 기준으로 상대적인 위치를 가리키는 경로를 상대경로라고 합니다.

이미지의 파일이 같은 폴더에 저장되어있을 경우 파일명만 적어주면되고

하위 폴더에 저장되어 있는 경우에는 "폴더명/이미지파일" 처럼 사용하면되고

상위 폴더에 저장되어 있는 경우에는 "../폴더명/이미지파일" 처럼 사용하시면 됩니다.

<img src="image.jpg"> -같은 폴더안의 image사용

<img src="file/image.jpg"> -하위폴더 file안의 image 사용

<img src="../file/image.jpg"> -상위폴더 file안의 image 사용

'Html' 카테고리의 다른 글

HTML div와span태그의 차이점 (0)	2018.10.18

Java Script 이용 계산기 만들기

잰찌 2018. 10. 18. 19:45

2018. 10. 18. 19:45

JavaScript로 처음 만들어본 계산기 UI 입니다.

HTML을 사용하였고 table을 이용했습니다.

분홍 박스는 연산자 부분이고 기본지원 eval 함수를 사용하였습니다.

파란 박스는 함수 부분이고 기본 지원 Math 함수를 사용하였습니다.

노란 박스는 abs함수가 있다고는 하나 직접 만들어보았습니다.

계산기의 함수부분입니다.

function btn(num)

계산기 텍스트 창에 숫자 넣기 및 total 값 넣기

function btnclear()

total 값 초기화 및 텍스트 창 내용 지우기

function btncal()

계산된 값 텍스트 창에 띄우기

function btnop()

연산자 클릭시 텍스트 창 내용 지우기 및 total 연산자 추가

function btnpow()

제곱 값을 total 값 넣기 및 텍스트 창 출력

function btncos()

cos 값을 total 값 넣기 및 텍스트 창 출력

function btntan()

tan 값을 total 값 넣기 및 텍스트 창 출력

function btnabs()

절대값 변환 및 total 값넣기 및 텍스트 창 출력

전체 코드

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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
 
    <table align="center" bgcolor="#7f84b9">
        <tr align="center">
            <td><input type="text" id="text"
                style="width: 98%; height: 20px"><br></td>
        </tr>
 
        <tr align="center">
            <td><input type="button"
                style="width: 49%; height: 30px; background-color: #b8a0c8;"
                value="clear" onclick="btnclear()"> <input type="button"
                onclick="btncal()"
                style="width: 49%; height: 30px; background-color: #b8a0c8;"
                value="="></td>
        </tr>
 
        <tr align="center">
            <td><input type="button" onclick="btn(1)"
                style="width: 70px; height: 40px; background-color: #f2bdd0;"
                value="1"> <input type="button" onclick="btn(2)"
                style="width: 70px; height: 40px; background-color: #f2bdd0;"
                value="2"> <input type="button" onclick="btn(3)"
                style="width: 70px; height: 40px; background-color: #f2bdd0;"
                value="3"> <input type="button" onclick="btnop('+')"
                style="width: 70px; height: 40px; background-color: #b8a0c8;"
                value="+"> <input type="button" onclick="btnpow()"
                style="width: 70px; height: 40px; background-color: #b8a0c8;"
                value="x^y"></td>
        </tr>
 
        <tr align="center">
            <td><input type="button" onclick="btn(4)"
                style="width: 70px; height: 40px; background-color: #f2bdd0;"
                value="4"> <input type="button" onclick="btn(5)"
                style="width: 70px; height: 40px; background-color: #f2bdd0;"
                value="5"> <input type="button" onclick="btn(6)"
                style="width: 70px; height: 40px; background-color: #f2bdd0;"
                value="6"> <input type="button" onclick="btnop('-')"
                style="width: 70px; height: 40px; background-color: #b8a0c8;"
                value="-"> <input type="button" onclick="btnsin()"
                style="width: 70px; height: 40px; background-color: #b8a0c8;"
                value="sin"></td>
        </tr>
 
        <tr align="center">
            <td><input type="button" onclick="btn(7)"
                style="width: 70px; height: 40px; background-color: #f2bdd0;"
                value="7"> <input type="button" onclick="btn(8)"
                style="width: 70px; height: 40px; background-color: #f2bdd0;"
                value="8"> <input type="button" onclick="btn(9)"
                style="width: 70px; height: 40px; background-color: #f2bdd0;"
                value="9"> <input type="button" onclick="btnop('*')"
                style="width: 70px; height: 40px; background-color: #b8a0c8;"
                value="*"> <input type="button" onclick="btncos()"
                style="width: 70px; height: 40px; background-color: #b8a0c8;"
                value="cos"></td>
        </tr>
 
        <tr align="center">
            <td><input type="button" onclick="btn(0)"
                style="width: 70px; height: 40px; background-color: #f2bdd0;"
                value="0"> <input type="button" onclick="btnabs()"
                style="width: 70px; height: 40px; background-color: #f2bdd0;"
                value="+/-"> <input type="button" onclick="btn('.')"
                style="width: 70px; height: 40px; background-color: #f2bdd0;"
                value="."> <input type="button" onclick="btnop('/')"
                style="width: 70px; height: 40px; background-color: #b8a0c8;"
                value="/"> <input type="button" onclick="btntan()"
                style="width: 70px; height: 40px; background-color: #b8a0c8;"
                value="tan"></td>
        </tr>
 
 
    </table>
 
 
    <script type="text/javascript">
 
    var total='';
    function btn(num)
    {
        total+=num;
        document.getElementById("text").value+=num;
    }
    
    function btnclear(){
        document.getElementById("text").value="";
        total='';
    }
    
    function btncal()
    {
        document.getElementById("text").value=eval(total);
    }
    
    function btnop(num)
    {
        total+=num;
        document.getElementById("text").value="";
    }
    
    function btnpow()
    {
        total=Math.pow(total,2);
        document.getElementById("text").value=total;
        
    }
    
    function btnsin()
    {
        total=Math.sin(total*(Math.PI/180));  
        document.getElementById("text").value=total;
    }
    function btncos()
    {
        total=Math.cos(total*(Math.PI/180)); 
        document.getElementById("text").value=total;
    }
    function btntan()
    {
        total=Math.tan(total*(Math.PI/180)); 
        document.getElementById("text").value=total;
    }
    function btnabs()
    {
        total=total*-1;
        document.getElementById("text").value=total;
    }
    
    
 
    
    
    
</script>
 
 
</body>
</html>
Colored by Color Scripter
cs

'JavaScript' 카테고리의 다른 글

[JavaScript]시간이 흘러가는 시계 만들기 (0)	2018.10.23
[Java Script]글자 나타내기 (0)	2018.10.23
[JavaScript]랜덤 이미지 변경 (0)	2018.10.23
JavaScript 를 이용한 달력 만들기 (2)	2018.10.19
JavaScript를 이용한 배경색 바꾸기 (1)	2018.10.19