파일 업로드 기능을 개발한 경험들은 많을 것 이다. 보통 서버에서 파일 크기 확인을 해서, 실패 응답을 내려주기도 했지만, 요청 전에 직접 확인이 가능 하다.


<input type="file" name="sample" />


정보를 직접 확인 해보자.


$(document).on('change', 'input[type=file]', function() {
    console.log($(this)[0].files[0].size);
    console.log($(this)[0].files[0].name);
});


기본 객체가 Array 로 되어 있어 확인하기 까지 시간을 많이 소비 했다. 평소에 연락을 자주 하고 지내는 전산실 공장장 지단로보트님이 방법을 알려주셨다. Script 에 위 내용을 추가 하고 파일을 업로드 해보자. 확인이 가능 할 것이다.


'Html' 카테고리의 다른 글

HTML Form Submit 시 Checkbox 클릭 안된 경우 값 전달 방법  (0) 2014.10.15
HTML Input 자동완성 막기  (0) 2013.04.01
Form 태그 기본 Submit 막기  (0) 2013.02.28
Brower에서 cache 할 경우 안하게 하는 방법  (0) 2013.02.21
HTML DOCTYPE 이란  (0) 2012.12.08

프로젝트를 접하다 보면 화면에 출력 하거나 긴 문자열을 간추려서 사용 할 때, 문자열에서 Html 태그를 제거 해야 하는 경우가 있는대 유용한 라이브러리가 있다.



사용하기 편리한 유틸, Spring Framework 사용 시 지원 해주는 유틸 등 제공 된다.


pom.xml 에 추가 하자.


<dependency>
  <groupId>com.lyncode</groupId>
  <artifactId>jtwig-functions</artifactId>
  <version>2.0.1</version>
</dependency>


사용 방법


import static com.lyncode.jtwig.functions.util.HtmlUtils.stripTags;

public class StripTagsExample {
    public static void main(String... args) {
        String result = stripTags("<!-- <a href='test'></a>--><a>Test</a>", "");
        // Produced result: Test
    }
}

참고 사이트


'Java' 카테고리의 다른 글

Java Proxy 사용하기  (0) 2014.10.13
Java log4j No appenders could be found for logger 에러 해결 하기  (0) 2014.10.12
Java Clone 사용 하기  (0) 2014.10.10
Java String.split(String regex) 사용 시 '|' 파싱 이 안되는 경우  (1) 2014.10.08
Java HashMap Key 정렬 하기  (0) 2014.09.24

window opener 로 접근해야만 부모 창 window 접근이 가능 하다.


window.opener.location.href = 'http://www.naver.com'


위 코드를 적용 하자.


'Javascript' 카테고리의 다른 글

jQuery, prototype 동시에 사용 시 충돌 해결 방법  (0) 2015.01.09
jQuery Html Template 사용하기  (0) 2014.11.03
jQuery Ajax Array Data 보내는 방법  (0) 2014.09.22
jQuery Checkbox 전체 선택, 해제 방법  (0) 2014.09.22
Javascript 암호화 하기  (2) 2014.04.30

Submit 이벤트 발생 시, 클릭이 안된 Checkbox 는 값 전달 이 무시 된다. 이런 경우에는 Hidden Tag 를 만들어서 해결 하자. Sample 코드는 jQuery 를 사용 하였다.


  • Html
<input type="checkbox" name="sampleCheckbox" />
<input type="hidden" name="sampleHidden" />

  • JavaScript
if ($('input[name=sampleCheckbox]').is(":checked")) {
    $('input[name=sampleHidden]').val('Y');
} else {
    $('input[name=sampleHidden]').val('N');
}


위 샘플을 적용 해보자. 값이 전달 될 것이다.


'Html' 카테고리의 다른 글

HTML Input File 크기 체크 하기  (0) 2014.11.04
HTML Input 자동완성 막기  (0) 2013.04.01
Form 태그 기본 Submit 막기  (0) 2013.02.28
Brower에서 cache 할 경우 안하게 하는 방법  (0) 2013.02.21
HTML DOCTYPE 이란  (0) 2012.12.08 
<input ... autocomplete="off" />

 

