계산기:   calc.html


게임:   scr.html


그림판(작업중):   picture.html


파일로저장하기:   filedown.txt



'프로그래밍 > WEB FRONT END' 카테고리의 다른 글

그림판  (0) 2018.01.12
Visual Studio Code HTML 확장기능  (0) 2018.01.08
[HTML5] 새로운 요소와 기능  (0) 2014.12.18
[자바스크립트] 9장. jQuery  (0) 2013.12.26
[자바스크립트] 8장. Ajax  (0) 2013.12.26
[자바스크립트] 7장. DOM객체  (0) 2013.12.26
블로그 이미지

오픈이지 오픈이지

시큐어코딩 교육/컨설팅 전문가 그룹

Visual Studio 확장(Extensions) 


웹클라이언트 프로그램 작성에 사용하는 경우 사용하면 편한 확장 기능들입니다.

출처: http://bimmermac.com/1242


EXTENSIONS설명
ftp-simpleFTP를 탐색기 패널에서 트리 구조로 볼 수 있습니다. 리스트를 동기화하는 방식이라서 처음 불러오거나 갱신할 때 시간이 조금 걸립니다.
ftp-sync프로젝트 개념으로 FTP를 사용하려고 하니 ftp-simple에 비해 더 편하네요. 다만 아직 Sublime Text의 SFTP에 비할 정도는 아니고, 보완할 부분이 많은 것 같습니다.
HTML SnippetsHTML 코드를 편하게 입력할 수 있도록 돕는 기능
View in BrowserHTML 문서를 디폴트 브라우저로 띄워주는 기능입니다. 설치 후 Ctrl+F1 키를 누르면 브라우저로 뜨게 됩니다. HTML 문서만 지원하며 저장되지 않은 문서나 다른 종류의 문서는 지원되지 않는 것 같습니다.
Live HTML PreviewerHTML 문서를 편집하며 실시간으로 미리보기할 수 있습니다.
Syncing확장 기능 및 에디터 환경 설정 등을 여러 디바이스와 동기화시켜주는 기능입니다. Github의 gist에 업로드하는 방식이라서 Private하게 올릴 수가 있습니다.
Guides여는 코드와 닫는 코드 사이에 가이드 세로선을 표시합니다.
Markdown Shortcuts마크다운 문법을 단축키 혹은 마우스로 쉽게 할 수 있도록 기능을 제공합니다.
markdownlint마크다운 문법을 체크합니다.
Beutify지저분하게 정렬돼 있는 코드를 예쁘게 정렬해줍니다.
Auto Rename TagHTML/XML에서 한쪽 태그를 수정하면 나머지 반대쪽 상응하는 태그를 함께 수정해 줍니다.
VS Color Picker컬러를 선택할 때 팔레트에서 고르거나 스포이트 툴로 색상 코드를 가져올 수 있습니다.
vscode-open-project프로젝트 기능에 비해서는 부족하지만, 작업 폴더를 프로젝트 리스트로 만들어서 쉽게 폴더 전환을 할 수 있습니다.
Paste Image클립보드의 이미지를 바로 마크다운 코드로 붙여넣을 수 있습니다. 붙여 넣은 이미지는 자동으로 지정된 폴더에 저장됩니다.


'프로그래밍 > WEB FRONT END' 카테고리의 다른 글

그림판  (0) 2018.01.12
Visual Studio Code HTML 확장기능  (0) 2018.01.08
[HTML5] 새로운 요소와 기능  (0) 2014.12.18
[자바스크립트] 9장. jQuery  (0) 2013.12.26
[자바스크립트] 8장. Ajax  (0) 2013.12.26
[자바스크립트] 7장. DOM객체  (0) 2013.12.26
블로그 이미지

오픈이지 오픈이지

시큐어코딩 교육/컨설팅 전문가 그룹

HTML5 표준화 KISA

https://www.koreahtml5.kr/



웹표준 진단 클리닉

https://www.koreahtml5.kr/jsp/diagnosis/SP04.jsp



