[ 자바스크립트+jQuery 완전정복 스터디 2 ]
(http://book.naver.com/bookdb/book_detail.nhn?bid=9650875)
CH5 스타일 다루기
lesson 01 - 스타일 소개
01_스타일 종류
- 외부 스타일 - 외부 파일(.css)에 선언된 스타일
- 내부 스타일 - html문서 내 style 태그를 통해 선언된 스타일
- 인라인 스타일 - 엘리먼트에 style 속성을 통해 선언된 스타일
02_스타일을 다루는 방법
정적인 방법
작성한 스타일을 직접 변경하는 방법을 말하며 스타일 변경 후 문서를 재실행해야 합니다.
동적인 방법
웹 문서를 실행한 상태에서 자바스크립트와 jQuery를 이용해 스타일을 다루는 방법을 말하며 문서의 재실행이 필요 없습니다.
03_jQuery를 활용한 스타일 다루는 방법의 특징
window.getCoumputeStyle
[https://developer.mozilla.org/ko/docs/Web/API/Window/getComputedStyle]
lesson 02 - 핵심내용
실무를 진행하기 위해 반드시 할 줄 알아야하는 핵심 내용만 선별해서 다룹니다.
스타일 값 구하기
스타일 값 설정하기
클래스 추가
클래스 삭제
01_스타일 값 구하기
jQuery를 이용한 스타일 값 구하기
$대상.css(‘스타일 속성이름’);
$대상.css([‘스타일속성이름1’, ‘스타일속성이름2’….]);
02_스타일 설정하기
스타일 값 구하고 설정하기
03_클래스 제어
class 추가
$(대상).addClass(‘클래스명1 클래스명2’);
class 삭제
$(대상).removeClass(‘클래스명1 클래스명2’);
기타 class 제어
CH6 속성 다루기
lesson 01 - 속성 소개
일반 태그의 id와 class 그리고 a태그에 링크 정보를 담는 href와 img태그에 이미지 정보를 담는 src등을 일반 속성이라 부르며 data-value와 가이 사용자 필요에 의해서 만들어 사용하는 속성을 사용자 정의 속성이라고 부릅니다.
일반 속성의 예1
<img src="img/event.jpg" alt="이벤트" />
사용자 정의 속성의 예1
<button data-value="true">확인</button>
lesson 02 - 핵심 내용
속성 값 구하기
$(대상).attr(‘속성명’);
$(대상).data(‘(data-를 제외한)속성명’);
속성 값 설정하기
$(대상).attr(‘속성명’, ‘속성값’);
$(대상).data(‘(data-를 제외한)속성명’, ‘속성값’);
attr과 prop은 왜 나누어졌는가?
[http://javascriptandjquerydev.blogspot.kr/2012/07/attr-prop.html]