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
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
 
<%!
public String getClientIP(HttpServletRequest request) {
    String ip = request.getHeader("X-FORWARDED-FOR"); 
    
    if (ip == null || ip.length() == 0) {
        ip = request.getHeader("Proxy-Client-IP");
    }
 
    if (ip == null || ip.length() == 0) {
        ip = request.getHeader("WL-Proxy-Client-IP");  // 웹로직
    }
 
    if (ip == null || ip.length() == 0) {
        ip = request.getRemoteAddr() ;
    }
    
    return ip;
 
}
%>
 
<%=getClientIP(request) %>
cs


'Language > JSP' 카테고리의 다른 글

JSP 국제화 태그  (0) 2015.07.20


javaScript_정규표현식.txt


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
/*선언*/
변수명 = /정규표현식 패턴/;
var 변수명 = /정규표현식 패턴/;
 
변수명 = new RegExp("정규표현식 패턴");
var 변수명 = new RegExp("정규표현식 패턴");
 
실행
변수명.exce("문자(열)");
    returnType :Array, null
    설명 :정규표현식 패턴에 해당하는 문자를 배열로 return 해당하지 않는다면 null reutrn
 
변수명.test("문자(열)"); 
     returnType :boolean
    설명 :정규표현식 패턴에 해당한다면 true 해당하지 않는다면 false를 return
 
/*문자(열) 사용*/
문자(열).match(정규표현식패턴);
    returnType :Array, null
    설명 :match()메서드의 인자 값을 정규표현식패턴을 주게되면 정규표현식패턴에 해당하는 배열 return 해당하지 않는다면 null reutrn
 
문자(열).replace(정규표현식패턴, 치환할 문자(열))
    returnType :문자(열)
    설명 : replace()메서드의 첫번째 인자 값을 정규표현식패턴으로 두번째 인자 값을 지환할 값을 주개되면 정규표현식에 해당하는 문자(열)을 치환한 문자(열)로 return
 
/*옵션*/
i : 대, 소문자 구분없이 패턴에 해당하는 문자를 찾는다.
g : 패턴에 해당하는 모든 문자를 찾는다.
......
 
변수명 = "/정규표현식 패턴/옵션";
var 변수명 = "/정규표현식 패턴/옵션";
 
변수명 = new RegExp("정규표현식 패턴", 옵션);
var 변수명 = new RegExp("정규표현식 패턴", 옵션);


'Language > 정규표현식' 카테고리의 다른 글

정규표현식 문법  (0) 2015.07.22


정규표현식.txt


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
^            : 문자의 첫 글자를 찾는다.
$            : 문자의 끝 즐자를 찾는다.
\            : 이스케이프(의미있는 문자[$, ., ^ 등]를 일반 문자로 변환시킬수 있다.)
.            : 모든 문자를 가리킨다.
.            : .을 여러개(......)를 사용하게되면 .갯수만큼 문자를 묶는다.
[문자]         : []안에 들어있는 문자를 찾는다.
[문자-문자]    : 입력한 문자의 범위에 해당하는 문자를 찾는다.
[^문자]        : 입력한 문자에 해당하지 않는 문자를 찾는다.
(문자|문자)     : ()에 문자를 | 구분하여 한 덩어리로 만든다.
\w            : 대,소 문자, 숫자, _,를 찾는다.
\W            : \w의 반대의미 이다.
\d            : 숫자를 찾는다.
\D            : \d의 반대의미 이다.
\b            : 문자 또는 단어를 식별할 수 있다.
              (\b문자 : 입력한 문자 또는 단어로 시작하는 문자 또는 단어를 찾는다.)
              (문자\b : 입력한 문자로 또는 단어로 끝나는 문자 또는 단어를 찾는다.)
              (\b문자 또는 단어\b : 입력한 문자 또는 단어를 찾는다.)
\B            : \b의 반대의미 이다.
\A            : ^은 다중 행 이더라도 그 행의 첫 문자를 찾지만 \A는 다중 행인 경우 다중 행의 첫 문자만을 찾는다.
\Z            : $는 다중 행 이더라도 그 행의 끝 문자를 찾지만 \Z는 다중 행인 경우 다중 행의 끝 문자만을 찾는다.
\s            : 공백을 찾는다.
 
(오른쪽 문자를 기준으로 생각하면 쉽다.)
문자*문자        : 왼쪽의 문자 수가 0 또는 1 또는 어러개를 의미이다.
문자+문자        : 왼쪽의 문자 수가 1 또는 어러개를 의미이다.
문자?문자        : 왼쪽의 문자 수가 0 또는 1을 의미이다.
문자{숫자}    : 왼쪽의 문자 수가 입력한 수량만큼을 의미한다.
              (문자{숫자,숫자}를 이용하면 수량의 범위를 의미한다.)
              (문자{숫자,})를 사용하면 입력한 수량 이상을 의미한다.)
문자*?        : *는 0 또는 1 또는 여러개의 의미를 가지지만 수량자(?)
              를 붙이게되면 최소 수량 값인 0을 의미한다.
문자+?        : +는 1 또는 여러개의 의미를 가지지만 수량자(?)
              를 붙이게되면 최소 수량 값인 1을 의미한다.
문자??        : ?는 0 또는 1 의미를 가지지만 수량자(?)
              를 붙이게되면 최소 수량 값인 1을 의미한다.
문자(?=문자)    : 문자검색조건으로는 ?=문자의 문자를 사용하지만 찾은 문자의 값은 ?=문자 에 입력한 문자는 포함되지 않는다. 


'Language > 정규표현식' 카테고리의 다른 글

javaScript 정규표현식 사용  (0) 2015.07.22

출처 :  http://naradesign.net/wp/2012/05/30/1823/


CSS3 미디어쿼리 이해

본문 건너 뛰기

출력 장치의 여러 특징 가운데 일부를 참조하여 CSS 코드를 분기 처리함으로써 하나의 HTML 소스가 여러가지 뷰를 갖도록 구현할 수 있는 명세이다. 일반적으로 뷰포트 해상도에 따라 CSS 코드를 분기한다.

CSS 코드 내부에서 분기하는 방법

CSS 코드 내부에서 사용하는 미디어 쿼리의 기본적인 문법 예는 다음과 같다. 일반적으로 권장하고 널리 쓰이는 방식이다.

@media only all and (조건문) {실행문}

  • @media: 미디어 쿼리가 시작됨을 선언한다. @media, only, all, and, (조건문) 사이에 포함되어 있는 공백은 필수적이다.
  • only: only 키워드는 미디어 쿼리를 지원하는 사용자 에이전트만 미디어 쿼리 구문을 해석하라는 명령이며 생략 가능하다. 생략했을 때 기본 값은 only로 처리 된다. 생략해도 무방하므로 이 키워드는 일반적으로 작성하지 않는다. 이 자리에는 not 키워드를 사용할 수 있는데 뒤에 오는 모든 조건을 부정하는 연산을 한다.
  • all: all 키워드는 미디어 쿼리를 해석해야 할 대상 미디어를 선언한 것이다. all 이면 모든 미디어가 이 구문을 해석해야 한다. all 키워드 대신 screen 또는 print와 같은 특정 미디어를 구체적으로 언급할 수도 있다. all 키워드는 생략 가능하고 생략했을 때 기본 값은 all 으로 처리된다. 이 밖에도 다양한 미디어 타입(all, aural, braille, embossed, handheld, print, projection, screen, speech, tty, tv)이 있다. all, screen, print를 가장 널리 쓴다.
  • and: and 키워드는 논리적으로 ‘AND’ 연산을 수행하여 앞과 뒤의 조건을 모두 만족해야 한다는 것을 의미한다. 조건이 유일하거나 또는 only, all과 같은 선행 키워드가 생략되면 and 키워드는 사용하지 말아야 한다. and 대신 콤마 ‘,’ 기호를 사용하면 ‘OR’ 연산을 수행한다. ‘OR’ 연산은 나열된 조건 중에서 하나만 참이어도 {실행문}을 해석한다. OR 조건을 위한 콤마 ‘,’ 기호 사용시 유의점.
  • (조건문): 브라우저는 조건문이 참일때{실행문}을 처리하고 거짓일 때 무시한다. 조건문은 두 가지 이상 등장할 수 있다. 둘 이상의 조건문은 ‘and’ 키워드 또는 콤마 ‘,’ 기호로 연결해야 한다.
  • {실행문}: 일반적인 CSS 코드를 이 괄호 안에 작성한다. 브라우저는 (조건문)이 참일때 실행문 안쪽에 있는 CSS 코드를 해석한다.

