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

javascript

자바스크립트 강의 리스트

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

본문

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

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

되겠고 0
이번 강의에서는 문서 객체 이동과 관련된 내용에 대해서 살펴보도록
하겠습니다
펠 지는 488 페이지 되겠구요 10 5장 14절에 문서 객체 삽입 부분
되겠습니다
일단 이동과 삽입 이라는 건 사실 애매하기 는 1대 0
어떤 문서 개체가 이미 화면에 붙은 상태에서 다른 곳으로 넣게 되면
이동이 되는 거고 화면 밖에 있는 문서 객체를 화면에 추가하게 되면 문서
긷지 삽입이 되기 때문에 같은 거라고 생각을 해 주시면 되겠습니다
어쨌거나 문서 객체를 이동하거나 삽입할 때는 4가지 이름의 메서드를 두
가지 형태로 쓰게 되는데요
일단 이름부터 한번 짚고 넘어갈게요 이름 1
비포 프리 팬 드 어펜드 애프터 입니다
어떤 대상이 있을 때 이 내부의 앞쪽에 붙인 야 뒤쪽에 붙인 야
아니면 어떤 대상이 있을 때 이밖에 즉 이 대상 과 같은 형제 위치에
앞에 붙인 야 뒤에 붙인 야에서 4가지가 되겠는데요
말로 설명하면 귀찮으니까 일단 그림을 참고해 주시면 좋겠고
조금있다가 실행 결과로 알아보도록 하겠습니다
어쨌거나 이 녀석들은 어펜드 투 프리 펜 드 투 인써트 에스터 인써트
b라는 형태의 이름을 가지고 있구요
두번째로는 15점 15절에 있는 것처럼 어펜드 프리 팬 드 애프터 b4
라는 이름을 가져서 모두 8개의 메서드로 문서 객체를 이동하거나 삽입하게
됩니다
어쨌건 우리가 지금까지 문서 객체를 요러한 형태로 생성을 했었는데요
이렇게 입력을 하고 뭐 내부의
헬로 월드 라고 입력을 한 뒤
어펜드 투 라는 녀석을 바디에 입력을 해서 바지 태그 뒤쪽에 다가 h1
태그를 붙이는 과정을 계속 살펴보았습니다
그럼 몇 가지를 더 입력을 해서
프리 펜 d2 메서드 왕 인써트 엑스터 그리고
인써트 b에 대해서 알아보도록 하겠습니다
각각 을 9분할 수 있게 뒤쪽에는 뭐 헬로 어펜드 라던지 헬로 프리 팬들
라던지 헬로 f 터라 단지
헬로 빗소리 라는 글자를 입력을 해 주도록 하겠습니다
코드를 저장을 하고 실행을 해 주게 되면 지금 화면과 같이 좀 굉장히
복잡하게 출력이 되는데요
일단 위쪽에 있는 걸 살펴보기 보다 곧바로 요소 검사 를 사용해서 내부를
보도록 할게 염
일단 인써트 비프 와 앱스토어 부터 살펴보도록 하겠는데요
b 스와 애프터 는 어떠한 태그의 형제 위치에 앞쪽과 뒤쪽에 부츠 글
됩니다
따라서 현재 바지 태그를 지정을 했는데요 바디 태그의 아이 앞쪽 그리고
아예 뒤쪽에 헬로 b와 헬로 애프터 가 들어간 모습을 확인할 수
있습니다
이에 반해서 프리 펜 드와 어펜드 는 그 뒤에 있는 태그의 지정한 안쪽
부분에서 앞쪽과 뒤쪽에 붙이게 됩니다 따라서 헬로 프리 팬들은
바지 태그의 앞 쪽에 붙는 모습을 볼 수 있고요
헬로 어펜드 는 바지 태그의 안쪽에서 뒤쪽 인 붙는 모습을 확인할 수
있습니다
따라서 이렇게 위치를 잡게 된다 고 기억을 해 주시면 좋겠습니다
이야기 인정이 쉬실 텐데요 어떠한 객체를 만들고 뒤에 붙일 때 어펜드 투
그리고 풀잎의 엔드 투 인써트 에프터 인써트 b를 사용한다.고 기억을
해 주시면 되겠습니다
두번째 메서드는 몸을 입력을 하고
어펜드 를 사용하는 것과
프리 팬들 그리고 ft
그리고 d4개 되겠는데요 이녀석 같은 경우에는 요 두개의 순서가 바뀐
거라고 생각을 해 주시면 되겠습니다
앞쪽에 바디 태그 등을 입력을 하게 되고요
뒤쪽에 다가 태그를 입력을 하게 됩니다
참고적으로 지금 보시면 아시겠지만 어떠한 문서 객체를 만든 다음에 곧바로
이 녀석을 어디에다 붙인다고 사용하는게 조금 더 쉽고 메쏘드 체인링 도
싶습니다
따라서 래 형태보다는 이 위쪽에 형태가 더 많이 사용된다고 기억을
해 주시면 좋겠는데요
뭐 사실 이름이 비슷비슷하고 뭐 이름을 입력해 보다보면 어펜드 모였는데
하다보면 이렇게 딱 나오기 때문에 뭐 쉽게 기억하시고 사용하실 수는 있을
거라고 생각을 합니다
어쨌거나 요렇게 문서 개체 이동 메서드
8개 에 대해서 알아보았는데요 일단 우리는 문서 객체를 삽입하는 방법에
대해서 알아보았는데
이제 이동에 대해서 알아보도록 하겠습니다
현재 화면을 보시게 되면 h1 태그가 하나 있는데요
간단하게 h 태그도 하나 만들도록 할게요 그리고 뭐 h3 태그도 하나
만들어서 지금 화면과 같이 화면에 h1 h2 h3 태그가 하나씩 위치하게
하겠습니다
이 상태에서 h1 태그를 잡고 어펜드 투 바디 를 하게 되면 어펜드 투는
안쪽에서 뒤쪽에 위치한다. 그랬죠
그래서 u 위치가 될 겁니다 이렇게 기존에 있는 객체를 가지고 어펜드
투나 프리 펜 드 토
인써트 often 써 트 b를 사용하게되면 뉴 위치가 이 위치에서
뒤쪽의 위치로 이동이 됩니다 한번 코드를 저장을 하고 정말 그렇게 되는지
살펴보도록 할게요
저장을 하고
실행을 해 보게 되면 h1 태그가 뒤 쪽으로 이동한 모습을 확인할 수
있습니다
따라서 이와 같은 형태로 문서 객체를 이동할 수도 있다라고 기억해 주시면
좋겠습니다
어쨌거나 지금까지 문서 객체와 관련된 내용을 대부분 살펴보았는데요
지금까지 내용은 정말 중요하고 정말 많이 사용되는 것들 있기 때문에
이름을 꼭 기억을 해 주시면 좋겠습니다
뭐 사실 갑자기 너무 많이 배워 가지고 이걸 어떻게 한번에 기억하냐 고
하실분 돼 있을 거라고 생각을 하는데요
그때는 그냥 속성 조작하는 게 뭐 였지 라고 생각을 떠올렸을 때 이렇게
점을 찍고 자동완성 기능을 보면서 대충 attr 이었나
요러한 식으로 사용할 수 있게 까지만 기억을 해 주시면 좋겠습니다
이렇게 까지만 기억을 해 주시면 뭐 이후에는 계속 이 녀석을 활용해
보면서 뇌가 그냥 익혀 버릴 테니까요
어쨌거나 오늘 강의는 여기까지 되겠구요 다음 강의에서 다시 뵙도록
하겠습니다 감사합니다

댓글 0개

등록된 댓글이 없습니다.

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

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

Menu