윤인성 모던 웹을 위한 JavaScript + jQuery 입문 3판 65강 - jQuery로 문서 객체 조작하기(2) > javascript

javascript

자바스크립트 강의 리스트

윤인성 | 모던 웹을 위한 JavaScript + jQuery 입문 3판 65강 - jQuery로 문서 객체 조작하기(2)

본문

※ 영상을 선명하게 보기 안내
  1. 유튜브 영상에서 오른쪽하단에 톱니바퀴를 클릭합니다.
  2. 팝업목록에서 "품질" 선택하세요.
  3. 원하는 해상도를 선택해주세요.
※ 모바일에서 Wifi가 아니라면 데이타가 소진될 수 있으니 주의바랍니다.
윤인성님의 javascript강의 청각장애인을 위한 자막
15444120667707.jpg

 안녕하세요 모던 웹을 위한 자바스크립트 제이쿼리 먼 3판 65 강

되겠구요
이번 강의에서는 지난번에 살펴보지 않은 남은 문서 객체 조작 에 대해서
살펴보도록 하겠습니다
일단 지난번에 배웠던 걸 다시 한번 정리해 보도록 하면 욤
우리가 네 가지 메소드를 배워서 써요 일단 뭐 h1 태그를 선택을 했다고
할 때
이 내부에 있는 스타일을 조작하는 css 메써드 그리고 이 내부에 있는
속성을 조절하는 htr 메서드
내부에 있는 html 을 조작하는 html 메써드 그리고
내부에 있는 텍스트를 조작하는 텍스트 메소드에 대해서 살펴보았습니다
이때 css 메서드와 hdr 메 스 터 드 아트 리빙 메서드는 첫번째
매개변수에 어떠한 속성을 넣게 되구요
요렇게 1 만 입력해서 사용하게 되면 개의 터 로서 사용되며 h1 요
앞에 있는 선택자 로 선택된 가장 첫번째 태그의 속성을 추출 해줍니다
두번째는 각각의 값에 두 번째 매개 변수의 값을 입력해 주는 방법
이었는데요 이렇게 값을 입력하게 되면 속성인 값이 들어가게 됩니다
여러개를 한꺼번에 입력하고 싶을 때는
뭐 css 라던지 atms 두가지 맛 모두
매개변수로 객체를 입력을 하고 속성과 값에 객체를 넣어주었습니다
이때 값에는 문 짜리 라던지 숫자를 넣을 수도 있지만 함수를 넣어서
사용하는 방법도 있으며 함수를 넣어서 사용할 때는 매개변수로 인덱스가
들어온다고 기억을 해주시면 좋겠구요
아래쪽에 있는 html 메서드와 텍스트 메써드 같은 경우에는 그냥 이렇게
입력하는 것만으로 값을 추출하는 개의 터가 되고요
매개 변수를 하나 드립력 을 해주게 되면 내부의 html 을 넣거나
텍스트를 넣어 주는 세터 형태가 된다 고 기억을 해 주시면 좋겠습니다
마찬가지로 이때도 값을 함수로 지정할 수 있다라고 기억을 해주시면
좋겠구요
이걸로 지난번 강의에 복습은 대충 끝났다고 할 수 있습니다
어쨌건 우리가 css 를 조작을 할 때는 클래스를 사용하는 경우가 많아요
아 뭐 스타일에서 점
해달 라고 입력을 한다.던지 아니면 몸 아
이점 레드 텍스트 라고 입력을 한다.던지 라는 식으로 클래스를 사용해서 이
클래스를 적용함으로써 한번에 여러가지 스타일을 지정하는 경우 많은데요
이때 이렇게 익히 잘 메소드를 사용해서 클래스를 지정하는 방법도 있겠지만
클래스 같은 경우에는 띄어쓰기를 사용해서 여러 개를 입력하게 될 수도
있죠 그래서 이렇게 이 띄어쓰기를 입력을 해서 여러 개를 입력하는 처리를
쉽게 하기 위해서 클래스와 관련된 메소드가 따로 제공이 됩니다
465 페이지에 15.2 절 책 문서 객체의 클래스 속성 추가 부분과
이 다음 절에 있는 문서 객체 클래스 속성 제거 부분인데요 제거를 할
때는 레몬 2 클래스 그리고 추가를 할 때는 애드 클래스를 사용한다.고
지역을 해주시면 좋겠습니다
간단하게 h1 태그 에다가
에드 클래스를 사용해서 블레이드 텍스트 라는 클래스를 추가해 보고 헤더
라는 녀석도 한번 추가해 보도록 하겠습니다
각각 이 녀석의 는 모텍스 털 라인이 라던지 아니면 음 레드 텍스 니까
칼날을 내 두루 지정하는 등의 활동을 해 보도록 하겠습니다
어쩌고 난 요런 형태로 코드를 지정을 하고 실행을 하게 되면 두 개의
클래스가 추가가 되어서 붉은색 글씨로 가운데 정렬되는 h1 태그를 볼 수
있습니다
요소 검사 등을 사용해서 요소를 보시게 되면 이에 2000 태그의 레드
텍스트와 헤더 라는 클래스가 적용되었다는 것을 확인할 수 있습니다
이러한 애드 클래스 메서드 는 정말 많이 사용되는데요 간단하게 c 제일
제일 제장 홈페이지를 한번 살펴보도록 하겠습니다
일단 어떠한 기능을 배우게 되면 그걸 어디에 사용할지 계속 보는게
좋은데요
사실 이와 관련된 내용은 이후에 살펴보겠지만 한번 살펴 보 중간에 애드
클래스 메소드 와 관련된 내용을 살펴보도록 하겠습니다
일단 보시게 되면 위쪽에 브랜드 제품 이벤트 레시피 등의 메뉴가 있는데요
요 녀석들을 올리게 되면 지금 오른쪽에 보시게 될 때 보라색으로 깜빡
깜빡이는 부분을 보실 수 있을 겁니다
보라색으로 깜빡이는 부분은 변화된다는 뜻인데요 왼쪽 브랜드의 올리고 있을
때는 이 위쪽에 있는 클래스가 아이템 브랜드 그리고 내비게이션 아이템으로
되어 있는데 이걸 올리게 되는 순간 아이템 브랜드 네비게이션 아이템
거기에 오픈 이라는 녀석이 에이드 되어서 추가가 되어서 지금 화면처럼
붉은색으로 바뀌면서 아래쪽에 무언가가 나온다는 것을 확인할 수 있습니다
1 썰 요러한 형태로 지금은 뭔지 모르겠지만 일단 이렇게 사용이 된다고
기억을 해주시면 좋겠구요
그냥 틈틈히 살펴보면서 뭔가 변화가 일어나면 요건 클래스가 추가가 된 게
아닐까 라는 식으로 기억을 해 주시면 좋겠습니다
그럼 클래스를 제거하는 것도 살펴보도록 하겠는데요
처음 클래스가 가지고 있는 리 무브 클래스 라는 녀석으로
뭘 레드 텍스트를 제거를 해 주시거나 아니면 헤더 라는 녀석을 제거를 해
주시게 되면 클래스를 제거하게 됩니다
뭐 간단하게 셀 타임아웃을 사용해서
실행이 된 이후에 2초 있다가
천 에다가 2를 곱하면 2초 가 되겠죠 2초 있다가 클래스를 제거 하게
만들어 보도록 하겠습니다
코드를 저장을 하고 실행 해 주시게 되면 처음에는 붉은 색으로 중앙 정렬
되어 있다가 2초 후에 클래스가 사라지면서 검은색의 왼쪽 정렬로 돌아오는
모습을 확인할 수 있습니다
어쨌거나 이렇게 애드 클래스 와 림 오브 클래스 를 사용하게 되면 뭐
attr 메서드의 매개 변수로 클래스를 지정하는 것보다 훨씬 더 쉽게
사용할 수 있다고 지역을 해주시면 좋겠구요
추가적으로 해제 클래스라는 메쏘드 있는데요 헤즈 클래스 를 사용하게되면
내부에 그 클래스가 있는지 없는지에 대해서 알 수 있습니다
뭐 예를 들어서 간단하게 헤더 라는 6과 콘텐츠라는 6 2 들어 있는지
확인을 하고
요녀석을 아웃풋 a 와 아웃 2b 로 뺀 다음에 요 오픈 a 와 p 를
화면 아래에 다가 추가해 보도록 하겠습니다
뭐 저번에 살펴보았던 것처럼
lg 쨈을 형식의 문자열을 제이쿼리 함수에 매개변수로 넣게 되면 객체가
자동으로 생성이 되고요
어펜드 툴을 사용하면 뭐 바디 뒤쪽에 다가 붙일 수 있게 됩니다
이 중간에 html 을 사용해서 텍스를 한번 넣어 보도록 할게요
아웃풋 a 왕
아우 두피를 넣어주면 되겠죠 이렇게 입력을 하게 되면 헤더에 이 같은
경우에는 아웃풋 a 같은 경우에는 헤더가 있기 때문에 트 룩
두번째 of p 같은 경우에는 펄스가 들어가게 되는데요
뭐 불을 넣는 것보다는 문자열로 변환 해서 넣는게 조금 더 직관적이고 이
때문에 문자열로 변환 했어도 도록 하겠습니다
참고적으로 문자열로 변환하지 않는 경우엔 실행될 것 한번 넣어 보도록
하겠는데요 코드를 저장을 하고 실행 해 보게 되면 지금 화면과 같이
출력하게 됩니다
일단 위쪽 h1 태그는 그대로 나오는 모습을 볼 수 있고요
아래쪽에 트로 와 펄스가 나오는 모습을 볼 수 있는데 가장 마지막에
출력한 h2 태그에는 내부의 글자가 찍히지 않는 모습을 볼 수 있습니다
사실 뭐 html 메서드 매개 변소에 문자열이나 숫자 가 아닌 것을 얻는
경우가 굉장히 드물 텐데요
불리언 을 넣게 될 경우 펄 쓰면 화면에 출력되지 않습니다
어쨌거나 이러한 형태로 어떠한 클래스가 추가를 하거나 가지고 있는지
확인하거나 제거할 수 있다라고 기억을 해 주시면 좋겠습니다
이렇게 사용하게되면 lgt 아 를 사용해서 클래스를 지정을 하는 것보다
훨씬 더 쉽게 클래스를 사용할 수 있게 될 것입니다
어쨌거나 이렇게 생성한 hr 을 제거하는 경우도 있는데요 이때는
리무 ver.2 비트 메소드를 사용하게 됩니다
리무버 어트리뷰트 를 사용하게되면 입력한 어찌 이 비트를 제거할 수
있습니다
뭐 쉽게 이해하실 수 있을 거라고 생각하기 때문에 따로 예제는 살펴 보지
않겠습니다
어쨌거나 이 외에도 뭐 속성과 관련된 여 소리 더 있어요 뭐 점을 누르고
클래스를 입력을 해 보시면 방금 배웠던 레드햇 제리 모브 외에도 토크 리
있는 모습도 확인할 수 있는데요
요녀석은 매개변수로 넣은 녀석을 스위치 해주는 녀석입니다
예를 들어서
토글 클래스 메서드의 매개 변수에 베일을 넣게 되면 현재의 이가 없기
때문에 a 를 생성할 하게 되구요
한번 더 실행을 하게 되면
제거를 하게 됩니다 요렇게 토크를 해주는 녀석이라고 기억을 해 주시면
좋겠습니다
어쨌거나 이렇게 지금까지 속성과 관련된 녀석 스타일 관련된 여서 그리고
내부에 있는 글자와 관련된 녀석들을 조절하는 방법에 대해서 모두
알아보았는데요
요 녀석들이 전부 9 요 녀석들을 굉장히 다양하게 활용하게 되니까 꼭
기억을 해 주시면 좋겠습니다
어쨌거나 마지막으로 이제 문서 객체 생성 방법 배웠고 내부에 있는 거
조작하는 벤 법회 었으니까 제거하는 방법을 배우도록 하겠는데요
이때는 그냥 리 무브를 사용을 해주시면 됩니다
예를 들어 h1 의 리무버를 선택을 하게 되면 h1 태그를 전부 제거해
버리게 됩니다
코드를 저장을 하고 실행해 보면 h1 태그가 그냥 제거되는 모습을 확인할
수 있습니다
어쨌거나 지금까지 생성하는 방법 조작하는 방법 그리고 제거하는 방법 까지
배웠는데요
다음 강의에서 이동하는 방법까지 배우게 되면 문서 객체 조작과 관련된
내용은 모두 끝난다고 할 수 있습니다
어쨌든 오늘 강의는 여기까지 되겠고 용 다음 강의에서 뵙도록 하겠습니다
감사합니다.

댓글 0개

등록된 댓글이 없습니다.

본 사이트의 컨텐츠는 명시적으로 공유기능을 제공하고 있는 공개된 자료를 수집하여 게시하고 있습니다.

저작권, 강의등록, 광고, 제휴등은 "관리자에게 문의"로 메세지 주시면 확인후 답변드립니다.

Menu