CSS 코드 외부에서 분기하는 방법

조건문에 따라 별도의 외부 CSS 파일을 참조하여 분기하는 방법은 다음과 같다. 이 방식은 성능 최적화 측면에서 권장하지 않는다.

<link rel=”stylesheet” type=”text/css” media=”all and (조건A)” href=”A.css”>
<link rel=”stylesheet” type=”text/css” media=”all and (조건B)” href=”B.css”>

데스크탑 브라우저 사용자가 언제든 조건을 변경(예를 들면 창 크기를 조절해서 해상도를 바꿈)할 수 있기 때문에 웹 브라우저는 조건에 관계 없이 A.css 파일과 B.css 파일을 항상 요청한다. HTTP 요청을 불필요하게 두 번 발생시켜 이 페이지를 처음 로딩하는 사용자에게는 성능 저하의 원인이 된다. CSS 파일은 하나로 병합하고 CSS 코드 내부에서 조건 분기하는 방식을 권장한다.

미디어 쿼리 코드 템플릿

아래 코드는 모든 해상도를 커버하기 위한 미디어 쿼리 코드 템플릿이다. All, Mobile, Tablet, Desktop 으로 기기별 대응 코드를 분류 했지만 Liquid 레이아웃 기법을 사용하면 사실상 모든 해상도를 커버할 수 있다.

@charset “utf-8″;

/* All Device */
모든 해상도를 위한 공통 코드를 작성한다. 모든 해상도에서 이 코드가 실행됨.

/* Mobile Device */
768px 미만 해상도의 모바일 기기를 위한 코드를 작성한다. 모든 해상도에서 이 코드가 실행됨. 미디어 쿼리를 지원하지 않는 모바일 기기를 위해 미디어 쿼리 구문을 사용하지 않는다.

/* Tablet & Desktop Device */
@media all and (min-width:768px) {
사용자 해상도가 768px 이상일 때 이 코드가 실행됨. 테블릿과 데스크톱의 공통 코드를 작성한다.
}

/* Tablet Device */
@media all and (min-width:768px) and (max-width:1024px) {
사용자 해상도가 768px 이상이고 1024px 이하일 때 이 코드가 실행됨. 아이패드 또는 비교적 작은 해상도의 랩탑이나 데스크톱에 대응하는 코드를 작성한다.
}

/* Desktop Device */
@media all and (min-width:1025px) {
사용자 해상도가 1025px 이상일 때 이 코드가 실행됨. 1025px 이상의 랩탑 또는 데스크톱에 대응하는 코드를 작성한다.
}

조건문이 될 수 있는 특징들

width / height

뷰포트의 너비와 높이. 뷰포트의 크기는 HTML body 콘텐츠를 표시하는 영역으로 실제 스크린의 크기와는 다르다. 반응형 웹 구현시 가장 일반적으로 사용하는 조건이 된다.

  • Value: <length>
  • Applies to: visual and tactile media types
  • Accepts min/max prefixes: yes

Example:

@media all and (min-width:768px) and (max-width:1024px) { … } // 뷰포트 너비가 768px 이상 ‘그리고’ 1024px 이하이면 실행

@media all and (width:768px), (width:1024px) { … } // 뷰포트 너비가 768px 이거나 ‘또는’ 1024px 이면 실행

@media not all and (min-width:768px) and (max-width:1024px) { … } // 뷰포트 너비가 768px 이상 ‘그리고’ 1024px 이하가 ‘아니면’ 실행

device-width / device-height

스크린의 너비와 높이. 스크린은 출력 장치가 픽셀을 표시할 수 있는 모든 영역으로 일반적으로 HTML body 콘텐츠를 표시하는 뷰포트 보다 크다.

  • Value: <length>
  • Applies to: visual and tactile media types
  • Accepts min/max prefixes: yes

Example:

@media all and (device-width:320px) and (device-height:480px) { … } // 스크린 너비가 320px ‘그리고’ 높이가 480px 이면 실행

@media all and (min-device-width:320px) and (min-device-height:480px) { … } // 스크린 너비가 최소 320px 이상 ‘그리고’ 높이가 최소 480px 이상이면 실행

orientation

뷰포트의 너비와 높이 비율을 이용하여 세로 모드인지 가로 모드인지를 판단한다.

  • Value: portrait | landscape
  • Applies to: bitmap media types
  • Accepts min/max prefixes: no

Example:

@media all and (orientation:portrait) { … } // 세로 모드. 뷰포트의 높이가 너비에 비해 상대적으로 크면 실행

@media all and (orientation:landscape) { … } // 가로 모드. 뷰포트의 너비가 높이에 비해 상대적으로 크면 실행

aspect-ratio

뷰포트의 너비와 높이에 대한 비율. ‘너비/높이’ 순으로 조건을 작성한다. min/max 접두사를 사용하면 너비 값의 최소/최대 비율을 정할 수 있다.

  • Value: <ratio>
  • Applies to: bitmat media types
  • Accepts min/max prefixes: yes

Example:

@media all and (aspect-ratio:5/4) { … } // 뷰포트 너비가 5, 높이가 4 비율이면 실행

@media all and (min-aspect-ratio:5/4) { … } // 뷰포트 너비가 5/4 비율 이상이면 실행

@media all and (max-aspect-ratio:5/4) { … } // 뷰포트 너비가 5/4 비율 이하면 실행

device-aspect-ratio

스크린의 너비와 높이에 대한 비율. ‘너비/높이’ 순으로 조건을 작성한다. min/max 접두사를 사용하면 너비 값의 최소/대최 비율을 정할 수 있다.

  • Value: <ratio>
  • Applies to: bitmap media types
  • Accepts min/max prefixes: yes

Example:

@media all and (device-aspect-ratio:5/4) { … } // 스크린 너비가 5, 높이가 4 비율이면 실행

@media all and (min-device-aspect-ratio:5/4) { … } // 스크린 너비가 5/4 비율 이상이면 실행

@media all and (max-device-aspect-ratio:5/4) { … } // 스크린 너비가 5/4 비율 이하면 실행

color

출력 장치의 색상에 대한 비트 수. 출력 장치가 컬러가 아닌 경우 ’0′의 값에 대응한다.

  • Value: <integer>
  • Applies to: visual media types
  • Accepts min/max prefixes: yes

Example:

@media all and (color) { … } // 출력 장치가 컬러를 지원하면 실행

@media all and (color:0) { … } // 출력 장치가 컬러가 아니면 실행

@media all and (color:8) { … } // 출력 장치가 8비트 색상이면 실행

@media all and (min-color:8) { … } // 출력 장치가 8비트 이상 색상이면 실행

@media all and (max-color:8) { … } // 출력 장치가 8비트 이하 색상이면 실행

color-index

출력 장치가 색상 색인 테이블을 사용하는 경우 표현할 수 있는 색의 수. 출력 장치가 색상 색인 테이블을 사용하지 않으면 ’0′의 값에 대응한다. 현재 제대로 지원하는 브라우저가 없다.

  • Value: <integer>
  • Applies to: visual media types
  • Accepts min/max prefixes: yes

Example:

@media all and (color-index) { … } // 출력 장치가 색상 색인 테이블을 사용하면 실행

@media all and (color-index:0) { … } // 출력 장치가 색상 색인 테이블을 사용하지 않으면 실행

@media all and (color-index:256) { … } // 출력 장치가 256 색을 지원하면 실행

@media all and (min-color-index:256) { … } // 출력 장치가 256 이상 색을 지원하면 실행

@media all and (max-color-index:256) { … } // 출력 장치가 256 이하 색을 지원하면 실행

monochrome

출력 장치가 흑백인 경우 픽셀당 비트 수. 출력 장치가 흑백이 아니라면 ’0′의 값에 대응한다.

  • Value: <integer>
  • Applies to: visual media types
  • Accepts min/max prefixes: yes

Example:

@media all and (monochrome) { … } // 출력 장치가 흑백이면 실행

@media all and (monochrome:0) { … } // 출력 장치가 흑백이 아니면 실행

@media all and (min-monochrome:2) { … } // 출력 장치가 흑백이고 2비트 이상이면 실행

@media all and (max-monochrome:2) { … } // 출력 장치가 흑백이고 2비트 이하이면 실행

resolution

