분류 전체보기487 jQuery UI 대화창 동적으로 생성하기 jQuery UI 대화창의 기본 사용법은 대화창이 될 HTML을 페이지 내에 미리 만들어서 숨겨었다가보여주는 방식입니다. 여기서는 동적으로 대화창을 만들고, 대화창내에 보여질 내용도 다른 URL을 호출 하여 채워 넣는방법을 알아봅니다. 1. 필요한 파일들을 가져옵니다. 2. 대화창 컨텐츠를 가진 페이지 입니다.(dialog_content.html)동적으로 불려진 컨텐츠 입니다. 3. 클릭하면 다이얼로그를 열 버튼 입니다.동적으로 다이얼로그 열기 4. 동적 대화창 생성 스크립트 입니다. 설명은 코드에 있는 주석을 참고 하세요. 동적 대화창 생성 방법을 알아보았습니다. 2018. 11. 23. Weblogic 서버에 웹애플리케이션 Deploy 하기 자바 웹애플리케이션을 Weblogic 서버에 올리는 방법을 알아봅니다. 먼저 Admin Server Console에 로그인 합니다. 1. 왼쪽 트리에서 "배치"를 클릭합니다. 오른쪽 배치요약에서 "설치"를 클릭합니다. 2. 응용 프로그램 설치 관리자 화면에서 웹 애플리케이션이 있는 경로를 선택합니다. 이예제에서는 D:\download\export 폴더 아래에 ebt_webapp 라는 폴더에 설치하려는 웹애플리케이션이 있습니다. 웹 애플리케이션 폴더 아래에는 WEB-INF/web.xml 파일이 있어야 합니다. 그래야 웹애플리케이션으로 인식합니다. 3. 대상 지정 스타일 선택을 선택합니다. 웹애플리케이션을 설치하는 것이므로 "이 배치를 응용 프로그램으로 설치"를 선택합니다. 4. 배치 이름을 기본값 ebt_.. 2018. 11. 21. 스프링시큐리티에서 CSRF만 사용하기 전자정부표준프레임워크 또는 스프링프레임워크에서 인증은 별도로 구현하고, 스프링시큐리티의 CSRF 기능만 사용하도록 설정하는 방법을 알아봅니다. 테스트는 전자정부표준프레임워크 엔트프라이즈 포털 템플릿에서 했습니다. 스프링 시큐리티 설정파일은 contenxt-security.xml 파일 입니다. 다음과 같이 설정합니다. 기존의 스프링 시큐리티 간소화 설정은 모두 삭제 합니다. 가장 기본적인 설정만 합니다. 이제 태그를 사용하면 CSRF 토큰이 자동으로 삽입되는 것을 확인 할 수 있습니다. 단순 태그를 사용하여 토큰을 삽입하지 않고 로그인을 요청해보면 HTTP 4703 오류가 나는것을 확인할 수 있습니다. 전자정보표준프레임워크 템플릿의 경우에는 스프링시큐리티 인증이 기본으로 되어 있으므로 스크링시큐리티를 걷어.. 2018. 11. 19. jQuery resize()를 사용하여 컨텐츠 영역 height를 100%로 유지하기 jQuery의 resize() 함수를 사용하여 헤더, 메뉴, 컨텐츠 영역으로 구성되는 화면에서 컨텐츠 영역의 높이는 브라우저의 크기를 조절 하더라도 항상 100% 가 유지 되고, 컨텐츠 영역 내부의 실제 컨텐츠의 높이가 컨텐츠 영역의 높이보다 크다면 스크롤이 생기도록 만들어 봅니다. 먼저 html 부분 입니다. head와 main이 상하로 나뉘고, main 내부에는 menu와 contents 가 좌,우로 나뉘어져 있습니다. HEADER MENU CONTENTS Lorem ipsum ... 스타일 시트 부분 입니다. html, body, div 부분은 엘리먼트들의 크기를 초기화 하는 부분 입니다. #main 은 flexbox 레이아웃을 사용해서 구성 했습니다. #contents 가 컨텐츠 영역으로 over.. 2018. 11. 16. Windows에 Weblogic 12.1.3.0 설치하기 앞의 글 "Oracle WebLogic Server 12cR2(12.2.1.3) 설치하기"에서 Weblogic 12.2.1.3버전을 설치했었습니다. 이 버전을 전자정부표준프레임워크 3.7개발툴에 플러그인을 설치하려고하니 아직 지원을 하지 않았습니다. 그래서 전자정부표준프레임워크 3.7과 연동하여 테스트 하기 위해서 Weblogic 12.1.3.0 버전을 설치했습니다. 다음 URL에서 다운로드 합니다. OTN 계정이 있어야 합니다. https://www.oracle.com/technetwork/middleware/weblogic/downloads/wls-for-dev-1703574.html Generic 버전을 다운로드 했습니다. 다운로드한 파일은 fmw_12.1.3.0_wls.jar 한개의 파일 입니다... 2018. 11. 12. Oracle WebLogic Server 12cR2(12.2.1.3) 설치하기 오라클 웹로직 서버 12cR2(12.2.1.3) 버전을 다운로드 받아 설치해 봅니다. 오라클 웹로직 서버는 OTN Free Developer License에 따라 개발 및 테스트에 무료로 사용할 수 있습니다. 다음 URL에서 다운 받습니다. https://www.oracle.com/technetwork/middleware/weblogic/downloads/index.html 라이센스에 동의 후 다운로드 파일을 클릭 합니다. 로그인 화면이 나옵니다. OTN에 가입되어 있어야 합니다. 다운로드 가능한 패키지들 입니다. - Quick Installer 231MB- General Installer 800MB- Fusion Middleware Infrastureture Installer 1.5GB 여기서는 Qui.. 2018. 11. 7. 동시에 여러 메뉴가 열리는 아코디언(Accordian) 메뉴 만들기 이전 글 "jQuery UI Accordian을 사용한 메뉴 만들기" 에서 메뉴를 만들어 보았는데, 한번에 하나의 메뉴만 열렸었습니다. 하나를 열면 열려 있던 다른 메뉴는 닫혀 버리는 것이죠. 여기서는 여러 메뉴를 열 수 있는 방법을 알아 봅니다. jQuery UI의 Accordian으로는 구현이 안되므로 jQuery 플러그인으로 새로 만들어 봅니다. 1. jQuery 를 포함합니다. 2. 메뉴가 될 HTML 입니다. Menu 1 Sub menu 1-1 Sub menu 1-2 Menu 2 Sub menu 2-1 Sub menu 2-2 Menu 3 Sub menu 3-1 Sub menu 3-2 3. 플러그인을 생성합니다. 코드를 간단히 하기 위해서 메뉴가 되는 헤더는 태그를 사용합니다. 간단히 메뉴가 열리.. 2018. 10. 31. jQuery UI Accordian을 사용한 메뉴 만들기 jQuery UI 의 Accordian 기능을 이용해서 메뉴를 만들어 봅니다. jQuery UI는 http://jqueryui.com/ 에서 다운로드 받을 수 있습니다. 1. 필요한 자바스크립트와 스타일 시트를 포함합니다. 2. 메뉴가 될 HTML 입니다. Menu 1 Sub menu 1-1 Sub menu 1-2 Menu 2 Sub menu 2-1 Sub menu 2-2 Menu 3 Sub menu 3-1 Sub menu 3-2 3. 메뉴를 생성합니다. - header: 기본값을 태그 입니다. 그 외의 태그를 사용하려면 header 옵션을 지정합니다. jQuery의 셀렉터 구문을 사용할 수 있습니다. - collapsible: true를 설정하면 모든 메뉴를 다 닫을 수 있습니다. false로 지정하면.. 2018. 10. 31. Flexible Box Layout(Flexbox) - Flex Container Properties Flexible Box Layout(Flexbox)은 스타일이 "display: flex;" 로 지정된 컨테이너 요소내에 자식 요소들을 배치하는 방법에 관한 CSS 입니다. 웹 페이지 레이아웃을 만드는데 있어서 기존에는 float를 많이 사용했는데, 사용하기 힘든 점들이 있었습니다. Flexbox는 좀 더 강력한 레이아웃을 만드는 방법입니다. 하지만 많은 설정 요소들로 인해 사용이 쉽지는 않습니다. ul { display: flex; flex-direction: row; padding: 0; list-style-type: none; outline: solid 1px red; } li { width: 100px; height: 100px; background-color: lightgreen; margin:.. 2018. 10. 29. PHP 암호화 SHA-256, SHA-512, AES-256, RSA PHP 언어에서 다양한 암호화 알고리즘을 사용하는 방법을 알아 봅니다. 1. SHA-256, SHA-512 단방향 암호화 알고리즘 입니다. // SHA-256$hashed = base64_encode(hash('sha256', 'password', true));echo $hashed; // SHA-512$hashed = base64_encode(hash('sha512', 'password', true));echo $hashed; 2. AES-256 대칭키 알고리즘 입니다. openssl 함수를 사용하기 위해서 php.ini 파일에 openssl 확장을 사용하도록 설정합니다. extension=openssl 예제 입니다. $plainText = '암호화될 메세지';$password = 'password s.. 2018. 10. 26. 자바 RSA 암/복호화 사용법 자바 언어에서 비대칭키 방식의 RSA 암/복호화 방법을 알아봅니다. 키생성과 암호화 복호화를 모두 자바 언어로 수행합니다. CipherUtil.java 파일을 1024bit 키를 생성하고, 암호화, 복호화를 지원하는 유틸리티 클래스로 작성되었습니다. 키는 SecureRandom 클래스를 사용해서 임의의 키를 생성합니다. package com.tistory.offbyone.rsa; import java.io.UnsupportedEncodingException; import java.security.InvalidKeyException; import java.security.KeyPair; import java.security.KeyPairGenerator; import java.security.NoSuchA.. 2018. 10. 22. 전자정부표준프레임워크 파일 업로드 크기 설정(feat. MaxUploadSizeExceededException) 전자정부표준프레임워크에서 파일 업로드 크기는 "context-properties.xml" 파일에 정의 되어 있습니다. 템플릿 사이트 설정에는 기본값으로 5MB가 설정되어 있는것을 알 수 있습니다. 필요에 따라 업로드 크기를 100MB 초과 해서 설정하면 MaxUploadsizeExceededException 예외가 발생합니다. org.springframework.web.multipart.MaxUploadSizeExceededException: Maximum upload size of 100000000 bytes exceeded; 업로드 파일 사이즈를 변경해야 할곳이 더 있습니다. 전자정부표준프레임워크는 스프링프레임워크를 기반으로 하고 있습니다. 파일 업로드를 처리하는 빈은 "multipartResolve.. 2018. 10. 16. HTML5 VIDEO 태그로 웹페이지에 동영상 넣기 HTML5에서 새로 나온 기능인 태그를 사용해서 웹 페이지에 동영상을 넣을 수 있습니다. 1. 호환성브라우저 호환성은 IE9 부터 태그를 지원합니다. 지원하는 동영상 포맷을 IE9 부터 .webm, .mp4 를 지원합니다. 2. 주요 속성- width : 동영상 너비- height : 동영상 높이- controls : 설정되면 소리 조절(volume), 동영상 탐색(seek), 일시 정지(pause)/재시작(resume)을 할 수 있는 컨트롤러를 제공합니다.- autoplay : 설정되면 페이지 로딩시 자동 실행됩니다.- oncontextmenu : false 를 반환하면 마우스 오른쪽 키로 띄우는 팝업 메뉴를 사용할 수 없게 됩니다.- src : 동영상을 지정합니다. 내부의 속성을 사용하여 여러개의 동.. 2018. 10. 10. 자바스크립트 RSA 암호화 라이브러리 JSEncrypt JSEncrypt는 브라우저에서 서버로 보낼 데이터를 암호화 하기 위해서 사용할 수 있는 자바스크립트 라이브러리로 RSA 방식으로 데이터를 암호화/복호화 할 수 있습니다. RSA는 비대칭형 암호화 알고리즘으로 브라우저에서 공개키로 암호화 해서 데이터를 서버로 보내면 서버에서는 개인키로 복호화 할 수 있습니다. JSEncrypt는 http://travistidwell.com/jsencrypt/ 에서 다운로드 할 수 있습니다. 이 사이트에 설명되어 있듯이 JSEncrypt는 http://www-cs-students.stanford.edu/~tjw/jsbn/ 에 있는 다양한 암호화 관련 라이브러리들의 래퍼로 하나의 파일에 필요한 라이브러리를 모두 포함하고 있고, 간편한 API를 제공합니다. 다운로드 받은 파일.. 2018. 10. 4. CSS box-sizing 프로퍼티 사용법 HTML 요소들의 크기는 Box Model을 따릅니다. 모든 요소들은 사각형 박스 형태로 페이지내에서 자리를 차지하게 됩니다. 이때 상자(Box)는 컨텐츠 영역, 패딩, 보더, 마진의 영역으로 이루어지고 CSS 에서 width 는 컨텐츠 영역 만을 말합니다. 그러므로 실제로 요소가 차지하는 width는 컨텐츠 너비 + (패딩 x 2) + (보더 x 2) + (마진 x 2) 가 됩니다.(x2 는 좌, 우를 모두 포함하기 때문입니다.) Box Model에 대한 자세한 설명은 "CSS Box Model, Element Size, iframe Auto Resize"을 참고 하세요. CSS에서 요소의 너비(width)가 결정되는 방식을 변경할 수 있는 프로퍼티가 box-sizing 입니다. box-sizing 에.. 2018. 9. 30. 이전 1 ··· 7 8 9 10 11 12 13 ··· 33 다음
