차근차근 개발일기+일상

안녕하세요. html요소에서 html css속성을 동적으로 변경하고 싶은 경우가 있습니다. 이번 포스팅에서는 JavaScript(자바스크립트)의 jQuery를 활용하여 html요소의 css속성값을 호출, css속성값 추가/변경에 대해서 알아보겠습니다. 목차 CSS 속성 호출 CSS 속성 추가/변경 CSS 한꺼번에 변경하기 CSS 속성 호출 html요소Id.css()를 사용하여 해당 요소의 css속성 값을 호출할 수 있습니다. 아래의 코드를 참고바랍니다. $(html속성Id).css(propertyName); 위의 css속성 호출방법을 사용한 예제입니다. 속성값을 가져온 후 alert창을 띄어 속성값을 보여줍니다. menu1 화면 CSS 속성 추가/변경 html요소에 CSS속성을 추가/변경하는 방법입니다...

안녕하세요. 이번 포스팅에서는 JavaScript(자바스크립트)의 랜덤난수를 생성하는 방법 및 예제 + 예제를 응용해서 랜덤난수맞추기 게임을 만들어봤습니다. 목차 랜덤난수 생성(Math.Random) 0부터 N까지 랜덤난수 생성 MIN부터 MAX까지 랜덤난수 생성 랜덤난수 맞추기 게임 만들기 랜덤난수 생성(Math.Random) 자바스크립트에서 랜덤한 난수를 생성하기 위해서는 Math.Random() 함수를 사용합니다. Math.Random()을 사용하면 0 ~ 1 사이의 난수를 생성합니다. 결과 위의 이미지처럼 0부터 1사이의 랜덤한 난수가 생성된 것을 볼 수 있습니다. 0부터 N까지 랜덤난수 생성 0부터 N까지 랜덤난수를 생성하는 방법에 대해서 알아보겠습니다. 0부터 100까지 생성하는 예제입니다. ..

안녕하세요. 보통 HTML요소를 선택한다면 주로 jquery라이브러리를 사용해서 $("")를 사용하여 선택하는 경우가 많습니다. 이번 포스팅에서는 jquery를 사용하지 않고 자바스크립트에서 HTML요소를 선택할 때 사용하는 함수 querySelector(), querySelectorAll()에 대해서 알아보겠습니다. 목차 querySelector() querySelectorAll() querySelector() - HTML의 요소를 선택할 때 사용하며 Id, Name, Class, HTML태그 등 다양한 요소들을 선택할 수 있습니다. - 이름이 같을 경우 최상단의 요소를 선택합니다. - 요소를 선택하여 Value를 변경하거나 Style을 변경하는 등 다양한 동작들을 수행할 수 있습니다. - 사용 예제 ..

안녕하세요. 이번 포스팅에서는 JavaScript(자바스크립트)의 기본적인 함수 prompt(), confirm(), alert()에 대하여 알아보겠습니다. prompt() - 문자열을 입력할 때 사용합니다. - 숫자를 입력해야한다면, 입력한 값을 숫자로 변환해서 사용해줘야 합니다. - prompt()만 사용하는 경우 아무런 설명없이 문자열만 입력받습니다. - prompt("메시지", "디폴트 값") 첫 번째 파라미터는 입력 창에 띄어줄 메시지입니다. 두 번째 파라미터는 입력 부분의 기본 디폴트 값입니다. - 사용예제 1. prompt(); prompt()만 사용하면 아무 설명없이 문자열을 입력받습니다. 2. prompt("메시지"); prompt("메시지")를 사용하여 입력받을 때 메시지를 띄어줍니다...

안녕하세요. 이번 포스팅에서는 SVG에 대해서 알아보겠습니다. 먼저 무언가 공부를 하기에 앞서 가장 먼저 검색하는 곳 위키백과에서 정의한 SVG입니다. 스케일러블 벡터 그래픽스(Scalable Vector Graphics, SVG)는 2차원 벡터 그래픽을 표현하기 위한 XML 기반의 파일 형식으로, 1999년 W3C(World Wide Web Consortium)의 주도하에 개발된 오픈 표준의 벡터 그래픽 파일 형식이다. SVG 형식의 이미지와 그 작동은 XML 텍스트 파일들로 정의 되어 검색화·목록화·스크립트화가 가능하며 필요하다면 압축도 가능하다. SVG 형식의 파일은 어도비 일러스트레이터와 같은 벡터 드로잉 프로그램을 사용하여 편집이 가능하다. 물론 XML 형식으로 되어 있으므로 메모장과 같은 문서..

안녕하세요. 이번 포스팅에서는 XSS Filter에 대해서 알아보겠습니다! XSS란? 원래라면 Cross Site Scripting의 약자로 Cross로 시작하여 CSS가 맞지만 HTML의 css와 겹쳐서 XSS라고 정의한 해킹 기법입니다. XSS 처리를 하지 않으면 간단한 방법을 통해 사이트를 조작할 수 있습니다. 예를 들어 아래처럼 게시판에 글을 쓸 때 스크립트처리를 하면 게시판의 해당 글이 열릴 때 "XSS 테스트" 알람메시지가 실행이 되게 됩니다. 이를 방지하기 위해 XSS Filter처리를 하게됩니다. XSS Filter처리 public static String xssFilter(String str) { String result = ""; result = str; result = result.r..

안녕하세요. 이번 포스팅에서는 크로스도메인이란 무엇인지 알아보겠습니다. 크로스도메인이란? 서로 다른 도메인간의 호출을 말합니다. 크로스도메인을 허용하지 않는 이유 기본적으로 크로스도메인은 허용이 되지 않습니다. 보안상의 위험을 바탕으로 외부 서버의 요청이 들어오면 에러가 발생합니다. JavaScript는 동일 출처 정책(Same-Origin Policy)를 사용하여 다른 도메인의 접근을 차단시켜줍니다. 크로스도메인을 허용하기 위해서는 동일 출처 정책을 해제해야합니다. 교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS) 동일 출처 정책과 반대되는 개념으로 교차 출처 리소스 공유(Cross-Origin Resource Sharing)가 있습니다. 개발을 하다보면 크로스도..

안녕하세요 JavaScript(자바스크립트) 카테고리를 만들었으므로 이번 포스팅에서는 자바스크립트란 무엇인지에 대해서 저도 공부할겸 간단하게 알아보겠습니다. 먼저 위키백과에 나온 JavaScript에 대해서 가져와봤습니다. 자바스크립트(영어: JavaScript)는 객체 기반의 스크립트 프로그래밍 언어이다. 이 언어는 웹 브라우저 내에서 주로 사용하며, 다른 응용 프로그램의 내장 객체에도 접근할 수 있는 기능을 가지고 있다. 또한 Node.js와 같은 런타임 환경과 같이 서버 프로그래밍에도 사용되고 있다. 자바스크립트는 본래 넷스케이프 커뮤니케이션즈 코퍼레이션의 브렌던 아이크(Brendan Eich)가 처음에는 모카(Mocha)라는 이름으로, 나중에는 라이브스크립트(LiveScript)라는 이름으로 개발..