출력 장치의 해상력에 대응한다. min/max 접두사는 사각형 아닌 픽셀(인쇄 장치)에도 대응하지만 접두사 없는 resolution 조건은 사각형 픽셀에만 대응한다. 조건의 값으로 dpi와 dpcm 단위를 사용할 수 있다.

  • Value: <resolution>
  • Applies to: bitmap media types
  • Accepts min/max prefixes: yes

Example:

@media all and (resolution:96dpi) { … } // 1인치당 96개의 사각형 화소를 제공하면 실행

@media all and (min-resolution:96dpi) { … } // 1인치당 96개 이상의 화소를 제공하면 실행

@media all and (max-resolution:96dpi) { … } // 1인치당 96개 이하의 화소를 제공하면 실행

scan

TV의 스캔 방식에 따라 대응한다. progressive 값은 초당 60회 수준의 고화질 스캔에 대응하고 interlace 값은 초당 30회 수준의 일반 스캔에 대응한다. 대부분의 HDTV는 progressive와 interlace 방식을 모두 지원하고 있다.

  • Value: progressive | interlace
  • Applies to: “tv” media types
  • Accepts min/max prefixes: no

Example:

@media tv and (scan:progressive) { … } // 초당 60회 수준의 고화질 스캔 방식 TV에 대응한다

@media tv and (scan:interlace) { … } // 초당 30회 수준의 일반 스캔 방식 TV에 대응한다

grid

출력 장치가 그리드 방식이면 대응한다. 그리드 방식은 타자기와 같이 고정된 글꼴만 사용하는 장치이다. 통상 출력 장치는 비트맵이 아니면 그리드 방식이다. 값은 정수 ’0′과 ’1′ 뿐이고 ’0′의 값은 비트맵 방식에 대응한다.

  • Value: <integer> 0 | 1
  • Applies to: visual and tactile media types
  • Accepts min/max prefixes: no

Example:

@media all and (grid) { … } // 출력 장치가 그리드 방식이면 실행

@media all and (grid:0) { … } // 출력 장치가 그리드 방식이 아니면 실행

@media all and (grid:1) { … } // 출력 장치가 그리드 방식이면 실행


'Language > CSS' 카테고리의 다른 글

CSS 선택자(Selector)의 종류 및 간단한 효과주기  (0) 2015.07.22

출쳐: http://www.clearboth.org/css3_1_by_isdn386/


CSS 선택자(Selector)의 종류 및 간단한 효과주기.pdf

이 강좌는 월간 w.e.b. HOW TO 2011년 02호에 게재되어 있습니다.

언제부터인가 우리의 웹은 이미지에 의존하는 웹페이지, 또한 당연하다는 듯이 각종 오브젝트 타입의 컨텐츠를 무분별하게 사용하여 무거운 웹사이트를 구축했었고 또, 대부분의 웹사이트들은 웹표준이나 웹접근성 보다는 화려한 그래픽으로 특정브라우저에 맞춰진 Content Design으로 처리해 왔다.

그러나 기존 포토샵 같은 이미지편집 Tool이나 플래시 같은 모션그래픽 툴로 밖에 할 수 없었던 효과들이 CSS3를 사용함으로써 많은 부분 코드 몇 줄 만으로 가능하게 되었다.

같은 조건의 서비스라면 더 가벼워지고 빠른 로딩속도는 덤으로 가질 수 있게 된 건 물론이다.

이번 연재에서는 기본적이지만 매우 중요한 선택자의 종류와 몇 가지 CSS3 주요속성을 가지고 여러 효과를 주는 방법에 대해 살펴보자.

연재순서:

CSS3 배경 및 변화 된 점

시간이 갈수록 시맨틱한 웹, 웹표준과 웹접근성이 점점 강조되는 때인 지금 모든 웹사이트가HTML(구조)+CSS(표현)+JS(동작) 세가지 계층을 분리하여 웹을 제대로 만드는 것이 중요한 이슈가 되면서 점점 세가지를 분리하고 디자인 컨텐츠를 좀 더 다양하고 모듈화 된 형태로 개발할 필요성을 느꼈기 때문에 CSS3가 그에 발맞추어 개발 진행 중이다.

아직 완전한 형태의 표준은 아니나 CSS3의 대부분의 기능을 지원하는 브라우저가 이미 나온 상태이며 최신 버전의 브라우저 들이 나올 때마다 더 많은 부분을 수용하고 포함할 것이다.

CSS3를 이용해 모바일용 웹 애플리케이션은 만들어지고 있지만, 일반 데스크톱 웹 환경에서는 아직 모바일에 비해 덜 진행된 상태이다. 우리나라의 현재 브라우저 점유율에서 가장 큰 위치를 차지하고 있는 IE계열(6~8)이 CSS3를 거의 지원하지 않는다.

하지만 그렇다고 실망하지는 말자! IE(8이하)도 완전히 사용하지 못하는 것은 아니다. Javascript를 이용한 Filter를 이용하여 여러 속성들의 표현을 흉내 낼 수 있다. 그리고 IE9 Beta 버전에서는 CSS3의 대부분의 속성들을 지원하려고 개발진행 중에 있다.

선택자(Selector)

선택자는 Type(element),Universal(*),class/id,attribute(속성),가상요소/가상클래스,선택자결합(하위,자식,인접) 등으로 구성된다.

PatternMeaningS5C8F3.6O11I9bI8I7I6
#idid로 지정된 요소 선택OOOOOOOO
.classclass로 지정된 요소 선택OOOOOOOO
EE 요소를 선택OOOOOOOO
E:link방문하지 않은 E를 선택OOOOOOOO
E:visited방문한 E를 선택OOOOOOOO
E:hover마우스가 올라가 있는 동안 E를 선택OOOOOOOO
E:active마우스 클릭 또는 키보드(enter)가 눌린 동안 E를 선택OOOOOOOX
E:focusfocus가 머물러 있는 동안 E를 선택OOOOOOXX
E:first-lineE 요소의 첫 번째 라인 선택OOOOOOOX
E:first-letterE 요소의 첫 번째 문자 선택OOOOOOOX
*모든 요소 선택OOOOOOOO
E[foo]‘foo’ 속성이 포함된 E를 선택OOOOOOOX
E[foo="bar"]‘foo’ 속성의 값이 ’bar’와 일치하는 E를 선택OOOOOOOX
E[foo~="bar"]‘foo’ 속성의 값에 ’bar’가 포함되는 E를 선택OOOOOOOX
E[foo|="en"]‘foo’ 속성의 값이 ’en’ 또는 ’en-’ 으로 시작되는  E를 선택OOOOOOOX
E:first-child첫 번째 자식 요소가 E라면 선택OOOOOOOX
E:lang(fr)HTML lang 속성의 값이 ’fr’로 지정된 E를 선택OOOOOOXX
E::beforeE 요소 전에 생성된 요소 선택OOOOOOXX
E::afterE 요소 후에 생성된 요소 선택OOOOOOXX
E>FE 요소의 자식인 F 요소 선택OOOOOOOX
E+FE 요소를 뒤의 F 요소 선택OOOOOOOX
E[foo^="bar"]‘foo’ 속성의 값이 ’bar’로 정확하게 시작하는 요소 선택OOOOOOOX
E[foo$="bar"]‘foo’ 속성의 값이 ’bar’로 정확하게 끝나는 요소 선택OOOOOOOX
E[foo*="bar"]‘foo’ 속성의 값에 ’bar’를 포함하는 요소 선택OOOOOOOX
E:root문서의 최상위 루트 요소 선택OOOOOXXX
E:nth-child(n)그 부모의 n번째 자식이 앞으로부터 지정된 순서와 일치하는 E 라면 선택OOOOOXXX
E:nth-last-child(n)n번째 자식이 뒤로부터 지정된 순서와 일치하는 요소가 E 라면 선택OOOOOXXX
E:nth-of-type(n)E 요소 중 앞으로부터 순서가 일치하는 n번째 E 요소 선택OOOOOXXX
E:nth-last-of-type(n)E 요소 중 끝으로부터 순서가 일치하는 n번째 E 요소 선택OOOOOXXX
E:last-childE 요소 중 마지막 자식이라면 E 선택OOOOOXXX
E:first-of-typeE 요소 중 첫번째 E 선택OOOOOXXX
E:last-of-typeE 요소 중 마지막 E 선택OOOOOXXX
E:only-childE 요소가 유일한 자식이면 선택OOOOOXXX
E:only-of-typeE 요소가 같은 타입이면 선택OOOOOXXX
E:empty텍스트 및 공백을 포함하여 빈 자식을 가진 E를 선택OOOOOXXX
E:targetE의 URI의 대상이 되면 선택OOOOOXXX
E:enabled활성화된 폼 컨트롤 E요소 선택OOOOOXXX
E:disabled비활성화된 폼 컨트롤 E요소 선택OOOOOXXX
E:checked선택된 폼 컨트롤(라디오버튼,체크박스)을 선택OOOOOXXX
E:not(s)s가 아닌 E 요소 선택OOOOOXXX
E~FE 요소가 앞에 존재하면 F를 선택OOOOOOOX

