jsp/servlet scope

forward는 request를 발생시키지 않으므로 request scope 내의 모든 변수(빈)들을 공유할 수 있다. 반면 redirect는 request를 발생시키므로 공유가 불가능하다. 이때는 session scope를 사용한다.


출처 - http://dhplanner.blogspot.com/2009/09/jspservlet-scope.html



'Development > JSP & Servlet' 카테고리의 다른 글

JSP - session default timeout 설정  (0) 2012.05.30
JSP - 로그인 필터 예제 (Redirect 처리)  (0) 2012.05.23
JSP 소스 사이트  (0) 2012.05.07
JSTL (JSP Standard Tag Library)  (0) 2012.03.28
jsp - EL(Expression Language)  (0) 2012.03.28
Posted by linuxism
,

CSS - 버튼

Development/CSS 2012. 5. 14. 10:25

1. 버튼의 바탕색상 변경 또는 Input, 테이블 가능(마우스 오버시)

<input type=button value=submit onMouseOver="this.style.backgroundColor='blue'" onMouseOut="this.style.backgroundColor=''">

<input type=button value=submit onMouseOver="this.style.backgroundColor='blue'" onMouseOut="this.style.backgroundColor=''">

2. INPUT 마우스 오버시 테두리 색상 변경

style='border:;width:100px;height:16;' onMouseOver="this.style.border='1 solid #99CC00'" onMouseOut="this.style.border=''"


출처 - http://town.pingstudy.com/bbs/board.php?bo_table=info_plaza&wr_id=25&sca=CSS&pcode=

===================================================================================


CSS를 활용하여 쉽게 제작하는 버튼입니다.
버튼 이미지 위에 표현되는 제목에 따라 버튼 이미지를 제작하기 보다는 사용을 위한 종류의 이미지 (버튼 밑그림) 에 Text 제목을 사용하여 만들어지는 버튼은 활용범위가 넓을 뿐 아니라 버튼 제작시간을 단축시켜 줍니다.  많은 예제중 활용도가 높아 보이는 방법을 소개합니다.
그러나 IE6에선 다소 문제가 있습니다. ㅠㅠ

01. CSS Sliding Door using only 1 image
URL : http://kailoon.com/css-sliding-door-using-only-1-image/
아쉬운점 : 이미지 모서리를 투명처리 하면 겹쳐 나타나게 되어 보기가 쩜 그렇다..

사용자 삽입 이미지


02. CSS Oval Buttons
URL :
www.dynamicdrive.com/style/csslibrary/item/css_oval_buttons/
사용자 삽입 이미지


03. Rediscovering the Button Element

URL :
particletree.com/features/rediscovering-the-button-element/

사용자 삽입 이미지


04. Bold CSS Buttons

URL#1 :
www.dynamicdrive.com/style/csslibrary/item/bold_css_buttons/
URL#2 : www.dynamicdrive.com/style/csslibrary/item/vista_aero_buttons_menu/
사용자 삽입 이미지


05. Recreating the button

URL : stopdesign.com/archive/2009/02/04/recreating-the-button.html 
 

*Button Templates
- Simply-Button v2
- Top 10 CSS Buttons Tutorials List
-
Free High-Gloss Graphite Buttons 
-
77 Vector Buttons hot off the press
- CSS Square buttons
- 45 Photoshop Tutorials for Better Navigation [button]
- Styling the button element with sliding doors
- Make fancy buttons using CSS sliding doors technique
- Liquid & Color Adjustable CSS Buttons
- Skinnable Web 2.0 Button
- ButtonReplacement.JS
- Stylish Submit Buttons
- www.webreference.com/programming/css_stylish/
- [beginner] Create a Button with Hover and Active State using CSS Sprites
- [CSS3] Super Awesome Buttons with CSS3 and RGBA
- [CSS3] Creating a Realistic Looking Button with CSS3
- [CSS3] An Introduction to CSS3 - Creating a Button
- [CSS3] Pretty CSS3 buttons
- [CSS3] 12 Excellent CSS3 Button and Menu Techniques
- [CSS3] CSS3 Gradient Buttons
- [CSS3] CSS3 Button Tutorials and Techinques Revisited
- [CSS3] CSS3 Buttons Without Any Images
- [CSS3] Cross-browser CSS gradient buttons
- [CSS3] CSS3 Facebook Buttons
- [CSS3] CSS3 GitHub Buttons
- [CSS3] CSS3 Button UI
- CSS3 Buttons - 10+ Awesome Ready-To-Use Solutions
- Creating CSS3 Buttons: Techniques, Tutorials, Tools
- Create  Multi Color and Size CSS3 Buttons
- Create a Slick CSS3 Button with box-shadow and rgba
- [framework] CSS3 Buttonize Framework
- CSS3 Brushed Metal Button
- Just some other awesome CSS3 Buttons
- How To Create A Clean And Stylish CSS3 Menu
- Google+ Styled Buttons
- All About Buttons: Inspiration, PSDs for Download, CSS Generators and Frameworks 
- CSS And CSS3 Buttons, 110 Best Sets!



출처 - http://kmoonki.tistory.com/231


==================================================================================