HTML5 공개 프레임워크 

http://webframeworks.kr/


'프로그래밍 > WEB FRONT END' 카테고리의 다른 글

그림판  (0) 2018.01.12
Visual Studio Code HTML 확장기능  (0) 2018.01.08
[HTML5] 새로운 요소와 기능  (0) 2014.12.18
[자바스크립트] 9장. jQuery  (0) 2013.12.26
[자바스크립트] 8장. Ajax  (0) 2013.12.26
[자바스크립트] 7장. DOM객체  (0) 2013.12.26
블로그 이미지

오픈이지 오픈이지

시큐어코딩 교육/컨설팅 전문가 그룹



































블로그 이미지

오픈이지 오픈이지

시큐어코딩 교육/컨설팅 전문가 그룹



























블로그 이미지

오픈이지 오픈이지

시큐어코딩 교육/컨설팅 전문가 그룹


































블로그 이미지

오픈이지 오픈이지

시큐어코딩 교육/컨설팅 전문가 그룹












































블로그 이미지

오픈이지 오픈이지

시큐어코딩 교육/컨설팅 전문가 그룹







블로그 이미지

오픈이지 오픈이지

시큐어코딩 교육/컨설팅 전문가 그룹













블로그 이미지

오픈이지 오픈이지

시큐어코딩 교육/컨설팅 전문가 그룹






















블로그 이미지

오픈이지 오픈이지

시큐어코딩 교육/컨설팅 전문가 그룹



















블로그 이미지

오픈이지 오픈이지

시큐어코딩 교육/컨설팅 전문가 그룹






블로그 이미지

오픈이지 오픈이지

시큐어코딩 교육/컨설팅 전문가 그룹

자바스크립트(JavaScript)에서는 다음의 함수들로, HTML 페이지 주소를 인코딩/디코딩 한다.

encodeURI() / decodeURI()


최소한의 문자만 인코딩 한다.
; / ? : @ & = + $ , - _ . ! ~ * ' ( ) #  문자는 인코딩 하지 않는다. 

ex) http://openeg.co.kr/key=한글

     http://openeg.co.kr/key=%ED%95%9C%EA%B8%80


encodeURIComponent() / decodeURIComponent()


알파벳과 숫자외의, 대부분의 문자를 모두 인코딩한다.
ex) http://openeg.co.kr/key=한글
     http%3A%2F%2Fopeneg.co.kr%2Fkey%3D%ED%95%9C%EA%B8%80


escape() / unescape()
예전부터 있던 오래된 함수다.   (* @ - _ + . /) 문자는 인코딩하지 않는다.


ex) http://openeg.co.kr/key=한글

      http%3A//openeg.co.kr/key%3D%uD55C%uAE00




자바에서는 URLEncoder/URLDecoder 클래스를 사용하여 웹에서 통용되는 'x-www-form-urlencoded'형식으로 변환하거나 인코딩된 문자열을 다시 역변환하는 작업을 수행한다.


URLEncoder는 대소문자, 숫자, 밑줄을제외한 URL에 있는 모든 문자를 코드화 한다.


URLEncoder 변환규칙 

- 아스키문자(a~z, A~Z, 1~9),  '.',  '-',  '*',  '_' : 그대로 전달 

- 공백문자(' ') : '+' 기호로 변환

- 기타문자 : '%xy' 와 같이 세 개의 문자로 변환

                    xy는 해당 문자의 ASCII코드를 16진수화한 결과를 두자리의 대문자로 나타낸 것.


(사용예)

String data= URLEncoder.encode("http://한글/", "UTF-8");

String origin= URLDecoder.decode(data, "UTF-8"); 


블로그 이미지

오픈이지 오픈이지

시큐어코딩 교육/컨설팅 전문가 그룹

XPath란 


 XPath 는 XML문서에서 특정 부분의 위치를 찾는데 사용하는 개념이다. 쉽게 표현하면 XML 문서를 트리 구조로 표현하고, 최상위 노드부터 최하위 노드까지의 모든 노드 엘리먼트과 속성 그리고 데이터를 추출할 수 있는 경로를 나타낸다. XML 문서 검색과 XSL/XSLT에서 가장 많이 사용하며, XLink나 XPointer에서 필수적으로 사용하는 개념이다.



