JSTL(JavaServerPages Standard Tag Library, 자바서버 페이지 표준 태그 라이브러리)

JSTL Specification

 

if는 <c:if test="${변수 eq 값}">...</c:if> 으로 사용하면 되지만

else는 사용할 수 없다.

 

else를 사용해야 하는 경우에는 아래처럼 사용해야 한다.

<c:choose>
   <c:when test="${변수 eq 값}">...</c:when>
   <c:otherwise>...</c:otherwise>
</c:choose>

 

조건비교는 두가지 형태 모두 사용가능하다.

eq → ==
ne → !=
empty → == null

 

 

요롷게들 쓸 수 있...

<c:if test="${cnt > 0}">
<c:if test="${msg == 'abc'}">
<c:if test="${!empty msg}">
<c:if test="${msg eq 'A' || msg eq 'B'}">
<c:if test="${msg1 != 'abc' && msg2 == 'abc'}">

 

'plming > HTML-Web' 카테고리의 다른 글

보안컨텐츠만 표시됩니다 없애기  (0) 2015.08.13
iframe 표시-XFS(Cross Frame Script) 방지  (0) 2015.07.27
HTML Object Reference  (0) 2015.05.27
반응형 웹 입력폼 코딩  (0) 2015.05.25
반응형 웹 디자인  (0) 2015.05.19

웹 개발중에 객체들의 property와 method 정보를 확인할 때 유용하다.

 

Window : http://www.w3schools.com/jsref/obj_window.asp

Location : http://www.w3schools.com/jsref/obj_location.asp

History : http://www.w3schools.com/jsref/obj_history.asp

 

Head : http://www.w3schools.com/jsref/dom_obj_head.asp

Body : http://www.w3schools.com/jsref/dom_obj_body.asp

Form : http://www.w3schools.com/jsref/dom_obj_form.asp

 

Select : http://www.w3schools.com/jsref/dom_obj_select.asp

Option : http://www.w3schools.com/jsref/dom_obj_option.asp

Input Text : http://www.w3schools.com/jsref/dom_obj_text.asp

 

iFrame : http://www.w3schools.com/jsref/dom_obj_frame.asp

 

 

'plming > HTML-Web' 카테고리의 다른 글

iframe 표시-XFS(Cross Frame Script) 방지  (0) 2015.07.27
JSTL IF, ELSE  (0) 2015.07.13
반응형 웹 입력폼 코딩  (0) 2015.05.25
반응형 웹 디자인  (0) 2015.05.19
iframe 내부항목 접근 시 액세스 거부되는 현상  (0) 2010.11.09

반응형 웹은 PC용과 타 기기들을 고려한 코딩을

한 번에 한 곳에 몽땅 넣기 때문에

CSS에서 표시여부를 조정하게 되지만

폼 submit을 하게되면 해당 갯수만큼 Submit 되기도 한다.

 

 

CSS에서 각각의 기기별로 class를 지정하면 해당되지 않는 경우에는

display가 none으로 처리되며

화면영역에서 사라지고, Script상에서도 감지되지 않지만

(visible은 단순히 보이지만 않는 것이므로 요건 아님)

소스보기와 submit에서는 사라지지 않는 경우가 있다.

 

