[JQuery] Remove | CSS Classes | CSS | Dimensions

24.03.21 26일차

목차

1. Remove

    - remove

    - empty

2. CSS Classes

    - addClass

    - removeClass

    - toggleClass

3. CSS

4. Dimensions  (면적, 넓이)

    - .width()

    - .innerWidth()

    - .outerWidth()

    - .outerWidth(true)

---

 

1. Remove

1. remove : 전체 삭제

 

2. empty : layer 틀은 놔두고 내용만 삭제

 

3. class 삭제

 

4. 여러 클래스 삭제

빨강=클래스1, 파랑=클래스2

 

 

2. CSS Classes

1. addClass

blue class 추가

test class 추가

 

 

 여러 클래스 동시에 추가

test와 blue 클래스를 div1에 삽입

test와 blue class가 삽입된 모습

 

2. removeClass : 클래스 삭제

h1,h2,p 태그에서 class blue 삭제

 

 

3. toggleClass : 선택한 요소의 클래스 값 추가 제거를 반복하는 것

 

 

3. CSS

1. css 색상가져오기

 * 세가지 색상이 있으면 첫번째 색상만 가져오기 가능

css 배경색상을 가져오기

첫번째 색상만 가져오기 가능

 

 

2. css 글자크기 조정

p태그의 글자크기를 200%로 설정

 

 

4. Dimensions  (면적, 넓이)

.width() : 요소의 크기

.innerWidth() : 요소의 width 값 + padding 값

.outerWidth() : 요소의 width 값 + padding 값 + border 값

.outerWidth(true) : 요소의 width 값 + padding 값 + border 값 + margin 값

 

1. width&height : 가로세로 길이

width300

 

2. innerWidth & innerHeight : 가로세로 안쪽 여백까지 모두 포함

width300+padding20

 

 

3. outerWidth & outerHeight : 가로세로 안쪽 여백과 테두리의 두께까지 포함된 값

width300+padding20+border2

 

 

4. outerWidth(true) & outerHeigh(true) : 가로세로 안쪽 여백과 테두리, 바깥쪽여백의 두께까지 포함된 값

width300+padding20+border2+margin6

 

window 크기 확인

 

사이즈 늘리기