[css] a 태그(Tag) 속성 (link, visited, active, hover) 사용하는 방법 이전에 a 태그(Tag) 속성에 대해서 배웠는데, 보통 문서를 링크 시키기 위해 a 태그(Tag) 를 많이 사용 한다. [html] a 태그(tag) 속성 (href, target, title) 사용하는 방법 이번에는 a 태그(Tag) 의 다양한 스타일 속성에 대해서 알아 보자. 태그(Tag) 의 속성 사용법 a:link : 방문 전 링크 상태이다. a:visited : 방문 후 링크 상태이다. a:hover : 마우스 오버 했을 때 링크 상태이다. a:active : 클릭 했을 때 링크 상태이다. 순서가 바뀌면 스타일이 제대로 적용되지 않기 때문에 스타일 적용 순서는 위 순서대로 해야 한다. 기본 h..
[html] a 태그(Tag) 속성 (href, target, title) 사용하는 방법 우리가 인터넷의 웹페이지에서 링크를 통해 다른 웹페이지로 이동하거나, 문서 내에서 이동을 하는 경우가 많다. a 태그(Tag)는 문서를 링크 시키기 위해 사용하는 태그(Tag)이다. 태그(Tag)의 속성 사용법 href : 연결할 주소를 지정 한다. target : 링크를 클릭 할 때 창을 어떻게 열지 설정 한다. title : 해당 링크에 마우스 커서를 올릴때 도움말 설명을 설정 한다. 1. href 속성 href 속성은 태그(Tag)를 통해 연결할 주소를 지정 한다. 기본 사용법은 아래와 같다. 전자뭉치 블로그로 이동하기 실행 결과는 다음과 같다. 태그(Tag) 의 주소는 다양한 방식으로 지정 할 수 있다. 절대..
[jQuery] .append() 와 .appendTo() vs .prepend() 와 .prependTo() 의 차이 jQuery 에서 특정 엘리먼트 안에 텍스트(tag, string 모두 포함) 을 넣어야 하는 경우가 있다. 그럴 경우 사용하는 함수가 .append() 와 .appendTo() 또는 .prepend() 와 .prependTo() 함수 이다. 1. .append() 와 .appendTo() .append() : $(A).append(B) // A 사이의 마지막에 B 가 추가 된다. .appendTo() : $(A).appendTo(B) // A 가 B 사이의 마지막에 추가 된다. 아래 예제를 통해 정확하게 확인 해 보자. [html] 리스트 항목 1리스트 항목 2리스트 항목 3리스트 항..
[javascript] Date() 함수에서 날짜 형식 출력 하는 방법 자바스크립트에서 Date() 날짜 함수를 이용해서 특정 형식으로 년, 월, 일, 시간 등을 출력 할때 출력 format 함수가 없어서 고생하는 경우가 많다. 그래서 함수로 만들어서 사용하면 편리하다. 아래 함수를 이용해 보자. Date.prototype.format = function (f) { if (!this.valueOf()) return " "; var weekKorName = ["일요일", "월요일", "화요일", "수요일", "목요일", "금요일", "토요일"]; var weekKorShortName = ["일", "월", "화", "수", "목", "금", "토"]; var weekEngName = ["Sunday", "..
[javascript] URL 에서 파라메터(Parameter) 추출 하는 방법 자바스크립트에서 URL 주소에서 파라메터(Parameter) 를 받고 싶을때 보통 구분자를 통해 배열에 담아 추출 한다. 하지만 파라메터가 많을 경우 배열 관리가 힘들기 때문에 함수를 만들어서 사용하면 편리하다. 아래 함수를 이용해 보자. // url 에서 parameter 추출function getParam(sname) { var params = location.search.substr(location.search.indexOf("?") + 1); var sval = ""; params = params.split("&"); for (var i = 0; i < params.length; i++) { temp = params[..
[javascript] .getElementById(), .getElementsByName(), .getElementsByTagName(), .getElementsByClassName() 사용하는 방법 자바스크립트에서 HTML 문서의 객체를 가져올때 사용되는 함수는.getElementById(), .getElementsByName(), .getElementsByTagName(), .getElementsByClassName() 가 있다. 아래 예제들을 통해 자세히 확인 해 보자. .getElementById() 사용하는 방법문서객체 중 ID 값을 가져오는데 사용되는 함수 이다. applebanana .getElementsByName() 사용하는 방법문서객체 중 NAME 값을 가져오는데 사용되는 함수 이다...
[jQuery] .animate() 함수에서 .stop() 함수의 중요성 jQuery 에서 .animate() 함수를 구현할 때 흔히 만나게 되는 문제가 하나 있다. 바로 애니메이션 큐(queue) 이다. 예를 들어, 네이게이션 메뉴에 마우스 오버가 되면 애니메이션이 동작하게 코딩이 된 경우, 마우스를 여러번 움직일때, 이전 애니메이션이 멈추기 전까지 애니메이션이 동작하지 않는 현상이 바로 애니메이션 큐로 인해 발생하는 문제이다. 이러한 문제를 해결하기 위해 .stop() 함수를 사용한다. .stop() : 현재 동작하고 있는 애니메이션은 즉시 동작이 중단 된다. .stop() 함수 사용하는 방법 $("#element").stop().animate( { width: "200px" }, 500); 아래 예..
[jQuery] ajax 사용하는 방법 웹브라우저에서 비동기식 데이터 통신을 할때 가장 많이 사용하는 것이 jQuery의 ajax 이다. 사용방법은 $.ajax 이다. 기본 문법은 아래와 같다. [기본형] jQuery.ajax( [setting] ) [예 1] $.ajax({ url: url, data: data, success: success, dataType: dataType }); setting 은 jQuery ajax 통신을 위한 옵션을 담고 있는 객체가 들어 간다. url : 요청 Url data : 요청과 함께 서버로 데이터를 전송 할 string 또는 map dataType : 서버측에서 전송받은 데이터의 형식 (default : xml, json, script, text, html) sec..
[javascript] 배열(array) 의 push(), pop(), unshift(), shift() 함수 사용하는 방법 자바스크립트 배열에서 값을 추가하거나 제거하는 함수로 .push() .pop() .unshift() .shift() 가 있다. 배열에 값을 추가하는 함수 .push() : 배열의 맨 끝에 값을 추가한다. .unshift() : 배열의 맨 앞에 값을 추가한다. 배열에 값을 제거하는 함수 .pop() : 배열의 맨 끝에 값을 제거한다. .shift() : 배열의 맨 앞에 값을 제거한다. 아래 예제를 통해 자세히 확인 해 보자. 기본 html 소스 결과는 아래와 같다.
[javascript] replace 를 replaceAll 처럼 사용하는 방법 결론적으로 replaceAll 과 같은 함수는 없다. 하지만 정규식을 이용하여 대상 문자열에서 모든 부분을 수정할 수 있다. replace 사용법 [예 1] var str = "12345678901234567890"; str.replace("123", ""); // 123 을 공백으로 변경한다. 이와 같이 일반적으로 replace 사용시 첫번째 123만 공백으로 변경하고 나머지는 변경이 되지 않는다. 결과 : 45678901234567890 정규식을 이용해서 replaceAll 처럼 사용법 [예 1] var str = "12345678901234567890"; str.replace(/123/gi, ""); // 123 을 공..
[css] overflow-x 와 overflow-y 의 속성 이전에 overflow 속성에 대해서 배웠는데, overflow 속성은 요소의 박스에 내용이 더 길때, 어떻게 보일지 선택하는 속성이다. overflow (visible, hidden, scroll, auto) 속성 보기 그렇다면 overflow 속성을 이용해서 가로 또는 세로 축만 스크롤바를 생성 시킬려면 어떻게 해야 할까? 바로 overflow-x 와 overflow-y 속성을 사용 하면 된다. overflow-x 속성은 x축, 즉 왼쪽과 오른쪽의 내용이 더 길 때(가로), overflow-y 속성은 y축, 즉 위와 아래의 내용이 더 길때 (세로) 어떻게 보일지 선택하는 속성 이다. overflow-x 속성 사용법 visible (기본값)..
[css] overflow (visible, hidden, scroll, auto) 속성 css 에서 overflow 속성은 요소의 박스에 내용이 더 길 때, 어떻게 보일지 선택하는 속성이다. overflow 속성은 상속되지 않는다. overflow 속성 사용법 visible (기본값) : 특정 요소가 박스를 넘어 가더라도, 그대로 보여준다. hidden : 부모요소의 범위를 넘어가는 자식요소의 부분은 보이지 않도록 처리 한다. scroll : 부모요소의 범위를 넘어가는 자식요소의 부분은 보이지 않지만, 사용자가 확인 할 수 있도록 스크롤바를 표시 한다. (스크롤바 항상 표시) auto : 부모요소의 범위를 넘어가는 자식요소의 부분이 있을 경우 해당 부분을 보이지 않도록 처리하고, 사용자가 해당 부분을 ..
[jQuery] 라디오(radio) 버튼, 체크박스(checkbox) 선택/해제 하는 방법 일반적으로 라디오버튼과 체크박스를 컨트롤 하기 위해서는 jQuery 의 .attr() 함수를 많이 사용 했다. 하지만 jQuery 1.6 버전 이후 부터는 .attr() 함수가 .attr() 과 .prop() 함수로 구분되어 사용하도록 바뀌었다. 2017/09/28 - [develop/javascript] - [jQuery] .attr() 과 .prop() 의 차이 결론적으로 라디오버튼과 체크박스를 javascript 에서 다루기 위해서는 .prop() 함수를 사용해야 한다. [예 1 - 라디오버튼] HTML사과복숭아 Javascript$("input:radio[name='fruits']:radio[value='사..
[jQuery] .attr() 과 .prop() 의 차이 jQuery 를 사용하다 보면 태그들의 속성값을 정의하거나 가져오기 위해 .attr() 함수를 사용하는 경우가 많을 것이다. 그런데 jQuery 1.6 이후 부터 .attr() 함수가 용도에 따라 .attr() 과 .prop() 으로 분리 되었다. 그렇다면 .attr() 과 .prop() 의 차이는 무엇일까? .attr() : html 의 속성(attribute)을 다룬다. .prop() : javascript 프로퍼티(property)를 다룬다. [예 1] 1. 코멘트 2. var $comment = $('#get_comments'); 3. alert($comment.attr('href')); // href 속성 값을 표시 4. alert($co..
html tag는 브라우저에 탭재된 Stylesheet 에 따라 기본적인 CSS 속성을 가지고 있다. 그 중에 inline 과 block 이라는 속성은 tag에 원천적인 속성으로 포함하고 있기 때문에 꼭 이해해야 한다. inline 속성 줄을 바꾸지 않고 다른 요소와 함께 수평으로 한 행에 정렬하려는 속성 이다. width, height 속성이 적용되지 않고, vertical-align, line-height 속성이 적용 된다. 연속으로 나열되는 tag 간에 최소한의 간격을 유지하기 위해서 왼쪽, 오른쪽에 약 5px 가량의 margin 이 자동으로 발생 한다. inline 속성의 엘리먼트 samp, kbd, var, cite, abbr, acronym, a, img, object, br, script, ..