위와 같은 속성을 주면 막을 수 있다.

 

'Html' 카테고리의 다른 글

HTML Input File 크기 체크 하기  (0) 2014.11.04
HTML Form Submit 시 Checkbox 클릭 안된 경우 값 전달 방법  (0) 2014.10.15
Form 태그 기본 Submit 막기  (0) 2013.02.28
Brower에서 cache 할 경우 안하게 하는 방법  (0) 2013.02.21
HTML DOCTYPE 이란  (0) 2012.12.08


CSS 작업 방법 중 제일 먼저 해야 할 일은 jQuery의 Selector 처럼 선택자의 활용 이다.


1. 공통 선택하기

* 는 모든 HTML 태그에 대한 속성 선택

* { color: green; }


2. 태그 선택하기

div, p, h1, h2, h3, h4, h5, h6, span ... 여러가지 태그에 대한 속성 선택

div { color: green; border: 1px solid blue; }


3. 자식 태그 선택 하기

div 태그에 하위로 p 태그 선택

<div>

<p>이 부분이 선택 된다.</p>

</div>


div > p { color: green; }


4. ID 선택 하기

첫 번째로 ID만 선택 하는 방법이 있다. #header 이고, 활용 하자면 div 태그이며 ID가 header를 찾는 경우 div#header 로 좀더 정교하게 이용 할 수 있다.

<div id=header>

header

</div>


#header { border: 1px solid blue; height: 100px; width: 100% }

div#header { border: 1px solid blue; height: 100px; width: 100% }


5. Class 선택 하기

위의 방법 ID는 한 페이지에 한번 밖에 이용하지 못하고 개발자들이 자바스크립트로 작업을 할 때 ID를 많이 이용하기 때문에 최소한의 ID만 사용하고 Class로 작업하며, 하나의 영역 Div에서 자식태그로 접근 하는 방식을 많이 활용 해야 한다.

Class는 .area 이와 같은 방법으로 접근 할 수 있다. 좀 더 활용 하자면 div 태그이며 class가 header를 찾는 경우 div.area 로 이용 할 수 있다.

<div class="area">

area

</div>


.area { color: green; }

div.area { color: green; }


간단하게 대표적인 선택 방법을 알아 보았다.


'Css' 카테고리의 다른 글

CSS 로 Div 영역에 Text 맞추는 방법  (0) 2014.10.30
IE7 CSS 속성 적용에 대해서  (0) 2013.04.21
CSS 중복된 속성이 있을 경우 우선 순위 결정 하기  (3) 2013.02.17
그러데이션 효과 관련 사이트  (0) 2012.12.06


DOCTYPE는 페이지의 최상단에 존재하면서 어떤 타입의 HTML인지 알려주게 된다.

템플릿은 Aptana Studio 3 을 사용하여 생성 했다.


1.  Strict (엄격모드): 모든 마크업은 XHTML을 수용할 수 있게 된다.


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>strict</title>
        <meta name="author" content="minchul" />
        <!-- Date: 2012-12-08 -->
    </head>
    <body>

    </body>
</html>


2.  Transitional (호환모드): 과거의 HTML과 새로운 HTML 코드 양쪽을 모두 수용할 수 있는 모드이다. 오래된 HTML 코드와 새로운 HTML 코드를 함께 사용이 가능 하다.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>transitional</title>
        <meta name="author" content="minchul" />
        <!-- Date: 2012-12-08 -->
    </head>
    <body>
        
    </body>
</html>


'Html' 카테고리의 다른 글

HTML Input File 크기 체크 하기  (0) 2014.11.04
HTML Form Submit 시 Checkbox 클릭 안된 경우 값 전달 방법  (0) 2014.10.15
HTML Input 자동완성 막기  (0) 2013.04.01
Form 태그 기본 Submit 막기  (0) 2013.02.28
Brower에서 cache 할 경우 안하게 하는 방법  (0) 2013.02.21

+ Recent posts

티스토리툴바