<표 1> CSS 버전에 따른 선택자의 종류와 브라우저별 지원여부 – CSS1 – CSS2 – CSS3

참조:

벤더 별 확장 속성 및 브라우저 엔진

대부분의 브라우저 벤더들은 자신들의 브라우저가 현재 지원하는 속성이 표준과 상이하거나 변경될 수 있다라고 생각하고 벤더확장 속성을 만들었다.
실제로 속성을 지원하지만 100% 표준스펙이 나온 상태가 아니기 때문에 개선점이나 버그발생시 피드백을 쉽게 하기 위해 만든 것으로 보인다.

브라우저 밴더S5C8F3.6O11I9I8I7I6
벤더확장 속성-webkit--webkit--moz--o--ms-/filter-ms-/filter-ms-/filter-ms-/filter
브라우저 엔진WebkitWebkitGeckoPrestoTasman

<표 2> 브라우저 벤더 별 확장 속성

이번 연재에서 다룰 CSS3주요속성

CSS3에는 정말 다양한 속성들이 공개 되었는데 CSS의 기존버전과는 다르게 모듈형태로 개발되고 있다.
이것은 각종 브라우저나 다양한 디바이스가 필요에 따라 원하는 CSS 모듈만을 탑재하거나 특정 모듈만을 빠르게 업데이트 할 수 있는 장점이 있다.
CSS3는 현재 Text, Fonts, Color, Backgrounds&Borders, Transforms, Transitions, Animations과 같은 종류의 모듈들을 개발하고 있다.
그 모듈형태의 CSS3 여러 속성 중에서 이번 연재에서 배워볼 CSS3 주요속성은 아래와 같다.

ModuleAttributeEffectS5C8F3.6O11I9I8I7I6
Background &borderborder-image테두리 이미지효과OOOOXXXX
border-radius테두리 라운드효과OOOOOXXX
box-shadow박스 그림자OOOOOXXX
multiple backgrounds배경 여러개 넣기OOOOOXXX
radient그라디언트 효과OOOXXXXX
Colorrgba(R,G,B,A)/HSLA칼라와 투명도효과OOOOOXXX
opacity이미지 투명도효과OOOOXXXX
Texttext-shadow글자 그림자효과OOOOXXXX
text-overflow글자 넘칠 때 자동 개행OOXOOOOO
User-Interfaceresize박스 사이즈 조절효과OOOOXXXX
Other modulesmulti-column layout문단 다중 칼럼효과OOOOXXXX

<표 3> 본 연재에서 배울 CSS3 속성

IE(6~8)에서는 공식적으로 지원하지 않는 부분은 X 표시가 되어 있지만 대부분 필터를 이용해 효과를 낼 수 있으며 다른 브라우저들은 벤더확장 속성을 이용하여 적용 가능하다.

CSS3의 새로운 주요속성을 이용하여 간단한 효과주기

IE(6~8)을 제외한 모든 브라우저가 이미 대부분의 CSS3 속성들을 지원하고 있다. 하지만 아직 표준이 완벽하게 정해진 것도 아니고 각 벤더들 마다 속성들을 표시하는 방법이나 랜더링하는 차이가 있다.

본 장에서는 CSS3의 새로운 주요 속성을 이용하여 간단한 예제와 함께 속성들을 익히는 과정이다.

테스트 환경으로서는 현재까지 웹킷(webkit)계열 브라우저가 CSS3를 가장 잘 지원하기 때문에 필자는 모든 샘플코드 및 예제를 크롬기준으로 작성하고 설명할 것이다. 독자들은 속성들의 기능들을 확인하고 대표되는 여러 브라우저에서 다양하게 테스트 하여 각각의 차이점도 익혀보면 좋을 것이다.

Common Source
  1. <!DOCTYPE html>
  2. <html lang="ko">
  3. <head>
  4. <title> 예제 </title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <style type="text/css">
  7. body{
  8. font-size:12px;
  9. line-height:1.5em;
  10. }
  11. 적용할 DIV CSS 들어가는 곳
  12. </style>
  13. </head>
  14. <body>
  15. <div>CSS작업그룹은 CSS 규격을 모듈화하기로 결정했습니다.<br>
  16. 이런 모듈화는 다른 부분과 사이의 관계를 명확히 하는데 도움이되며<br>
  17. 완벽하게 문서의 크기를 줄일 수 있습니다.<br>
  18. 그것은 또한 우리가 모듈 단위로 특정 테스트 코드를 만들 수 있고 CSS의 구현에 도움이 …
  19. </div>
  20. </body>
  21. </html>

위와 같이 공통된 html 마크업을 가지고 css부분만 수정하거나 최소한의 마크업만 변경하여 모든 테스트를 하려고 한다. 각각 예제에 이슈사항이 있으면 미리 명시하고 추가되는 부분은 별도 표기를 하였으니 확인하면 된다.

Background & Borders

border-image

기존엔 border에 색상만 표현하는 게 가능했었지만 CSS3에서는 테두리에 이미지를 넣을 수 있고, 옵션을 통해 측면마다 다른 이미지 및 다양하게 표현할 수 있다.

Source
  1. div{
  2. padding:10px;
  3. border-width:27px;
  4. -webkit-border-image:url(img_border_image.png) 27 27 27 27 round;
  5. border-image:url(img_border_image.png) 27 27 27 27 round;
  6. }
View

속성사용방법
  1. border-image:url(①img_border_image.png) ②27 ③27 ④27 ⑤27 ⑥round;

① – 이미지 URL ② – top ③ – right ④ – bottom ⑤ – left ⑥ -이미지 반복 방법 (round:순환, stretch:늘이기, repeat:타일형식 반복, space:타일형식으로 반복되나 마지막 이미지 잘릴 수 있음)

좀 더 디테일하게 적용할 수 있는 속성들:

  • border-top-image:
  • border-right-image:
  • border-bottom-image:
  • border-left-image:
  • border-corner-image:
  • border-top-left-image:
  • border-top-right-image:
  • border-bottom-left-image:
  • border-bottom-right-image:
  • border-image-source: url(…);
  • border-image-slice:
  • border-image-widths:
  • border-image-outset:

border-radius

이젠 CSS만으로 테두리 모서리를 둥글게 표현이 가능하다. 파이 값을 조절 함으로써 둥근 모서리 크기를 조절 할 수 있다.

Source
  1. div{
  2. padding:10px;
  3. border:solid 5px #3399CC;
  4. -webkit-border-radius: 25px;
  5. border-radius: 25px;
  6. }
View

속성사용방법
  1. border-radius:①25px;

① – 파이 크기

좀 더 디테일하게 적용할 수 있는 속성들
  • border-top-radius:
  • border-right-radius:
  • border-bottom-radius:
  • border-left-radius:
  • border-top-left-radius:
  • border-top-right-radius:
  • border-bottom-left-radius:
  • border-bottom-right-radius:

Box-shadow

CSS만으로도 포토샵 같은 이미지편집툴 없이도 멋진 그라데이션이 들어가 있는 테두리 그림자를 설정 할 수 있다. 테두리 바깥쪽, 안쪽 모두 그림자를 생성할 수 있으며 그림자의 크기, 색상, 투명도를 조절할 수 있다.

Source
  1. div{
  2. padding:10px;
  3. border:#66ccff 3px solid;
  4. -webkit-box-shadow:rgba(106,198,247,0.3) -5px -5px 5px, rgba(106,198,247,0.7) 5px 5px 5px ;
  5. }
View

속성사용방법
  1. box-shadow:①rgba(106,198,247,0.3) ②-5px -5px 5px, ③rgba(106,198,247,0.7) ④5px 5px 5px ;
  • Left ① – RGB색상,투명도 ② – 가로,세로,blur 오프셋 크기
  • Right ③ – RGB색상,투명도 ④ – 가로,세로,blur 오프셋 크기

추가 옵션 inset – 안쪽으로 그림자 생김

Border-radius 와 Box-shadow 사용