@media all and (max-width:480px) {
    .모바일용 { 블라블라... }
    .PC용 { display: none; }

@media all and (min-width:481px) { ... }
@media all and (min-width:481px) and (max-width:939px)  { ... }

 

요롤 땐 페이지 로딩후에 바로 타 기기관련 class를 사용한 태그들을

제거해주는 것이 깔끔하다.

 

각 영역을 구분하는 곳에 hidden 구분을 하나씩 두고

<div class="PC용">
    <input type="hidden" id="누구냐" value="PC" />

<div class="모바일용">
    <input type="hidden" id="누구냐" value="PC아님" />
 

 

스크립트로 제거하자.

if( "PC" == $("#누구냐").val() ) {
    $(".모바일용").remove();
} else {
    $(".PC").remove();
}

 

'plming > HTML-Web' 카테고리의 다른 글

JSTL IF, ELSE  (0) 2015.07.13
HTML Object Reference  (0) 2015.05.27
반응형 웹 디자인  (0) 2015.05.19
iframe 내부항목 접근 시 액세스 거부되는 현상  (0) 2010.11.09
form enctype="multipart/form-data"  (0) 2010.04.08

https://dark.enha.kr/wiki/%EB%B0%98%EC%9D%91%ED%98%95%20%EC%9B%B9%20%EB%94%94%EC%9E%90%EC%9D%B8

 

반응형 웹 디자인

webactually.png
[PNG image (369.44 KB)]
반응형 웹 디자인(Responsive Web Design)[1]

목차

1. 개요
2. 탄생 배경
3. 의미
4. 기법
4.1. 미디어 쿼리
4.2. 유동형 그리드
4.3. 반응형 레이아웃
4.4. 뷰포트 설정
5. 특징
6. 반응형 웹 디자인이 적용된 사이트
6.1. 모바일 페이지만 반응형으로 운영하는 사이트

1. 개요

웹 디자인 기법 중 하나. 웹(Web)에 접속하는 디바이스반응하는(Responsive) 디자인(Design)을 말한다.

2. 탄생 배경

과거정작 몇년전만 해도 웹사이트들은 대부분 데스크톱에서만 볼 수 있고, 또 데스크톱을 제외하면 (인터넷)에 접속 할 수 있는 기기가 거의 존재하지 않았다[2]. 하지만 최근 기술의 발전으로 데스크톱 뿐만 아니라 스마트폰, 태블릿 PC, TV 등 대부분의 전자기기에서 웹에 접속 할 수 있게 되었다. 하지만 이러한 전자기기들은 모두 다른 크기의 스크린을 가지고 있었고, 이를 최적화 시키기 위해 별도의 모바일 페이지를 제작하고 모바일 사용자일 경우 모바일 페이지로, 아닐 경우 기존 페이지로 이동하는 방식[3]을 사용해왔다. 그러나 이러한 방식은 문제점이 많았는데 대표적으로당연하게도 모바일 페이지를 별도로 구현해야한다는 점이다. 이러한 문제점을 해결하기 위해 반응형 웹이 등장하였다.

3. 의미

넓은 의미로는 여러 장치의 다양한 특성에 대응하는 하나의 웹 문서 또는 사이트로써 브라우저의 크기(스크린의 크기)에 실시간으로 반응하여 크기에 따라 레이아웃이 변하는 웹 사이트라는 의미가 있는데, 이는 다양한 디바이스에 대응하여 최소한의 변화로 내용 탐색을 쉽게 하여, 사이트를 최적의 형태로 제공한다는 뜻이다. 또한 좁은 의미로는 CSS3 Media Queries, Fluid/Hybrid Grid Layout, Flexible Media Content 등을 이용/사용하여 구현한 홈페이지를 뜻한다.[4]

4. 기법

반응형 웹 디자인을 하기 위해서는 일반 웹 디자인과 다른 특별한 기법들이 사용된다. 이는 웹 디자인에 대한 높은 이해도와 새로운 레이아웃 등의 개념을 필요로한다. 아래에 있는 내용은 전부 반응형 웹 디자인을 할때 필수적인 기법들을 모아놓은 것이다.

4.1. 미디어 쿼리

미디어 쿼리(Media Query)는 CSS2부터 시작되어 CSS3에서 본격적으로 쓰이기 시작한 웹 기법이다. 디바이스의 폭이나 높이 등의 정보를 가지고 스타일을 개별적으로 줄 수있다.

예를들어서, 1000px 이상의 스크린에서는 오른쪽에 와있던 사이드바가, 1000px 미만의 스크린(태블릿 등)에서는 아래쪽으로 빠지게되는 효과를 줄 수 있다.

4.2. 유동형 그리드

유동형 그리드(Fluid Grids)는 고정된 단위가 아니라 상황에 맞게 변할 수 있는 em이나 % 등의 단위를 사용하는 기법을 말한다. 미디어 쿼리와 같이 이용하면 특정 범위의 스크린에 따른 고정형 그리드/반응형 그리드의 구현도 가능하다.

4.3. 반응형 레이아웃

반응형 웹 디자인의 결과물로 볼수있다. 여러가지 패턴이 있으며, 일부는 HTML, CSS만으로 구현이 불가능한것들도 있다. 참조

4.4. 뷰포트 설정

뷰포트(viewport)란 모니터의 출력에 대한 화면 영역을 설정하는 것을 말한다. 뷰포트를 명시하지 않으면 반응형으로 웹디자인을 하더라도 PC 화면이 떠버리는 결과가 발생하게 된다.

2014년 기준으로 가장 많이 사용되는 뷰포트 명시법은 HTML의 <meta> 태그를 이용하는 방법인데, 이 방식은 사파리에서 처음 사용하여 크롬, 오페라, 파이어폭스 등으로 따라서 적용한 방식이다.

그러나 W3C에서 권장하는 방식은 CSS에서 직접 뷰포트를 명시하는 방식으로, 표준화가 완전히 되지 않아 IE10 이상과 오페라에서만 지원하고있다.

<meta> 태그를 이용한 방식과 다르게, CSS에서 뷰포트를 명시하게 되면 미디어 쿼리와 중첩하여 개발자에게 있어 보다 다양한 기법을 구현해낼 수 있다는 장점이 있다.

5. 특징

  • 하나의 웹 : 하나의 콘텐츠에 오직 하나의 HTML 소스만 있다.[5]
  • 하나의 URL : 특정 장치에 최적화된 페이지로 연결되는 별도의 URL이 있으면 반응형이라고 부르지 않는다.
반응형 웹 디자인은 유연한 레이아웃에 대응하여 항상 최적의 화면을 제공함으로써 다양한 스크린 사이즈를 지닌 디바이스에 적응하게 된다. 그리고 반응형 웹이 일반 웹 디자인과 다른 큰 이유 중에 하나는 이 모든 기술이 하나의 소스로 구현 가능하다는 점이다. 보통 일반 웹 디자인의 경우에는 PC와 태블릿, 스마트폰의 브라우저 각각에 최적화시킨 소스를 개발하여 각 디바이스 별로 산출물이 생기기 때문에 초기 제작비용뿐만 아니라 추후 유지보수 인력과 비용까지 추가로 발생하게 된다.

요즘에는 다양한 스마트 기기가 계속해서 개발되고 있기 때문에 각각의 디바이스와 스크린 사이즈에 맞추어 사이트를 개발한다는 것은 거의 불가능에 가깝다고 볼 수 있다. 하지만 반응형 웹은 하나의 소스를 수정하면 모든 스크린 사이즈에 맞추어 컨텐츠가 최적화되기 때문에 유지보수가 효율적이고, 사용자 입장에서도 기기에 구애받지 않고 항상 최적의 화면을 경험할 수 있다는 측면에서 반응형 웹의 장점이 고스란히 나타나게 된다.

반면 이러한 특징때문에 발생하는 단점이 있는데, 모바일 사이트에 비해서 무겁다는 점이다. 이는 사이트 속도와 직결되는 문제로, 사용자 입장에서는 특히 속도에 목숨을 거는 유저들에게 있어서 불편하게 느낄수도있다. 반응형 웹 디자인은 모바일 사이트보다 읽어들이는 소스가 많아서 쓸데없는 데이터를 소비할 수도 있고, 더군다나 데스크톱 사이트와 모바일 사이트의 용도가 다른 사이트의 경우 이러한 반응형 웹 디자인은 걸림돌이 될 수 있다. 이 때문에 서버 사이드 스크립트를 이용해 접속 기기에 따라 디자인을 선택적으로 적용하는 RESS(Responsive Design + Server Side Components)라는 기법도 있다.

6. 반응형 웹 디자인이 적용된 사이트

리그베다 위키에 항목이 있는 경우만 등재해주세요. 부트스트랩이 적용된 사이트는 해당 항목에 등재해주세요.

6.1. 모바일 페이지만 반응형으로 운영하는 사이트

----
  • [1] 예시 사이트는 웹액츄얼리#
  • [2] 없지는 않았다. 피처폰 시절에도 인터넷 접속은 대다수 가능했다.(WAP,i-mode) 그러나 여러가지 문제로 일반적으로 사용하기에는 무리가 많았고, 설상가상으로 통신사에서 데이터 요금을 너무 비싸게 책정하는 바람에 거의 사용되지 않았다. 인터넷 한두시간 사용했는데 요금 고지서에 몇십만원이 찍혀 나올 정도였으니.... 이 데이터 요금이 현실화 된 것은 스마트폰이 대중화 되던 2010년 무렵부터였다.
  • [3] m.naver.com과 www.naver.com처럼
  • [4] 출처:http://rymuff.com/반응형-웹-디자인/
  • [5] 특정 장치에 최적화된 여러가지의 HTML이 있으면 반응형이라고 부르지 않음. (CSS, JS 파일은 여러가지가 존재할 수 있다.)
  • [6] 우리나라 최초의 반응형 웹 디자인 사이트로 알려져있다.

최종 확인 버전:

 

 

<script>
function Loading( ifid ) {
 var ifname = 'if' + ifid;
 var ifobj = document.all[ifname];

 var divname = 'div' + ifid;
 var divobj = document.getElementById( divname );
 divobj.innerHTML = '';
 divobj.innerHTML = divobj.innerHTML + '<br>' + document.frames('if111').document.title;
}
</script>

<iframe id="if111" src="http://..." width="900" height="330" marginwidth="0" marginheight="0" frameborder="no" scrolling=no onload="Loading('111')"></iframe><p>
<div id="div111"></div>


iframe에서 접근한 웹페이지의 내용에 접근하기 위한 Code이다.
하지만, 동일한 서버에서 운영되는 웹페이지가 아닌,
외부의 다른 웹사이트라면
"액세스가 거부되었습니다." 라는 메시지가 출력되며
스크립트가 정상적으로 동작하지 않는다.

그 이유는 이렇다.


 실행서버의 위치가 다른 웹페이지는
 보안상의 이유로 접근이 불가합니다.

 http://www.abc.com/access.html
 http://www.def.com/readit.html의 Object를 참조할 수 없습니다.

 www.abc.comwww.def.com은 서로 다른 서버이기 때문입니다.

 웹의 보안규약상 접근할 수 없도록 되어 있습니다.
 Object가 참조가능하다면 function도 참조가능해지며 참조가능하다는 것은
 실행도 시킬 수 있다는 뜻이 됩니다.
 보안상 심각한 문제가 됩니다.

 웹브라우져에서 PC의 로컬프로그램을 액세스 할 수 없는 것이나
 다른 서버의 html을 참조 못하게 한 것이나 모두
 보안상의 문제로 막아놓은 기능입니다.

 다만 href로 호출하거나 그 페이지로 submit은 할 수 있습니다.


'plming > HTML-Web' 카테고리의 다른 글

HTML Object Reference  (0) 2015.05.27
반응형 웹 입력폼 코딩  (0) 2015.05.25
반응형 웹 디자인  (0) 2015.05.19
form enctype="multipart/form-data"  (0) 2010.04.08
긴 글...일정 부분만 보이도록 하기...  (2) 2009.05.15

일반적으로 form 을 submit 하게되면,
form안의 element들이 id 나 name으로 submit된다.

submit을 받아 처리하는 action에 정의된 handler들에서는
request.getParameter( "xxx" ); 를 통해 값을 받게 되는데...


파일을 서버에 저장하기 위해서
<form enctype="multipart/form-data" ... 을 사용하게 된다.

하지만, 이때는...
submit을 받아 처리하는 action에 정의된 handler들에서는
request.getParameter( "xxx" ); 를 통해 값을 받을 수 없다...!!!

왜 값이 안넘어가는거야...ㅡㅡ;;;
아무리 울어도 소용이 없다.

그렇다...줄 넘(?)한테서 달라고 요구를 해야하는 것이었다...!!!!!!
그늠은 바로...
com.oreilly.servlet.MultipartRequest
요놈이다.

요놈을 요롷게 사용하면 좋다...

if( request.getContentType() != null && request.getContentType().indexOf("multipart/form-data") > -1 ) {
    String saveDirectory = config.getServletContext().getRealPath( uploadDir + "/education" );
    File dir = new File( saveDirectory );
    if( !dir.exists() ) dir.mkdir();

    int maxSize = 10 * 1024 * 1024;
    DefaultFileRenamePolicy dfrp = new DefaultFileRenamePolicy();

    MultipartRequest multi = new MultipartRequest( request, saveDirectory, maxSize, "euc-kr", dfrp );
    multi.getParameter( "xxx" );
}

MultipartRequest 를 사용하면
MultipartRequest 를 new 하는 순간에...
<input type="file" ... 로 정의 되어있는 파일들이 saveDirectory로 지정된 곳에 upload 된다.

파일이름이 같은 경우를 위해서는,
DefaultFileRenamePolicy 를 써주면 좋다.  (안써도 무방하다)
저장되는 파일명은 aaa.txt 가 2개라면...
두번째 파일은 aaa(1).txt로 저장된다.

저장되는 파일명과
보여줄 파일명이 다를테니...
DB에 저장할 때는...2개 다 저장하는 게 좋을 것 같다.


아~~~주 상세한 설명은 아래를  참고하시라~
"MultipartRequest를 이용하여 업로드구현하기":http://aboutjsp.com/lec/multipart.jsp

말로 쓰려니...어렵구만...;;;

<td height="23" width="175" align="left">
   <div style="width:170px; text-overflow:ellipsis; overflow:hidden;">
      <nobr> 여기 긴 글~~~~~ </nobr>
   </div>
</td>

한 Cell에 들어가야 할 width는 정해져있는데...
문장이 길어지면...원하는 모양으로 표를 볼 수가 없다.

div의 style에 보고자 하는 크기만큼 px 를 지정하면
실제 표시될 때는...

여기 긴 글~~~~~ 이 부분이 
여기 긴 글~~...    요롷게 나오게 되어서...

일부 내용도 보여주고, 표도 멀쩡히 제 크기를 유지할 수 있다.

'plming > HTML-Web' 카테고리의 다른 글

HTML Object Reference  (0) 2015.05.27
반응형 웹 입력폼 코딩  (0) 2015.05.25
반응형 웹 디자인  (0) 2015.05.19
iframe 내부항목 접근 시 액세스 거부되는 현상  (0) 2010.11.09
form enctype="multipart/form-data"  (0) 2010.04.08
  1. 드자이너김군 2009.05.23 03:55 신고

    오 요고 정말 좋은데.. 김군이 찾고 있던거에요~ 감사합니다.^^

+ Recent posts