Servlet과 JSP 필터는 서블릿과 JSP프로그래밍에서 아래와 같은 목적으로 사용될 수 있는 Java 클래스입니다.
클라이언트로부터의 요청이 백엔드로 가기 전에 가로채기 위해서
서버로부터의 응답이 클라이언트로 보내지기 전에 조작하기 위해서
아래는 많이 사용되는 필터들의 종류입니다.
Authentication Filters.
Data compression Filters
Encryption Filters .
Filters that trigger resource access events.
Image Conversion Filters .
Logging and Auditing Filters.
MIME-TYPE Chain Filters.
Tokenizing Filters .
XSL/T Filters That Transform XML Content.
Filter는 deployment descriptor 파일인 web.xml을 통해서 디플로이 되고 servlet 이나 JSP에 매핑이 됩니다. web.xml 파일은 <Tomcat-installation-directory>\conf 디렉토리에서 찾으실 수 있습니다.
JSP 컨테이너가 웹애플리케이션을 시작할 때, 컨테이너는 각 필터의 인스턴스를 생성합니다. 당신이 deployment descriptor에 선언한 필터들을 말이죠. 그 필터들은 정의된 순서대로 실행이 됩니다.
필터는 간단히 말해서 그냥 Java 클래스입니다. javax.servlet.Filter 인터페이스를 구현한 클래스라고 할 수 있죠. The javax.servlet.Filter interface 는 아래의 세가지 메소드를 선언하고있습니다.
S.N. | Method & Description |
---|---|
1 | public void doFilter (ServletRequest, ServletResponse, FilterChain) This method is called by the container each time a request/response pair is passed through the chain due to a client request for a resource at the end of the chain. |
2 | public void init(FilterConfig filterConfig) This method is called by the web container to indicate to a filter that it is being placed into service. |
3 | public void destroy() This method is called by the web container to indicate to a filter that it is being taken out of service. |
아래는 JSP Filter 예제입니다. 무엇을 하는고 하니, 요청이 들어올 때마다 클라이언트의 IP주소를 프린트하고 현재 시간을 뿌려줍니다. 이 예제를 통해서 JSP Filter의 기본적인 사용법을 익힐 수 있을거에요.
// Import required java libraries import java.io.*; import javax.servlet.*; import javax.servlet.http.*; import java.util.*; // Implements Filter class public class LogFilter implements Filter { public void init(FilterConfig config) throws ServletException{ // Get init parameter String testParam = config.getInitParameter("test-param"); //Print the init parameter System.out.println("Test Param: " + testParam); } public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws java.io.IOException, ServletException { // Get the IP address of client machine. String ipAddress = request.getRemoteAddr(); // Log the IP address and current timestamp. System.out.println("IP "+ ipAddress + ", Time " + new Date().toString()); // Pass request back down the filter chain chain.doFilter(request,response); } public void destroy( ){ /* Called before the Filter instance is removed from service by the web container*/ } }
이제 LogFilter.java를 컴파일하고 LogFilter.class 파일을 <Tomcat-installation-directory>/webapps/ROOT/WEB-INF/classes 디렉토리에 넣어주세요. 그리고 아래에서 매핑시켜주는 작업을 더 해야합니다.
web.xml 에서 필터를 매핑할 때는 아래처럼 사용하시면 됩니다.
<filter> <filter-name>LogFilter</filter-name> <filter-class>LogFilter</filter-class> <init-param> <param-name>test-param</param-name> <param-value>Initialization Paramter</param-value> </init-param> </filter> <filter-mapping> <filter-name>LogFilter</filter-name> <url-pattern>/*</url-pattern> </filter-mapping>
위 소스처럼 매핑하면 모든 서블릿과 JSP에 적용이 됩니다. url pattern에서 /* 이 의미하는 것이 모든 것이기 때문입니다. 즉, 이곳에 특정 servlet 이나 JSP를 넣어 줄 수도 있다는 말이죠.
이제 JSP페이지를 요청하면 웹서버 로그에서 생성된 로그를 보실 수 있습니다. Log4J 로거를 사용해서 다른 파일에 로그를 기록할 수도 있다는점도 참고하시기 바랍니다.
여러개의 필터를 사용해야 한다면 아래처럼 사용하시면 됩니다. 각각의 필터를 정의하고 각각 매핑을 하는거죠.
<filter> <filter-name>LogFilter</filter-name> <filter-class>LogFilter</filter-class> <init-param> <param-name>test-param</param-name> <param-value>Initialization Paramter</param-value> </init-param> </filter> <filter> <filter-name>AuthenFilter</filter-name> <filter-class>AuthenFilter</filter-class> <init-param> <param-name>test-param</param-name> <param-value>Initialization Paramter</param-value> </init-param> </filter> <filter-mapping> <filter-name>LogFilter</filter-name> <url-pattern>/*</url-pattern> </filter-mapping> <filter-mapping> <filter-name>AuthenFilter</filter-name> <url-pattern>/*</url-pattern> </filter-mapping>
필터의 적용 순서를 바꿀 수도 있습니다. 먼저 정의된 필터가 먼저 적용이 되는거죠. 위 예제에서는 LogFilter가 AuthenFilter보다 우선 적용이 되는거고 아래 예제에서는 AuthenFilter가 LogFilter보다 우선 적용됩니다.
<filter-mapping> <filter-name>AuthenFilter</filter-name> <url-pattern>/*</url-pattern> </filter-mapping> <filter-mapping> <filter-name>LogFilter</filter-name> <url-pattern>/*</url-pattern> </filter-mapping>
Reference : http://www.tutorialspoint.com/jsp/jsp_writing_filters.htm
[JSP] Session ( 세션 ) (0) | 2019.02.15 |
---|---|
[JSP] Cookies ( 쿠키 세팅, 읽기, 삭제하기) (0) | 2019.02.15 |
[JSP] Form 데이타 처리 (0) | 2019.02.15 |
[JSP] Response Object ( Server Response, Auto Refresh ) (0) | 2019.02.15 |
[JSP] Request Object ( Client Request ) (0) | 2019.02.15 |
자~ 오늘은 CSS 필터에 대해서 알아볼 텐데요~ 순수한 CSS를 이용해서 텍스트나 이미지 등등에 효과를 주는 방법을 알아볼 것입니다.
이 필터는 IE 4.0 이상에서만 작동합니다.
( 테스트를 해봤는데 이 CSS 필터는 최근 브라우저( Chrome, IE, FireFox )에서는 지원을 안하는 것 같네요..^^;; 그냥 이런 것도 있구나 하시면 될것 같습니다.)
자, 그럼 CSS 필터에 대해서 하나하나 알아보도록 할까요?
모든 예제는 브라우저 별로 결과가 다르게 보일 수 있다는 것을 명심하세요. 적용이 안되는 브라우저도 있습니다.
이건 뭐 이미 다 아시리라 생각합니다. 알파 값이죠. 객체의 투명도를 설정하는 필터입니다.
다음은 이 필터에서 사용할 수 있는 파라미터와 그에대한 설명입니다.
Parameter | Description |
---|---|
opacity | Level of the opacity. 0 is fully transparent, 100 is fully opaque. |
finishopacity | Level of the opacity at the other end of the object. |
style | The shape of the opacity gradient. 0 = uniform 1 = linear 2 = radial 3 = rectangular |
startX | X coordinate for opacity gradient to begin. |
startY | Y coordinate for opacity gradient to begin. |
finishX | X coordinate for opacity gradient to end. |
finishY | Y coordinate for opacity gradient to end. |
<p>Image Example:</p> <img src="/images/css.gif" alt="CSS Logo" style="Filter: Alpha(Opacity=100, FinishOpacity=0, Style=2, StartX=20, StartY=40, FinishX=0, FinishY=0)"> <p>Text Example:</p> <div style="width: 357; height: 50; font-size: 30pt; font-family: Arial Black; color: blue; Filter: Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY=0, FinishX=580, FinishY=0)">CSS Tutorials</div> |
This will be used to create blurred pictures or text with the direction and strength. Following are the parameters which can be used in this filter:
Parameter | Description |
---|---|
add | True or false. If true the image is added to the blurred image and if false the image is not added to the blurred image. |
direction | The direction of the blur, going clockwise, rounded to 45-degree increments. The default value is 270 (left). 0 = Top 45 = Top right 90 = Right 135 = Bottom right 180 = Bottom 225 = Bottom left 270 = Left 315 = Top left |
strength | The number of pixels the blur will extend. The default is 5 pixels. |
<p>Image Example:</p> <img src="/images/css.gif" alt="CSS Logo" style="Filter: Blur(Add = 0, Direction = 225, Strength = 10)"> <p>Text Example:</p> <div style="width: 357; height: 50; font-size: 30pt; font-family: Arial Black; color: blue; Filter: Blur(Add = 1, Direction = 225, Strength = 10)">CSS Tutorials</div> |
This will be used to make any particular color transparent and usually it is used with images. You can use it with scrollbars also.Following are the parameters which can be used in this filter:
Parameter | Description |
---|---|
color | The color that you'd like to be transparent. |
<p>Image Example:</p> <img src="/images/css.gif" alt="CSS Logo" style="Filter: Chroma(Color = #FFFFFF)"> <p>Text Example:</p> <div style="width: 580; height: 50; font-size: 30pt; font-family: Arial Black; color: #3300FF; Filter: Chroma(Color = #3300FF)">CSS Tutorials</div> |
This will be used to create a shadow of your object at the specified X (horizontal) and Y (vertical) offset and color. . Following are the parameters which can be used in this filter:
Parameter | Description |
---|---|
color | The color, in #RRGGBB format, of the dropshadow. |
offX | Number of pixels the drop shadow is offset from the visual object, along the x-axis. Positive integers move the drop shadow to the right, negative integers move the drop shadow to the left. |
offY | Number of pixels the drop shadow is offset from the visual object, along the y-axis. Positive integers move the drop shadow down, negative integers move the drop shadow up. |
positive | If true, all opaque pixels of the object have a dropshadow. If false, all transparent pixels have a dropshadow. The default is true. |
<p>Image Example:</p> <img src="/images/css.gif" alt="CSS Logo" style="Filter: Chroma(Color = #000000) DropShadow(Color=#FF0000, OffX=2, OffY=2, Positive=1)"> <p>Text Example:</p> <div style="width: 357; height: 50; font-size: 30pt; font-family: Arial Black; color: red; Filter: DropShadow(Color=#000000, OffX=2, OffY=2, Positive=1)">CSS Tutorials</div> |
This will be used to create a mirror image of the object. Following are the parameters which can be used in this filter:
Parameter | Description |
---|---|
FlipH | Creates a horizontal mirror image |
FlipV | Creates a vertical mirror image |
<p>Image Example:</p> <img src="/images/css.gif" alt="CSS Logo" style="Filter: FlipH"> <img src="/images/css.gif" alt="CSS Logo" style="Filter: FlipV"> <p>Text Example:</p> <div style="width: 300; height: 50; font-size: 30pt; font-family: Arial Black; color: red; Filter: FlipV">CSS Tutorials</div> |
This will be used to create a glow around the object. If it is a transparent image then glow is created around the opaque pixels of it. Following are the parameters which can be used in this filter:
Parameter | Description |
---|---|
color | The color you want the glow to be. |
strength | The intensity of the glow (from 1 to 255). |
<p>Image Example:</p> <img src="/images/css.gif" alt="CSS Logo" style="Filter: Chroma(Color = #000000) Glow(Color=#00FF00, Strength=20)"> <p>Text Example:</p> <div style="width: 357; height: 50; font-size: 30pt; font-family: Arial Black; color: red; Filter: Glow(Color=#00FF00, Strength=20)">CSS Tutorials</div> |
This will be used to convert the colors of the object to 256 shades of gray. Following are the parameters which can be used in this filter:
Parameter | Description |
---|---|
gray | Converts the colors of the object to 256 shades of gray. |
<p>Image Example:</p> <img src="/images/css.gif" alt="CSS Logo" style="Filter: Gray"> <p>Text Example:</p> <div style="width: 357; height: 50; font-size: 30pt; font-family: Arial Black; color: red; Filter: Gray">CSS Tutorials</div> |
This will be used to map the colors of the object to their opposite value in the color spectrum ie. to create a negative image. Following are the parameters which can be used in this filter:
Parameter | Description |
---|---|
Invert | Maps the colors of the object to their opposite value in the color spectrum. |
<p>Image Example:</p> <img src="/images/css.gif" alt="CSS Logo" style="Filter: invert"> <p>Text Example:</p> <div style="width: 357; height: 50; font-size: 30pt; font-family: Arial Black; color: red; Filter: invert">CSS Tutorials</div> |
This will be used to turn transparent pixels to a specified color and makes opaque pixels transparent. Following are the parameters which can be used in this filter:
Parameter | Description |
---|---|
color | The color that the transparent areas will become. |
<p>Image Example:</p> <img src="/images/css.gif" alt="CSS Logo" style="FILTER: Chroma(Color = #000000) Mask(Color=#00FF00)"> <p>Text Example:</p> <div style="width: 357; height: 50; font-size: 30pt; font-family: Arial Black; color: red; Filter: Mask(Color=#00FF00)">CSS Tutorials</div> |
This will be used to create an attenuated shadow in the direction and color specified. This is a filter lies in between Dropshadow and a Glow. Following are the parameters which can be used in this filter:
Parameter | Description |
---|---|
color | The color that you want the shadow to be. |
direction | The direction of the blur, going clockwise, rounded to 45-degree increments. The default value is 270 (left). 0 = Top 45 = Top right 90 = Right 135 = Bottom right 180 = Bottom 225 = Bottom left 270 = Left 315 = Top left |
<p>Image Example:</p> <img src="/images/css.gif" alt="CSS Logo" style="FILTER: Chroma(Color = #000000) Shadow(Color=#00FF00, Direction=225)"> <p>Text Example:</p> <div style="width: 357; height: 50; font-size: 30pt; font-family: Arial Black; color: red; Filter: Shadow(Color=#0000FF, Direction=225)">CSS Tutorials</div> |
This will be used to gives the object a sine wave distortion to make it look wavey. Following are the parameters which can be used in this filter:
Parameter | Description |
---|---|
add | A value of 1 adds the original image to the waved image, 0 does not. |
freq | The number of waves. |
light | The strength of the light on the wave (from 0 to 100). |
phase | At what degree the sine wave should start (from 0 to 100). |
strength | The intensity of the wave effect. |
<p>Image Example:</p> <img src="/images/css.gif" alt="CSS Logo" style="FILTER: Chroma(Color = #000000) Wave(Add=0, Freq=1, LightStrength=10, Phase=220, Strength=10)"> <p>Text Example:</p> <div style="width: 357; height: 50; font-size: 30pt; font-family: Arial Black; color: red; Filter: Wave(Add=0, Freq=1, LightStrength=10, Phase=20, Strength=20)">CSS Tutorials</div> |
This will be used to grayscales and flattens the color depth. Following are the parameters which can be used in this filter:
Parameter | Description |
---|---|
xray | Grayscales and flattens the color depth. |
<p>Image Example:</p> <img src="/images/css.gif" alt="CSS Logo" style="Filter: Xray""> <p>Text Example:</p> <div style="width: 357; height: 50; font-size: 30pt; font-family: Arial Black; color: red; style="Filter: Xray">CSS Tutorials</div> |
Reference : http://www.tutorialspoint.com/css/css_text_effects.htm
[CSS] 포지션(position) 속성 강좌 (2) | 2016.12.06 |
---|---|
[CSS] 27. Layouts ( 레이아웃 ) (0) | 2016.06.12 |
[CSS] 25. @ Rules ( @ 규칙들 ) (0) | 2016.06.12 |
[CSS] 24. Pseudo Elements ( 슈도 엘리먼트 ) (0) | 2016.06.12 |
[CSS] 23. Pseudo Classes ( 슈도 클래스 ) (0) | 2016.06.12 |