두 속성을 같이 사용하여 둥근 모서리에 테두리 그림자 주는것도 간단한 CSS3 코드 몇 줄로 가능하다.

Source
  1. div{
  2. padding:10px;
  3. border-radius: 25px;
  4. -webkit-border-radius: 25px;
  5. border:#cbef38 3px solid;
  6. -webkit-box-shadow:rgba(152,208,138,0.3) -5px -5px 5px, rgba(152,208,138,0.7) 5px 5px 5px ;
  7. }
View

Background-size

배경이미지 크기를 임의적으로 설정할 수 있다. 하나의 요소에 여러 개의 배경이미지를 적용할 수도 있으며 각 배경이미지마다 별도의 크기를 지정해도 된다.

Source
  1. div{
  2. padding:10px;
  3. background-image:url(images/img_border_image.png);
  4. background-repeat: no-repeat;
  5. background-size: 50px 50px;
  6. -webkit-background-size: 50px 50px;
  7. }
View

원본이미지 

속성사용방법
  1. background-size: ①50px ②50px;

① – 배경이미지 가로사이즈 ② – 배경이미지 세로사이즈

좀 더 디테일하게 적용 할 수 있는 속성들
  • background-image:
  • background-color:
  • background-repeat:
  • background-position:
  • background-attachment:

Multiple background

하나의 element에 여러 개의 배경이미지를 적용할 수 있다.

Source
  1. div{
  2. padding:10px;
  3. background-image:url(images/img_border_image.png), url(images/img_border_image2.png);
  4. background-repeat: no-repeat;
  5. background-size: 50px 50px, 100px, 150px;
  6. -webkit-background-size: 50px 50px, 100px, 150px;
  7. }
속성사용방법
  1. background-image: ①url(...) ②url(...);
  2. background-size: ③50px ④50px ⑤100px ⑥150px;

① – 1번 배경이미지 URI ② – 2번 배경이미지 URI ③ – 2번 배경이미지 가로사이즈 ④ – 2번 배경이미지 세로사이즈
⑤ – 2번 배경이미지 가로사이즈 ⑥ – 2번 배경이미지 세로사이즈

rgba(R,G,B,A) / hsla(H,S,L,A)

기존 방식은 16진수 6자리를 이용하여 두자리씩 #00/00/00 나누어 표기하는 방식을 사용했었는데, CSS3에서는 rgba(R,G,B,A) 형식의 10진수(0~255)를 통한 RGB표현 그리고 A(투명도)를 표시하거나 HSLA(색상각도,채도,명도,투명도)로 표기할 수 있다.

Source
  1. div{
  2. padding:10px;
  3. color: rgba(0,0,0,1);
  4. color: hsla(180,0%,0%,1);
  5. background-color: rgba(150,100,80,.5);
  6. background-color: hsla(220,64%,69%,.5);
  7. }
View

속성사용방법
  1. color: ①rgba(0,0,0,1);
  2. color: ②hsla(180,0%,0%,1);
  3. background-color: ①rgba(150,100,80,.5);
  4. background-color: ②hsla(220,64%,69%,.5);

같은 기능을 하지만 두 가지 모두 테스트 해보고 차이점을 파악해 보자.
① – (R,G,B,투명도) ② – (색상각도,채도,명도,투명도)

좀 더 디테일하게 적용 할 수 있는 속성들
  • color:
  • background-color:

gradient

필자도 많이 기다려왔던 기능 중에 하나인 그라데이션 효과 기능이다. 배경에 그라데이션을 적용 할 수 있고 한가지 색상뿐 아니라 여러 색상표현이 가능하다.

