윤인성 모던 웹을 위한 JavaScript + jQuery 입문 3판 53강 - 요소 제거/이동하기 > javascript

윤인성 | 모던 웹을 위한 JavaScript + jQuery 입문 3판 53강 - 요소 제거/이동하기

페이지 정보

조회: 698

본문

※ 영상을 선명하게 보기 안내

유튜브 영상에서 오른쪽하단에 톱니바퀴를 클릭합니다.
팝업목록에서 "품질" 선택하세요.
원하는 해상도를 선택해주세요.

※ 모바일에서 Wifi가 아니라면 데이타가 소진될 수 있으니 주의바랍니다.

윤인성님의 javascript강의 청각장애인을 위한 자막

등 아세요 모던 웹을 위한 자바스크립트 제이쿼리 먼 3탄 뭐 13강

되겠구요
이번 강의에서는 10.8 절에 문서 객체의 스타일 조작과 그 다음 절에
있는 문서 객체 제거
그리고 최근에는 언급하지 않았지만 문서 객체를 이동하는 방법까지
살펴보도록 하겠습니다
듯한 문서 객체의 스타일 조작 관련된 내용 부터 살펴보도록 할텐데요
뭐 h1 태그도 헬로 월드 라는 글을 입력을 했을 때 이 녀석을 가져오는
방법은 지난번 강의에서 언급을 했어요
헤더 라는 변수를 만들고 온 도큐먼트 점 그리고
쿼리 셀렉터 라든지 아니면 개 엘리멘트 바이디 등을 사용해서
저녀석을 선택해 주기만 하면 됐습니다 이때 스타일을 조작할 때는 헤더를
입력하고 점 을 입력했을 때 나오는 스타일 속성을 사용하면 되는데요
스타일 속성 의 속성들을 보게 되면 전부 다 css 와 같기 때문에 쉽게
사용할 수 있습니다
다만 은 입력을 할때 주의해야 할게 있는데요 우리가 스타일 속성 해서
예를 들어서 h1 태그의 칼날을 먹인다고 하면 h1 을 입력을 하고 이
내부의 다가 칼라 속성을 레드 라고 입력을 하면 되고
뭐하 이슬 입력을 한다.면 c 픽셀이 라던지 등을 입력을 하면 되고 뭐
여러가지 입력을 할 수 있을 거예요 예를 들어서 박스 사이징 을 입력을
한다.면 박스 사이징 을 요렇게 짝대기 기어 로 9분된 녀석으로 입력을
할수 있을텐데요
자바스크립트에서 타일을 조작을 할 때는 일단 가장 처음 주의해야 되는
것은 하 이슬 입력을 한다.면 이 녀석은 시 픽셀이 라서 숫자 니까
12 라고 입력을 하는 경우가 많아요 저도 초기에 굉장히 많이 실수를
했었는데요
반드시 문자열로 스 픽셀이 라는 걸 넣어야 한다.고 주의를 해 주시면
되겠구요
박스 사이징 이라든지 아니면 폰테 패밀리 라던지 하는 녀석들이 있을
경우에는 예를 들어 가지고
헤더 점 스타일 점 폰트 패밀리 라고는 입력을 할 수가 없습니다
자바스크립트에서 식별자 내부의 사용할 수 있는 특수 기호 로
밑줄 과 빨라 기 5만 사용할 수 있기 때문에
식별자 내부의 요러한 짝대기 기호를 사용할 수가 없어요 그래서
자바스크립트 개발자들은 스타일 속성을 자바스크립트에서 이용을 할 때는 이
녀석을 식별자로 만들어주기 위해 짝대기 뒤에 있는 녀석을
대문자로 변경을 해서 지금 화면과 같은 형태로 폰트 패밀리 를 입력을
하게 됩니다
css 에 입력할 때 랑 다르다는 것을 기억 을 해주시면 좋겠구요
책을 보시게 되면
10.9 절 위쪽에 표 싶다 17 스타일 식별자 변환 이라고 되어 있는데
왼쪽에 있는 백그라운드로 이미지라는 경우도 안에 짝대기 가 포함이
되어있죠
그래서 이 녀석은 백그라운드로 이미지를 입력을 할 때 아이를 대문자로
입력을 해 줘야 한다.는 거
백그라운드 칼라 도 마찬가지로 짝대기 바로 뒤에 있는 녀석을 합쳐서
백그라운드 칼라로 c 를 대문자로 입력해 줘야 된다는 것 등을 함께
주의해 주시면 좋겠습니다
어쨌거나 입력을 하실 때 보면 굉장히 다양한 속성이 나오기 때문에 css
를 잘 활용하실 수 있는 분이라면 스타일 속성을 그냥 입력해서 대부분
활용할 수 있게 될 겁니다
어쨌거나 스타일을 활용하는 내용은 조금 더 나아가기 위해서 살펴보도록
하구요
곧바로 10.9 절에 문서 기체 제거 부분에 대해서 살펴보도록 하겠습니다
문서 객체를 제거를 할 때는 일단 우리가 제거하고자 하는 문서 객체 가
필요하고 두 번째로 그 부모의 문 저기 제가 필요합니다
예를 들어서 우리가 h1 태그를 제거를 하고 싶다면 현재 h1 태그를
문서 객체로 만들어 둔 도큐먼트 점 쿼리 셀렉터 h1 이 필요하게 되고
요 두 번째로 그 부문 서기 체인 바디가 필요하게 됩니다
뭐 도큐먼트 점 바디 같은 경우에는 그냥 도큐먼트 점 바디로 추출을 할
수 있으니까
이러한 형태로 2개를 준비해 주시면 되구요 부모 객체에서 림 오브
차일드 라는 녀석을 사용해주시면 됩니다
리무버 에 차일드 를 하시게 되면 매개변수로 차일드 노드를 넣게 되는데요
여기에다가 위에서 언급한 h1 태그를 넣어 주시게 되면 h1 태그를
제거할 수 있게 됩니다
조금 더 편리한 방법으로 는 우리가 헤더 라는 녀석의 섬 점을 찍고
테런 틀을 입력을 해 보시면 패 런치 엘리멘트 라던지 탤런트 노드가
나오게 되거든요
이때 패럴 트 도 들을 선택을 한 다음에 잎의 렌트도 d 에서 곧바로 리
무브 차일드 를 해 주시게 되고
내부의 다가 헤더를 적게 되면 유아 앞에 있는 헤더 점 페넌트 노트
부분이 요 바디와 갖게 돼서
동일한 작업을 수행하는 코드가 됩니다 따라서 일반적으로 제거할 때는 요
아래쪽이 형태의 코드를 조금 더 많이 사용한다.고 생각을 해 주시면 됩니다
요 아래 쪽은 우리가 제거하고자 하는 문서 객체 만 가지고 있으면 그
부모를 알아내서 자신을 제거하는 것이기 때문에
u 위에 거는 헤더와 바디 2개가 모두 필요하지만 아래 권은 헤더 라는
여성 만 있으면 헤더를 제거할 수 있기 때문입니다
한번 실행을 해 볼텐데요 일단 제거하는 코트 없인 실행을 한번 해보도록
하겠습니다
저장을 하고 실행을 하게 되면 헬로 월드 라는 h1 태그가 나오는 모습을
확인 할 수 있는데요
아까 마찬가지로 요러한 코드를 사용하게 되면 저장하고 실행을 했을 때
요녀석이 곧바로 제거가 되어서 화면에서 보이지 않게 되는 걸 확인할 수
있습니다
그럼 이번엔 문서 객체 이동 에 대해서 살펴보도록 하겠는데요
문서 객체 이동과 관련된 내용은 일단 책이 는 따로 없어요 그래서 그냥
여기에서 코드를 언급을 하고 유튜브 아래쪽에 코드를 링크로 다루도록
하겠습니다
일단 문서 객체 이동을 위해서 간단한 div 태그를 하나 만들어 두도록
하겠구요
중간을 hr 태그 로 9분을 해서 두 개의 div 태그에
만들도록 하겠습니다 그리고 위쪽에 헬로 월드 라는 글자의 h1 태그를
만들도록 하겠구요 코드를 실행하면 요녀석을 아래쪽에 있는 div 태그로
옮기게 만들어 보도록 하겠습니다
일단 위쪽에 있는 div 태그의 id 를
1st div 라고 주도록 하겠구요 아래쪽에 있는 6칸 세컨드 div
라고 주도록 하겠습니다
참고적으로 html 같은 경우에는
뭐 사실 요건은 개발하는 환경에 따라서 자신이 소속된 팀의 따라서 다룰
수 있는데 우리가 css 스타일을 입력을 할 때는
폰트 셈인지 처럼 요렇게 작대기로 9분된 녀석을 사용하게 되는데요
그래서 html 둥 요렇게 짝대기 로 입력을 하는게 기본이에요 아 일이나
클래스 라던지
그래서 다양한 라이브러리를 살펴 보시게 되면 이렇게 짝대기 를 사용해서
단어를 9분하는 모습을 볼 수 있는데
자바스크립트를 많이 해보신 분이라면 펄스 div 를 요렇게 쓰시는 경우가
많습니다
사실 요런 형태도 최근에는 많이 사용되기 때문에 두 가지 모두 아무거나
선택을 해주시면 되겠는데요 일단 요렇게 사용하는 것이 기본적인 형태이기
때문에 이러한 형태를 사용해서 강의를 진행하도록 하겠습니다
어쨌건 이렇게 만들게 되면
위에 있는 문서 객체 한번 다 가져와 보도록 할게요 일단 post div
는 도큐먼트 점
쟨 엘레멘트 바이 id 로 가져올 수 있겠죠 물론 세컨드 div 동
마찬가지의 방법으로 가져올 수 있을 것입니다
그리고 매개 변수에는 윤 녀석을 입력해 주면 되겠죠
cos div 로 os div 를 가져오면 되고 세컨드 div 로 세컨드
div 를 가져오면 됩니다
결단 현재 상태에서 한번 실행해 보도록 할게요 저장을 하고 코드를
진행하시면 아래쪽 hi 태그가 있고 위쪽 h1 테크가 있기 때문에 현재
uh 원 태그는 펄스 div 아래에 있다고 할 수 있습니다
물론 당연히 오른쪽을 누르고 요소 검사 라던지 아니면 fcp 키를 눌러서
개발자 도구 해서 돔 탐색기 등을 뛰어 드시면 여기 내부에서도 트리
구조를 확인해서 h1 태그가 펄스 div 아래 있다는 걸 확인 할 수
있습니다
참고적으로 요 톰 탐색기는 정말 많이 사용되기 때문에 틈틈이 사용을
연습해 2시면 이후에 큰 도움이 될 것이라고 생각합니다
어쨌거나 그럼 요 녀석을 세컨드 div 아래로 옮겨 보도록 하겠는데요
이 때 필요한 것은 바로 세컨드 div 와 요 h1 헤더 입니다
사용 방법은 굉장히 간단한데 용 세컨드 div 에 우리가 이전에 배웠던
어펜드 차일드 를 실행을 해서 헤더를 놓기만 하면 됩니다
요렇게 되면 자동으로 펄스 div 아래에 있던 헤더가 자동으로 연결이
해제가 되고 곧바로 세컨드 div 아래의 붙게 되서
노드가 이동 되게 됩니다 저장을 하고
실행을 해 보게 되면 요번엔 hr 태그가 위에 있고 헬로 월드 라는
a1000 태그가 아래에 있는 모습을 볼 수 있죠 그래서 위쪽에 있던
녀석래 쪽으로 이동했다는 걸 확인할 수 있고요
마찬가지로 돔 탐색기 를 보시게 되면 이제 펄스 div 안에 아무것도
없게 된 모습을 확인할 수 있습니다
대신 div 세컨드 div 라는 녀석 아래의 h1 태그가 이동해서 들어간
모습도 확인할 수 있습니다
그래서 문서 객체를 이동을 할때는 이동을 원하는 부모 태그를 선택을 해
주신 다음에 여기에다가 어펜드 차일드 를 입력을 해서 바로 노드를
아래쪽이 붙이면 된다고 기억을 해 주시면 되겠습니다
사실 오늘 배운 내용이 많지는 않은데요 문서 객체를 이동할때는 어펜드
차일드 를 그대로 이용하면 된다
문서 객체를 제거할 때는 리무스 의 차일드 를 사용하면 된다
이렇게 두가지를 배웠기 때문에 유 두 가지 메소드에 대해서 기억을 해
주시면 좋겠습니다 적거나 최근 날씨가 굉장히 더운 대형 더위 조심하시면
좋겠고
오늘 강의는 여기까지 되겠고 다음 강의에서 뵙도록 하겠습니다 감사합니다.