XPath 노드


root node: XML문서를 표현하는 모든 계층적 노드의 최상위 노드이다.

element node: XML문서안의 각각의 엘리먼트

attribute node: XML문서안의 각 속성값

text node: 엘리먼트노드의 텍스트 컨텐츠

namespace node: 한 엘리먼트가 속해 있는 네임스페이스


<sudents>

   <student id="1234">

        <name>

              홍길동

        </name>

        <phone>

               010-1111-2222

        </phone>

   </student>

</students>

 

name의 위치에 대한 XPath 표현식

/student/name


id에 대한 XPath표현식

/students/student/@id            <-- 절대경로

student/@id                             <-- 상대경로



[링크] XPath 문법




자바에서 XPath 사용하기


     public class XPathTest extends TestCase {

    public void testXPathExpression() throws Exception {
        final String xml = 
            "" +
            "" +
            "    " +
            "        " +
            "        Goetz" +
            "    " +
            "    " +
            "        " +
            "        Martin Fowler" +
            "    " +
            "";
        
        DocumentBuilderFactory factory = DocumentBuilderFactory.newInstance();
        factory.setNamespaceAware(true);
        
        DocumentBuilder builder = factory.newDocumentBuilder();
        Document xmlDoc = builder.parse(new InputSource(new StringReader(xml)));
        
        XPathFactory xPathFactory = XPathFactory.newInstance();
        XPath xPath = xPathFactory.newXPath();
        XPathExpression expr = xPath.compile("/books/book[title='Refactoring']/author/text()");
        
        Object result = expr.evaluate(xmlDoc, XPathConstants.NODE);
        Node node = (Node)result;
        
        assertEquals("Martin Fowler", node.getTextContent());
    }
    
}

 

 

 

XQuery, XPath, XSLT Tutorial


 

XQuery : http://www.w3schools.com/xquery/xquery_add.asp

XPath: http://www.w3schools.com/xpath/


XSLT:  http://www.w3schools.com/xsl/default.asp


블로그 이미지

오픈이지 오픈이지

시큐어코딩 교육/컨설팅 전문가 그룹

XQuery 란


XQUERY는 XML 형식으로 저장된 데이터를 쿼리하기 위해 설계된 선언적 기능 언어이다. 

XQUERY는 XPath 2.0과 XSLT 2.0과 같이 XML표준과 동일한 데이터 모델및 XML스키마 기반 형식 시스템을 사용한다.



XQuery의 구조및 사용예


프롤로그와 본문으로 구성된다. 

프롤로그는 네임스페이스 선언 하위 섹션이 포함될 수 있고, 네임스페이스 선언은 접두사와 네임스페이스 URI간의 매핑을 정의하는데 사용되므로 쿼리 본문에서 네임스페이스 URI대신 접두사를 사용할 수 있게 한다.

본문은 쿼리의 결과를 정의하는 쿼리식이 포함된다.

본문은 서명 FLWOR식, XPath 2.0식, 또는 생성식이나 산술식과 같은 다른 XQUERY식이 될 수 있다.


일반 XQuery 사용예

XQuery에서 문자열 검색예




자바에서 XQuery 사용하기


http://griffy.tistory.com/entry/%EC%9E%90%EB%B0%94-%ED%99%98%EA%B2%BD%EC%97%90%EC%84%9C-XQuery-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0-%EC%83%81


자바에서 XQUERY사용하기(1)

자바에서 XQUERY사용하기(2)

자바에서 XQUERY사용하기(3)


http://www.w3schools.com/xquery/

[출처] XQuery 소개|작성자 우쒸

[출처] XQuery란?|작성자 대파란


블로그 이미지

오픈이지 오픈이지

시큐어코딩 교육/컨설팅 전문가 그룹

티스토리 툴바