Source
  1. div{
  2. padding:10px;
  3. border:solid 5px #66CCFF;
  4. border-radius: 20px;
  5. background:-webkit-gradient(linear, 80% 20%, 10% 20%, from(#ACE8E8), to(#E1F7F7));
  6. background:gradient(linear, 80% 20%, 10% 20%, from(#ACE8E8), to(#E1F7F7));
  7. }
View

속성사용방법
  1. background:gradient(①linear, ②80% 20%, 10% 20%, ③from(#ACE8E8), to(#E1F7F7));

① – 타입(linear,radial) ② – 시작위치, 끝위치
③ – 칼라 시작점, 칼라 끝점

opacity

요소에 투명도 값을 지정하는 속성이며 요소 전체에 효과가 적용된다.

Source
  1. div{
  2. padding:10px;
  3. opacity:.5;
  4. background:#<| class="nu0">777|>;
  5. }
View (적용 전)

View (적용 후)

속성사용방법
  1. color:opacity:.5;

① – 0~1까지 표시된 값으로 투명도를 표시한다.

Text(다음 연재에 타이포그래피 투토리얼을 진행 할 예정이라 간단하게 하고 넘김)

text-shadow

일반 텍스트 컨텐츠에 그림자를 입히는 속성이다.

Source
  1. div{
  2. text-shadow:4px 4px 4px #aaa;
  3. font-size:5em;
  4. font-family: arial;
  5. }

마크업에서 텍스트를 “Clear:both;” 라고 변경하고 진행하면 된다.

View
속성사용방법
  1. text-shadow: ①4px 4px ②4px ③#aaa;

① – 가로,세로 그림자거리 ② – 그림자 blur 크기
③ – 그림자 색상

text-overflow

텍스트 컨텐츠가 넘칠 때 줄여주거나 숨기거나 하는 속성이다.

Source
  1. div{
  2. padding:10px;
  3. width:300px;
  4. text-overflow:ellipsis;
  5. white-space:nowrap;
  6. overflow:hidden;
  7. border:5px solid #ccc;
  8. }
View

속성사용방법
  1. text-overflow:①ellipsis;
  2. white-space:②nowrap;
  3. overflow:③hidden;

① – 생략(ellipsis),자르기(clip) ② – 줄 바꿈을 하지 않기.
③ – 텍스트가 감싸고 있는 요소를 넘칠 때 숨김속성

resize

박스크기를 사용자가 임의로 조절할 수 있게 하는 속성이다. 가로,세로,모두 등의 설정이 가능하다.

Source
  1. div{
  2. padding:10px;
  3. text-overflow:ellipsis;
  4. white-space:nowrap;
  5. overflow:hidden;
  6. resize:horizontal;
  7. resize:vertical;
  8. border:5px solid #ccc;
  9. }
View

오른쪽 하단에 마우스를 클릭하여 드래그 할 수 있도록 2개의 사선이 그려져 있다.

속성사용방법
  1. resize:①horizontal;
  2. resize:②vertical;

① – 가로방향으로 사이즈 가변 됨 ② – 세로방향으로 사이즈 가변 됨 both는 가로,세로방향 모두로 가변 됨

multi-column layout

다중의 세로 열 레이아웃을 표현 할 수 있는 속성이다.

Source
  1. div{
  2. padding:10px;
  3. -webkit-column-count: <| class="nu0">3|>;
  4. -webkit-column-gap: 1.5em;
  5. -webkit-column-rule: 1px solid #ccc;
  6. border:5px solid #ccc;
  7. }
View

속성사용방법
  1. -webkit-column-count:①<| class="nu0">3|>;
  2. -webkit-column-gap:②1.5em;
  3. -webkit-column-rule:③1px solid #ccc;

① – 칼럼의 개수 ② – 칼럼 사이의 빈 여백 ③ – 칼럼 사이의 세로라인

마치며

지금까지 선택자의 종류 및 벤더별 확장속성 그리고 간단한 CSS3 속성들을 다루어 보았다. 연재 첫 페이지에도 언급했지만 CSS3는 아직 완성되어 스펙이 100% 정해진 것이 아니다. 그렇기 때문에 포괄적인 CSS3의 명세를 읽어보고 일단은 표현이 되는 브라우저에서 테스트 및 학습을 하는 게 좋을 것이다.

다음 연재에서는 “CSS3를 이용해 이쁜 타이포그래피 만들기”라는 주제를 가지고 폰트지정, 웹폰트 쓰는법, 텍스트를 표현하는 전반적인 부분에 대하여 다루고 그것들을 이용해 이미지 못지 않은 샘플 타이포그래피를 구성해보자.

끝으로 2011년 새해 첫 스타트를 해 튜토리얼 중심의 본 CSS3 연재를 시작하여 열정을 가지고 한다면 모두 자신이 이루고자 하는 성과보다 많은 것을 얻을 수 있을 것이다.


'Language > CSS' 카테고리의 다른 글

CSS3 미디어쿼리  (0) 2015.07.22
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
/* 공인 및 프록시 */
public String getClientIP(HttpServletRequest request) {
    String ip = request.getHeader("확인 X-FORWARDED-FOR");
    
    if(ip == null || ip.length() == 0) {
        ip = request.getHeader("Proxy-Client-IP");
    }
    if(ip == null || ip.length() == 0) {
        ip = request.getHeader("WL-Proxy-Client-IP");  // 웹로직
    }
    if(ip == null || ip.length() == 0) {
        ip = request.getRemoteAddr();
    }
    return ip;
}
 
 
 
 
/* 내부 */
import java.net.*;
 
/* 만약 공인 IP없으면 내부 IP 가져오도록 처리 */
public static String getCurrentEnvironmentNetworkIp(){
    Enumeration netInterfaces = null;
 
    try {
        netInterfaces = NetworkInterface.getNetworkInterfaces();
    } catch (SocketException e) {
        return getLocalIp();
    }
 
    while (netInterfaces.hasMoreElements()) {
        NetworkInterface ni = (NetworkInterface)netInterfaces.nextElement();
        Enumeration address = ni.getInetAddresses();
 
        if (address == null) {
            return getLocalIp();
        }
 
        while (address.hasMoreElements()) {
            InetAddress addr = (InetAddress)address.nextElement();
            
            if (!addr.isLoopbackAddress() && !addr.isSiteLocalAddress() && !addr.isAnyLocalAddress() ) {
                String ip = addr.getHostAddress();
                
                if( ip.indexOf("."!= -1 && ip.indexOf(":"== -1 ){
                    return ip;
                }
            }
        }
    }
 
    return getLocalIp();
}
 
public static String getLocalIp(){
    try {
        return InetAddress.getLocalHost().getHostAddress();
    } catch (UnknownHostException e) {
        return null;
    }
}
cs


2013/09/23 - [Java/Java EE] - JSP Expression Language(표현 언어 또는 익스프레션 언어)

2013/09/23 - [Java/Java EE] - JSP JSTL(JSP Standard Tag Library) 라이브러리 추가

2013/09/23 - [Java/Java EE] - JSP JSTL(JSP Standard Tag Library) - 코어 태그


1. 국제화 태그

- <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

- 특정 지역에 따라 알맞은 메시지를 출력할 경우에 사용한다.

 기능분류

 태그 

 설명 

 로케일 지정

 setLocale

 Locale을 지정

 requestEncoding

 요청 파라미터의 캐릭터 인코딩을 지정

 메시지 처리

 bundle

 사용할 번들을 지정

 message

 지역에 알맞은 메시지를 출력

 setBundle

 리소스 번들을 읽어와 특정 변수에 저장

 숫자 및 날짜 포맷팅

 formatNumber

 숫자를 포맷팅

 formatDate

 Date 객체를 포맷팅

 parseDate

 문자열로 표시된 날짜를 분석해서 Date 객체로 변환

 parseNumber

 문자열로 표시된 날짜를 분석해서 숫자로 변환

 setTimeZone

 시간대 정보를 특정 변수에 저장

 timeZone

 시간대를 지정


1.1. 로케일 지정 태그


1.1.1. <fmt:setLocale> 태그

- <fmt:setLocale> : 국제화 태그들이 사용할 로케일을 지정한다.

- <fmt:setLocale value="언어코드_국가코드" scope="영역" />

- value : 언어코드_국가코드 형식으로 지정하되 언어코드는 필수이고, 국가코드는 추가지정할 수 있다. 사이에 구분은 바(-) 또는 언더바(_)로 구분한다.

- scope : 영역을 설정한다. 기본값은 page이다.

- 웹 브라우저는 Accept-Language 헤더에 수용 가능한 언어 목록을 전송한다. 이 헤더 값을 이용해서 메시지를 출력해주기 때문에 <fmt:setLocale> 태그는 거의 사용되지 않는다.

<!-- fmt_setLocale.jsp --> <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <!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=UTF-8"> <title>fmt:setLocale</title> </head> <body> <c:set var="now" value="<%= new java.util.Date() %>" /> <h1>대한민국</h1> 금액 : <fmt:formatNumber value="1000000" type="currency" /><br> 일시 : <fmt:formatDate value="${ now }" type="both" dateStyle="full" timeStyle="full"/> <hr><!-- --------------------------------------------------------------------------------------- --> <h1>미국</h1> <fmt:setLocale value="en_us"/> 금액 : <fmt:formatNumber value="1000000" type="currency" /><br> 일시 : <fmt:formatDate value="${ now }" type="both" dateStyle="full" timeStyle="full"/> <hr><!-- --------------------------------------------------------------------------------------- --> <h1>일본</h1> <fmt:setLocale value="ja_jp"/> 금액 : <fmt:formatNumber value="1000000" type="currency" /><br> 일시 : <fmt:formatDate value="${ now }" type="both" dateStyle="full" timeStyle="full"/> <hr><!-- --------------------------------------------------------------------------------------- --> </body> </html> <!-- 실행결과 대한민국 금액 : ₩1,000,000 일시 : 2013년 9월 30일 월요일 오후 4시 22분 45초 KST --------------------------------------------------------------------------------------- 미국 금액 : $1,000,000.00 일시 : Monday, September 30, 2013 4:22:45 PM KST --------------------------------------------------------------------------------------- 일본 금액 : ¥1,000,000 일시 : 2013年9月30日 16時22分45秒 KST -->



1.1.2. <fmt:requestEncoding> 태그

- <fmt:requestEncoding> : 요청 파라미터의 캐릭터 인코딩을 지정한다.

- <fmt:requestEncoding value="캐릭터셋" />

- <% request.setCharacterEncoding("캐릭터셋"); %> 코드와 동일하다.


1.2. 메시지 처리 태그

- 언어권에 따라서 알맞은 메시지를 출력할 수 있다.


1.2.1. <fmt:bundle> 태그

- 사용할 메시지 번들을 지정한다.

- <fmt:bundle basename="리소스번들명"> <fmt:message key="키명"> </fmt:bundle>

- basename : 사용할 리소스 번들 이름

- 번들 파일은 Java.util.Properties 클래스를 사용해서 읽어오기 때문에 확장자가 .properties 이어야 한다.

- 번들이름_언어_국가.properties

- 언어와 국가 자리에는 두글자로 된 언어코드(생략불가 생략이 기본값 en)와 국가코드(생략가능)가 있다.

- prefix : 번들태그의 내부에서 사용되는 message 태거의 key 속성의 값 앞에 자동으로 붙게 될 문자열


1.2.2. <fmt:message> 태그

- 지정한 리소스 번들로부터 메시지를 읽어와 출력한다.

- <fmt:bundle basename="리소스번들명"> <fmt:message key="키명"> </fmt:bundle>

- key : 읽어올 메시지의 키 값

- var : 메시지를 저장할 변수명, 지정할 경우 메시지를 출력하지 않고 var 속성으로 지정한 변수에 메시지를 저장한다.

- scope : 변수가 저장되는 영역 지정

- bundle : <fmt:setBundle> 태그를 사용해서 로딩한 번들로부터 메시지를 읽어올 때 사용

- {n} 부분에 들어갈 값을 지정하기 위해서 <fmt:param> 태그를 사용한다.

<!-- fmt_bundle_message.jsp -->

<%@ page contentType = "text/html; charset=euc-kr" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%-- <fmt:setLocale value="en" /> --%><!-- 옆 주석을 풀면 언어코드가 en이 된다. -->
<fmt:bundle basename="resource.message">
<fmt:message key="TITLE" var="title"/>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>${title}</title>
</head>
<body>
	<c:if test="${! empty param.id}">
	<fmt:message key="GREETING">
		<fmt:param value="${param.id}" />
	</fmt:message>
	</c:if>
	<br>
	<fmt:message key="VISITOR" />
</body>
</html>
</fmt:bundle>

<!-- 
	한글실행결과	


영어실행결과

-->



1.2.3. <fmt:setBundle> 태그

- 리소스 번들을 변수로 저장한 후 어디서나 사용할 수 있게 된다.

- <fmt:setBundle var="변수명" basename="리소스번들명" /> <fmt:message bundle="${setBundle에 지정된 변수명}" key="키명" />

- basename : 읽어올 리소스 번들의 이름

- var : 리소스 번들을 저장할 변수 명

- scope : 변수를 저장할 영역

<!-- fmt_bundle_message.jsp -->

<%@ page contentType = "text/html; charset=euc-kr" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%-- <fmt:setLocale value="en" /> --%><!-- 옆 주석을 풀면 언어코드가 en이 된다. -->
<fmt:setBundle var="message" basename="resource.message"/>
<fmt:message bundle="${ message }" key="TITLE" var="title"/>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>${ title }</title>
</head>
<body>
	<c:if test="${! empty param.id}">
	<fmt:message bundle="${ message }" key="GREETING">
		<fmt:param value="${param.id}" />
	</fmt:message>
	</c:if>
	<br>
	<fmt:message bundle="${ message }" key="VISITOR" />
</body>
</html>

<!-- 
	실행결과는 위와 같다
 -->



1.3. 숫자 및 날짜 포맷팅 처리 태그


1.3.1. <fmt:formatNumber> 태그

- 숫자를 양식에 맞춰 문자열(String)로 변환한다.

- <fmt:formatNumber value="숫자값" type="값타입" pattern="패턴" currentCode="통화코드" currencySymbol="통화심볼" groupingUsed="boolean" var="변수명" scope="영역" />

- value : 양식에 맞춰 출력할 숫자

- type : 출력할 양식, number일 경우 숫자, percent일 경우 %, currency일 경우 통화형식으로 출력한다. 기본값은 number

- pattern : 직접 숫자가 출력되는 양식을 지정, java.text.DecimalFormat 클래스에 정의되어있는 패턴을 사용한다.

- #을 지정하면 유효숫자가 있을경우만 표시되고 0을 지정하면 0으로 자리수만큼 채워진다.

- currencyCode : 통화 코드를 지정, 통화코드는 ISO 4217에 지정되어 있다. type의 속성값이 currency일 때 의미가 있다.

- currentSymbol : 통화를 표현할 때 사용할 기호를 표시,  type의 속성값이 currency일 때 의미가 있다.

- groupingUsed : 콤마(,)와 같이 단위를 구분할 때 사용되는 기호를 사용할 지의 여부를 결정한다. true일 경우 기호사용, false일 경우 사용되지 않음, 기본값은 ture

- var : 포맷팅 한 결과를 저장할 변수 명, 변수 타입은 String, var 속성을 지정하지 않으면 결과가 곧바로 출력

- scope : 변수를 저장할 영역, 기본값은 page

<!-- fmt_formatNumber.jsp -->

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!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=UTF-8">
<title>fmt:formatNumber</title>
</head>
<body>
	<c:set var="price" value="12345" />
	<fmt:formatNumber value="${ price }" type="number" var="numberType"/><br>
	통화 : <fmt:formatNumber value="${ price }" type="currency" currencySymbol="원"/><br>
	퍼센트 : <fmt:formatNumber value="${ price }" type="percent" groupingUsed="false" /><br>
	숫자 : ${ numberType }<br>
	패턴: <fmt:formatNumber value="${ price }" pattern="00000000.000"/><br>
	패턴: <fmt:formatNumber value="${ price }" pattern="########.###"/><br>
</body>
</html>

<!-- 
	실행결과
	
	통화 : 원12,345
	퍼센트 : 1234500%
	숫자 : 12,345
	패턴: 00012345.000
	패턴: 12345
 -->



1.3.2. <fmt:parseNumber> 태그

- 문자열을 숫자(Number)로 변환한다.

- <fmt:parseNumber value="값" type="값타입" pattern="패턴" parseLocale="통화코드" integerOnly="boolean" var="변수명" scope="영역 />

- value : 파싱할 문자열

- type : value 속성의 문자열 타입을 지정, number, currency, percentage가 올 수 있다. 기본값은 number

- pattern : 직접 파싱할 때 사용할 양식을 지정

- parseLocale : 파싱할 때 사용할 로케일을 지정

- integerOnly : 정수 부분만 파싱할 지의 여부를 지정, 기본값은 false

- var : 파싱한 결과를 저장할 변수명을 지정

- scope : 변수를 저장할 영역을 지정, 기본값은 page

<!-- fmt_parseNumber -->

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!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=UTF-8">
<title>fmt:parseNumber</title>
</head>
<body>
	<fmt:parseNumber value="1234.56" pattern="0000.000" var="num1"/>
	${ num1 }<br>
	<fmt:parseNumber value="1234.56" var="num2"/>
	${ num2 }<br>
	<fmt:parseNumber value="1234.56" pattern="####.###" var="num3" />
	${ num3 }<br>
</body>
</html>

<!-- 
	실행결과
	
	1234.56
	1234.56
	1234.56
 -->



1.3.3. <fmt:formatDate> 태그

- 날짜 정보를 담고 있는 객체를 포맷팅하여 출력한다.

- <fmt:formatDate value="날짜값" type="타입" dateStyle="날짜스타일" timeStyle="시간스타일" pattern="패턴" timeZone="타임존" var="변수명" scope="영역" />

- value : 포맷팅할 날짜 및 시간 값

- type : 날짜, 시간 또는 둘다 포맷팅 할 지의 여부를 지정, time date both 중 한가지 값을 가지며, 기본값은 date

- dateStyle : 날짜에 대해 미리 정의된 포맷팅 스타일을 지정, default short medium long full 중 한가지 값을 가지며, 기본값은 default

- timeStyle : 시간에 대해 미리 정의된 포맷팅 스타일을 지정, default short medium long full 중 한가지 값을 가지며, 기본값은 default

- dateStyle 및 timeStyle API : http://docs.oracle.com/javase/7/docs/api/java/text/SimpleDateFormat.html

- pattern : 직접 파싱할 때 사용할 양식을 지정, java.text.DateFormat 양식을 사용

- timeZone : 시간대를 변경하고 싶을 때 사용, <fmt:setTimeZone> 태그에서 생성한 TimeZone 객체를 사용

- var : 파싱한 결과를 저장할 변수 명을 지정

- scope : 변수를 저장할 영역을 지정, 기본 값은 page

<!-- fmt_formatDate.jsp -->

<%@page import="org.apache.naming.java.javaURLContextFactory"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!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=UTF-8">
<title>fmt:formatDate</title>
</head>
<body>
	<c:set var="now" value="<%= new java.util.Date() %>" />
	<h1>type = date</h1>
	default : <fmt:formatDate value="${ now }" type="date" dateStyle="default"/><br>
	short : <fmt:formatDate value="${ now }" type="date" dateStyle="short"/><br>
	medium : <fmt:formatDate value="${ now }" type="date" dateStyle="medium"/><br>
	long : <fmt:formatDate value="${ now }" type="date" dateStyle="long"/><br>
	full : <fmt:formatDate value="${ now }" type="date" dateStyle="full"/>
	<hr><!-- ---------------------------------------------------------------------  -->
	<h1>type = time</h1>
	default : <fmt:formatDate value="${ now }" type="time" timeStyle="default"/><br>
	short : <fmt:formatDate value="${ now }" type="time" timeStyle="short"/><br>
	medium : <fmt:formatDate value="${ now }" type="time" timeStyle="medium"/><br>
	long : <fmt:formatDate value="${ now }" type="time" timeStyle="long"/><br>
	full : <fmt:formatDate value="${ now }" type="time" timeStyle="full"/>
	<hr><!-- ---------------------------------------------------------------------  -->
	<h1>type = both</h1>
	default : <fmt:formatDate value="${ now }" type="both" dateStyle="default" timeStyle="default"/><br>
	short : <fmt:formatDate value="${ now }" type="both" dateStyle="short" timeStyle="default"/><br>
	medium : <fmt:formatDate value="${ now }" type="both" dateStyle="medium" timeStyle="default"/><br>
	long : <fmt:formatDate value="${ now }" type="both" dateStyle="long" timeStyle="default"/><br>
	full : <fmt:formatDate value="${ now }" type="both" dateStyle="full" timeStyle="default"/>
	<hr><!-- ---------------------------------------------------------------------  -->
	<h1>pattern</h1>
	YYYY/MM/dd : <fmt:formatDate value="${ now }" type="date" pattern="YYYY/MM/dd" /><br>
	HH:mm:SS : <fmt:formatDate value="${ now }" type="time" pattern="HH:mm:SS" /><br>
	hh:mm:ss : <fmt:formatDate value="${ now }" type="time" pattern="hh:mm:ss" /><br>
	a : <fmt:formatDate value="${ now }" type="time" pattern="a" /><br>
	H : <fmt:formatDate value="${ now }" type="time" pattern="HH" /><br>
	k : <fmt:formatDate value="${ now }" type="time" pattern="kk" /><br>
	K : <fmt:formatDate value="${ now }" type="time" pattern="KK" /><br>
	h : <fmt:formatDate value="${ now }" type="time" pattern="hh" /><br>
	z : <fmt:formatDate value="${ now }" type="time" pattern="z" /><br>
	Z : <fmt:formatDate value="${ now }" type="time" pattern="Z" /><br>
	X : <fmt:formatDate value="${ now }" type="time" pattern="X" /><br>
</body>
</html>

<!-- 
	실행결과
	
	type = date
	
	default : 2013. 9. 30
	short : 13. 9. 30
	medium : 2013. 9. 30
	long : 2013년 9월 30일 (월)
	full : 2013년 9월 30일 월요일
	---------------------------------------------------------------------------
	type = time
	
	default : 오후 3:36:59
	short : 오후 3:36
	medium : 오후 3:36:59
	long : 오후 3시 36분 59초
	full : 오후 3시 36분 59초 KST
	---------------------------------------------------------------------------
	type = both
	
	default : 2013. 9. 30 오후 3:36:59
	short : 13. 9. 30 오후 3:36:59
	medium : 2013. 9. 30 오후 3:36:59
	long : 2013년 9월 30일 (월) 오후 3:36:59
	full : 2013년 9월 30일 월요일 오후 3:36:59
	---------------------------------------------------------------------------
	pattern
	
	YYYY/MM/dd : 2013/09/30
	HH:mm:SS : 15:36:66
	hh:mm:ss : 03:36:59
	a : 오후
	H : 15
	k : 15
	K : 03
	h : 03
	z : KST
	Z : +0900
	X : +09
 -->



1.3.3. <fmt:parseDate> 태그

- 문자열로 표시된 날짜 및 시간 값을 java.util.Date로 파싱한다.

- <fmt:formatDate value="날짜값" type="타입" dateStyle="날짜스타일" timeStyle="시간스타일" pattern="패턴" timeZone="타임존" parseLocale="로케일" var="변수명" scope="영역" />

- value : 파싱할 문자열

- type : 날짜, 시간 또는 둘다 포맷팅할지의 여부를 지정, time date both 중 한가지 값을 가지며, 기본값은 date

- dateStyle : 날짜에 대해 미리 정의된 포맷팅 스타일을 지정, default short medium long full 중 한가지 값을 가지며, 기본값은 default

- timeStyle : 시간에 대해 미리 정의된 포맷팅 스타일을 지정, default short medium long full 중 한가지 값을 가지며, 기본값은 default

- pattern : 직접 파싱할 때 사용할 양식을 지정, java.text.DateFormat 양식을 사용

- timeZone : 시간대를 변경하고 싶을 때 사용, <fmt:setTimeZone> 태그에서 생성한 TimeZone 객체를 사용

- parseLocale : 파싱할 때 사용할 로케일을 지정

- var : 파싱한 결과를 저장할 변수명을 지정

- scope : 변수를 저장할 영역을 지정, 기본값은 page

<fmt:parseDate value="1989-09-18 03:00:23" pattern="yyyy-MM-dd HH:mm:ss" var="date" />
${ date }



1.3.4. <fmt:timeZone> 태그

- 시간대별로 시간을 처리할 수 있다.

- <fmt:timeZone value="타임존명"> <fmt:formatDate . . . /> </fmt:timeZone>

<!-- fmt_timeZone.jsp  -->

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!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=UTF-8">
<title>fmt:timeZone</title>
</head>
<body>
	<c:set var="now" value="<%= new java.util.Date() %>"/>
	대한민국 : <fmt:formatDate value="${ now }" type="both" dateStyle="full" timeStyle="full"/>
	<br>
	<fmt:timeZone value="Asia/Hong_kong">
		홍콩 :  <fmt:formatDate value="${ now }" type="both" dateStyle="full" timeStyle="full"/>
	</fmt:timeZone>
	<br>
	<fmt:timeZone value="Europe/London">
		런던 :  <fmt:formatDate value="${ now }" type="both" dateStyle="full" timeStyle="full"/>
	</fmt:timeZone>
	<br>
	<fmt:timeZone value="America/New_York">
		뉴욕 :  <fmt:formatDate value="${ now }" type="both" dateStyle="full" timeStyle="full"/>
	</fmt:timeZone>
</body>
</html>

<!-- 
	실행결과
	
	대한민국 : 2013년 9월 30일 월요일 오후 4시 37분 04초 KST 
	홍콩 : 2013년 9월 30일 월요일 오후 3시 37분 04초 GMT+08:00 
	런던 : 2013년 9월 30일 월요일 오전 8시 37분 04초 BST 
	뉴욕 : 2013년 9월 30일 월요일 오전 3시 37분 04초 EDT
 -->



1.3.5. <fmt:setTimeZone> 태그

- 시작태그와 끝태그 사이에만 영향을 미치는 것이 아니고, 액션 태그가 실행된 다음의 모든 코드에 영향을 미친다.

<fmt:setTimeZone value="타임존명"> <fmt:formatDate . . . /> </fmt:timeZone>

<!-- fmt_setTimeZone.jsp -->

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!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=UTF-8">
<title>fmt:setTimeZone</title>
</head>
<body>
	<c:set var="now" value="<%= new java.util.Date() %>"/>
	대한민국 : <fmt:formatDate value="${ now }" type="both" dateStyle="full" timeStyle="full"/>
	<br>
	<fmt:setTimeZone value="Asia/Hong_kong" />
		홍콩 :  <fmt:formatDate value="${ now }" type="both" dateStyle="full" timeStyle="full"/>
	<br>
	<fmt:setTimeZone value="Europe/London" />
		런던 :  <fmt:formatDate value="${ now }" type="both" dateStyle="full" timeStyle="full"/>
	<br>
	<fmt:setTimeZone value="America/New_York" />
		뉴욕 :  <fmt:formatDate value="${ now }" type="both" dateStyle="full" timeStyle="full"/>
</body>
</html>

<!-- 
	실행결과
	
	대한민국 : 2013년 9월 30일 월요일 오후 4시 39분 22초 KST 
	홍콩 : 2013년 9월 30일 월요일 오후 3시 39분 22초 GMT+08:00 
	런던 : 2013년 9월 30일 월요일 오전 8시 39분 22초 BST 
	뉴욕 : 2013년 9월 30일 월요일 오전 3시 39분 22초 EDT
-->



* TimeZone 리스트

<!-- timeZoneList.jsp -->

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!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=UTF-8">
<title>TimeZone List</title>
</head>
<body>
	<c:forEach var="id" items="<%= java.util.TimeZone.getAvailableIDs() %>">
		${ id }<bR>
	</c:forEach>
</body>
</html>

<!-- 
	실행결과
	
	Etc/GMT+12
	Etc/GMT+11
	Pacific/Midway
	Pacific/Niue
	Pacific/Pago_Pago
	Pacific/Samoa
	US/Samoa
	. . . 생략
	Etc/GMT-13
	MIT
	Pacific/Apia
	Pacific/Enderbury
	Pacific/Fakaofo
	Pacific/Tongatapu
	Etc/GMT-14
	Pacific/Kiritimati
 -->



1.4. web.xml 파일에 국제화 관련 태그 기본 값 설정

- 기본으로 사용할 로케일 정보나 시간대를 web.xml 파일에 컨텍스트 초기화 파라미터를 이용해서 설정할 수 있다.

 속성 이름

 설명 

 javax.servlet.jsp.jstl.fmt.localizationContext

 기본으로 사용할 리소스 번들을 지정, 리소스 번들의 basename을 입력한다. 

 javax.servlet.jsp.jstl.fmt.locale

 기본으로 사용할 로케일을 지정한다.

 javax.servlet.jsp.jstl.fmt.timeZone

 기본으로 사용할 시간대를 지정한다.


<context-param>
	<param-name>javax.servlet.jsp.jstl.fmt.localizationContext</param-name>
	<param-value>resource.message</param-value>
</context-param>

<context-param>
	<param-name>javax.servlet.jsp.jstl.fmt.locale</param-name>
	<param-value>ko_kr</param-value>
</context-param>

<context-param>
	<param-name>javax.servlet.jsp.jstl.fmt.timeZone</param-name>
	<param-value>Asia/Seoul</param-value>
</context-param>


'Language > JSP' 카테고리의 다른 글

JSP 접속 ip 확인  (0) 2018.02.07

+ Recent posts