윤인성 모던 웹을 위한 JavaScript + jQuery 입문 3판 52강 - 요소 가져오기 > javascript

윤인성 | 모던 웹을 위한 JavaScript + jQuery 입문 3판 52강 - 요소 가져오기

페이지 정보

조회: 566

본문

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

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

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

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

안녕하세요 모던 웹을 위한 자바스크립트 제이쿼리 입만 3탄 52강

되겠고요 이번 강의에서는 십자 뭐 절에 문서 기체 가져오기 부터 의
내용을 살펴보도록 할텐데요
자주 사용되는 녀석들만 살펴보도록 하겠습니다 뭐 갤리 데임 켈리 멘트
발림 에이미 라던지 걜 맨 쯔바이 태그 네임은 사실 많이 사용되는 녀석이
아니기 때문에 요러한 녀석들은 건너 뛰도록 하겠습니다
일단 문서 객체를 가져온다 는 이미 는 이미 html 로 만들어져 있는
녀석들을 가져온다는 의미입니다
예를 들어서 h1 헬로 월드 a 와 b 가 이 따라 그러면 이 이녀석들을
들고와서 사용하는 방법으로 의미를 하는건데요
일단 첫번째로 알아볼 메서드는 젤리 맨스 바이 id 입니다
겐 엘리멘트 엘레멘트 를 가져온다 다이디 id 를 사용해서
가져온다는 의미이기 때문에 이때 가져올 수 있는 여성에게는 id 속성이
부여가 되어 있어야 됩니다
예를 들어서 위쪽에 있는 녀석을 헬로우 a 라는 이름으로 놓고 아래쪽에
있는 녀석을
헬로우 b 라는 이름으로 넣게 되면
도큐먼트 점 쟈 엘리먼트 바이디를 사용해서 헬로 a 라는 이름으로
곧바로 들고 와 주실 수 있습니다
뭐 마찬가지로 아래쪽에 있는 기둥 헬로 b 라는 녀석을 z 엘리멘트 바이
아이디에 매개변수로 넣어서 들고 와 주실 수 있습니다
뭐 이렇게 가져오게 되면 이때부턴 자기 마음대로 달 수 있겠죠
이제 2일 헬로 a 와 헬로 비는 저희 거니까요
어쨌거나 헬로 a 에다가 예를 들어서 셀 애트리뷰트를 사용해서
타이틀 속성을 넣는다 그러면 뭐 타이틀 속성도 이러한 형태로 넣을 수
있을 것이고
헬로우 비에 내부에 있는 인어 html 을 우리가 원하는 대로 변경을
하면
우리가 원하는 대로 변경할 수 있을 것입니다
어쨌거나 간단하니까 저장을 하고 실행해 보도록 할게요
저장하고 실행해 보시면 위쪽에 있는 녀석 헬로 월드 에 이라고 되어 있는
모습을 볼 수 있고 요소 검사 등을 확인해서 보시게 되면 안쪽에
타이틀이라는 속성이 추가된 것을 확인할 수 있습니다
마찬가지로 아래쪽에 있는 녀석은 안녕하세요 피라고 b 가 입력되는 모습도
확인 하실 수 있습니다
주거나 가끔가다 감 아이디가 같은게 2개 면은 어쩌냐 라고 물으시는
분들이 있는데요
h&m 의 표준적으로 한 페이지 대해서 어떤 id 속성을 가지고 있는
녀석은 반드시 하나만 위치해야 합니다
물론 그 표준을 지키지 않아도 실행은 되는데 요 표준을 지키지 않은 코드
이기 때문에 자바 스크립트 등을 활용할 때 문제가 될 수 있으니까 반드시
id 속성을 가진 녀석 측정한 id 속성을 가진 녀석은 html 페이지
전체 대구에서 하나만 입력을 해야 된다 도 기억을 해 주시면 좋겠습니다
어쨌건 안료 도큐먼트 점 뿅 을 찍으시고 개수를 입력을 해주시면 갠
엘리멘트 바이아 일이 이제 달리면 치바 이 클래스 4인 갤 2 먼 쯔바이
네임 겟 엘리먼트 바이 태그 네임 개 델리 맨 집 아이 태그 네임
네임스페이스
뭐 이런식으로 나오게 되는데요 z 엘리멘트 엘리멘트 뒤에 s 가 없는
녀석은 하나만 가져오는 녀석이고 엘리멘트 로 s 가 붙어 있는 녀석은
여러 개를 들고 오는 녀석이 때문에 기억을 해 주시면 되겠습니다
뭐 아까 살펴보지는 않는다고 했는데 예를 들어서 개 될 이면지 마이 태그
네임을 살펴보면 매개 변수의 태그 이름을 넣게 됩니다
예를 들어서 h1 태그를 들고 오시면 h1 태그 2개가 들고 아 지는데요
요게 리스트 그러니까 배열 같은 형식으로 들고와 지는데 0번째
인화 html 을 뭐 변경을 해 주시던지 아니면 1번째 이나 html 을
변경해 주신다 던지 하는 형식으로 배열 처럼 사용하시면 되기 때문에 뭐
그냥 넘어가도록 하겠습니다 그냥 넘어간다면 설명은 단 느낌인데요
어쨌거나 html5 에서 추가된 한마디로 인터넷 익스플로러의 이뻐 전
이하에서 사용할 수 없기 때문에
우리나라 대부분을 사회에 사이트에서 사용하면 안되는 메소드가 있는데요
최근의 모바일 페이지를 만들 때는 사실 html5 를 다양하게 활용
하셔도 되고
사실 몰 이 액트 같은 녀석들을 활용 하시게 되면 이걸 중간에 보완할 수
있는 그런 폴리스 일도 끼워넣을 수 있기 때문에 최근에는 쿼리 셀렉터
라는 녀석도 많이 사용합니다
쿼리 셀렉터 같은 경우에는 허리 셀렉터 라는 메서드와 쿼리 셀렉터 얼이
라는 메소드가 있는데요
커리 셀렉터 는 객체를 하나 만들고 오는 거고 쿼리 셀렉터 른 객체를
전부 다 들고 오는 것입니다
어쨌거나 이녀석의 매개 변수에는 선택자를 지정을 하게 되어 있습니다
예를 들어서 c
css 선택자 해서 태그를 선택할 때는 그냥 a 지원을 입력을 해주시면
되고
예를 들어서 헬로 a 라는 클래스를 입력을 해 보고 싶고 그 아이디를
가져오고 싶을 때는
헬로우 a 라는 형식으로 입력을 해주시면 됩니다
마찬가지로 5 클래스가 테스트라고 있게 되면
점 테스트로 들과 주시면 되겠구요
예를 들어서 속성으로 타이틀이 헬로 라고 되어있으면
도큐먼트 짬 쿼리 셀렉터 롱
속성 선택자 를 사용해 주시면 됩니다 타이틀이
헬로 다 요러한 형식으로 u 녀석을 모두 사용을 하게 되면 가장 처음
발견되는 녀석을 들고 오게 되는데요
가장 처음 발견되는 녀석이 요녀석이 때문에 모두 저녀석을 들고 오게
됩니다
그래도 간단하게 정말로 같은 녀석을 들고 오는 지 확인해 보도록
하겠습니다
abcd 를 전부 다 가져 오게 만들었구요
요번에 스타일이라는 녀석을 잠시 사용해 볼 텐데 물론 다음에 알아보게
찜한 스타일이라고 점 을 찍으시면 우리가 css 스타일로 적용할 수 있는
녀석들이 모두다 오게 됩니다
예를 들어서 칼라 에다가 레드를 입력을 해주시면 우리가 css 에서
h1 칼라 레드 라고 입력한 거 것과 같은 효과를 내게 됩니다
그래서 레드로 색상을 변경해 보도록 하겠 구요 마찬가지로 헤더 비해서
음 스타일의
이번에는 폰트 사이즈를 한번 바꿔 보도록 할게요
폰트 사이즈를
c 픽셀로 변경해 보도록 하겠 꾸 요 여성 헤더 씨의
스타일의 요번에는 폰트 패밀리 를
맑은 고딕 으로 변경을 해 보도록 하겠습니다
마지막으로 헤더 뒤에 타일을
이렇게 텍스 털 라인을 센터 로 변경을 해 볼텐데요 모두 같은 녀석을
의미를 하기 때문에 실행을 하면 한 녀석의 전부 다 먹어서 출력이 될
겁니다
지금 여기 붉은색으로 헬로 월드 a 가 출력된 것을 보실 수 있는데용
텍스트 온라인 센터 칼라 레드 폰트 패밀리 맑은 곳 이 폰트 사이즈는 c
픽셀로 들어간 것을 확인할 수 있습니다
어쨌거나 요러한 형식으로 쿼리 셀렉터를 사용하면 선택자 를 사용해서
태그를 들고 올 수 있다라고 기억을 해 주시면 되겠습니다
잡아서 크립 때 책을 보고 계시다면 이미 css 선택자 에 대해서는 어느
정도 알고 있을 것이라고 생각하기 때문에 요녀석 에 대해서 추가적인
설명을 하지 않도록 하겠습니다
어쨌거나 여기 4개정도 일단 기억을 해 주시면 뭐 모르신다면 따로 기억을
해 주시면 좋겠습니다
어쨌거나 쿼리 셀렉터 일도 한번 사용을 해보도록 할텐데요 도큐먼트 점
팀 쿼리 셀렉터 어를 사용하시게 되면 이 녀석은 여러 개를 들고 올 수
있습니다
따라서 h1 을 입력을 하게 되면 h1 을 가진 녀석을 배열로 리턴 을
해주게 되는데요
이게 단순한 배열니기 때문에 반드시 일반적인 반복문을 사용하여
주셔야 됩니다
쏘인 반복문을 사용하여 주시게 되면 일부 구버전 웹브라우저에서 문제가
발생할 수 있기 때문에 반드시
그냥 일반 반복문을 사용해서 점 냉수로 돌리 셔 야 한다.고 기억을 해
주시면 좋겠습니다
어쨌거나 이렇게 돌리고 어레이의 i 번째 있는 뭐 스타일을
칼날을 레드 로 변경을 한다.던지 아니면 칼라 즈 라는
배열을 만들고 하난 레드 하난 블루 를 넣으시고
저 칼라 지에 있는 녀석을 요러한 형태로 넣을 수도 있겠죠
그래서 요러한 형태로 넣게 되면 뭐 프로그래밍 적으로 여러개의 색상을
한꺼번에 넣을 수도 있을 겁니다
어쨌거나 저장을 하고 실행을 하면 첫번째는 붉은색 두번째는 파란색이
들어가는 모습을 확인할 수 있습니다
어쨌거나 굉장히 다양한 메소드를 살펴보았는데요 도큐먼트 를 입력을 하고
점을 찍었을 때 게 타고 입력하고 나오는 게 레베 캡 엘리멘트 vid
제 들리면 쯔바이 클래스 네임 게 달리면 쯔바이 네임 제 들리면 쯔바이
태그 네임 갯 엘리먼트 바이
태그 네임 네임스페이스 등을 모두 활용하실 수 있을 거라고 생각을 하고요
추가적으로 쿼리 셀렉트 얼과 커리 셀렉터 메서드 2
구버전의 인터넷 익스플로러 를 지원해야 된다면 사용할 순 없지만 최신버전
웹브라우저 만 지원 해도 되는 경우에는 굉장히 많이 사용되고 있기 때문에
활용해 주시면 좋겠습니다
어쨌건 오늘 강의는 여기까지 되겠고 용 다음 강의에서 뵙도록 하겠습니다
감사합니다.