CSS3 Gradient Buttons

by Web Designer Wall

Rectangle or Rounded Can be Medium or Small 

  Span 
Div
 

P Tag

 

H3

Gray Rounded Medium Small 

  Span 
Div
 

P Tag

 

H3

White Rounded Medium Small 

  Span 
Div
 

P Tag

 

H3

Orange Rounded Medium Small 

  Span 
Div
 

P Tag

 

H3

Red Rounded Medium Small 

  Span 
Div
 

P Tag

 

H3

Blue Rounded Medium Small 

  Span 
Div
 

P Tag

 

H3

Rosy Rounded Medium Small 

  Span 
Div
 

P Tag

 

H3

Green Rounded Medium Small 

  Span 
Div
 

P Tag

 

H3

Pink Rounded Medium Small 

  Span 
Div
 

P Tag

 

H3


출처 - http://www.webdesignerwall.com/demo/css-buttons.html






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

css - 드롭다운 메뉴  (0) 2012.05.29
CSS - 선택자  (0) 2012.05.23
CSS - 정리  (0) 2012.05.13
CSS - em 단위  (0) 2012.05.13
CSS - 글자 레이아웃 속성  (0) 2012.05.12
Posted by linuxism
,

 자바스크립트에서 BR태그 vs \n, & nbsp vs 공백문자
자바스크립트 차원과 HTML 차원의 줄바꿈은 사실 다릅니다.
HTML 에서는 pre, xmp 태그를 제외한 줄바꿈은 반드시 <BR> 태그를 쓰셔야 줄바꿈이 인정됩니다.
그렇지 않으면 하나 또는 여러 엔터는 모두 공백 1칸만 인정되며, 줄바꿈이 인정 되지 않습니다.

코드
<html>
<body>
A
B
</body>
</html>
웹브라우저 출력결과
A B


그런데, JavaScript 에서는 HTML 문서로 보여지는 결과가 아닌 이상
엔터 문자를 br 태그 대신에 \n(\n; 역슬래시 n)  을 씁니다.
대표적인 예로는 alert, confirm, textarea의 내용 .value 이 3가지가 많은데요.
예제를 통하여 알아봅시다.

코드
<html>
<body>
<script>
alert("안녕\n하십니까?<br>감사합니다.");
</script>
</body>
</html>
웹브라우저 출력결과
 

이와 같이 \n은 줄바꿈으로 인정하되, <br>은 줄바꿈이 되지 않습니다.
이유는 alert, confirm 등의 텍스트로만 가능한 문자열은 br 태그를 인식하지 못해서
줄바꿈이 되지 않고 <br> 그대로 출력하게 됩니다.
한편, document.write 는 텍스트가 아닌 실제 HTML 문서로 출력되기 때문에 br 태그는 인식 합니다.
하지만, \n은 HTML 에서는 맨 위에서 설명한 바와 같이 인정을 하지 않으며, 공백 1칸으로 대체 됩니다.)

코드
<html>
<body>
<script>
document.write("안녕\n하십니까?<br>감사합니다.");
</script>
</body>
</html>
웹브라우저 출력결과
안녕 하십니까?
감사합니다. 

그리고 또 한가지
HTML 에서 공백을 쓸 경우, &nbsp; 를 많이 씁니다. 이 경우도 그냥 띄어쓰기 여러번 해도
이웃된 공백은 1번만 인정되므로 역시 무시 당합니다.
그래서 &nbsp; 를 사용하는데요. 자바스크립트에서는 &nbsp; 가 아닌 그냥 공백으로 쓰셔도 되나,
HTML 로 보낼때는 &nbsp; 를 써여 합니다.
하지만, pre 에서 document.write() 를 써서 보낼 때는
\n, &nbsp;, <BR>, ' ' 다 인정 됩니다.
PRE 나, 엔터문자, 탭, 여러공백이 인정되면서 태그도 같이 인정되는 태그이기 때문입니다.

코드
<html>
<body>
<pre>
<script>
document.write("안녕\n하십니까?<br>감사&nbsp;합니     다.");
</script>
</pre>
</body>
</html>
웹브라우저 출력결과

 
HTML이 창시한 사람이 공백 및 엔터를 그냥 공백 하나로 하는 이유는
여러 태그가 있으면 엔터를 통해 구분을 해야 하는데,
이러한 엔터로 인해 발생되는 개행을 방지하기 위해서 입니다.

따라서, <BR>, \n, &nbsp;, ' ' (공백) 을 혼동을 하지 말아야 합니다.

출처 - http://kin.naver.com/open100/detail.nhn?d1id=1&dirId=1040202&docId=1404546&qb=bmJzcA==&enc=utf8&section=kin&rank=2&search_sort=0&spq=0&pid=gI8llc5Y7udssarFdOwssc--483026&sid=T68ggPDrrk8AAFrnFSs



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

http - referer 헤더 속성  (2) 2012.06.28
gimp - 이미지 합성하기  (0) 2012.06.27
시맨틱 웹(Semantic Web)  (0) 2012.05.13
Freemarker 정의 및 설정  (0) 2012.05.12
Adobe Flash  (0) 2012.05.11
Posted by linuxism
,