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

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

페이지 정보

조회: 535

본문

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

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

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

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

안녕하세요 못한 랩을 위한 자바스크립트 제이쿼리 입만 3판 64강 되기

구 용 이번 강의에서는 앞쪽에 내용을 잠시 건너뛰고 15장에 있는 문서
객체 조작과 관련된 내용을 살펴보도록 하겠습니다
지난 강의에서 h1 태그를 만들고 요녀석을 선택자 로 지정을 하면서
css 라는 이름의 메써드 와 html 이라는 이름의 메서드 등을 활용해
보았는데요
이번 강의에서는 여기에서 추가로 htr 이라는 이름의
메서드와 텍스트 라는 이름의 메소드에 대해서 배운다 라고 기억을 해
주시면 되겠습니다
어쩌 거니 메서드 들은 사용 방법이 굉장히 많은데요 간단하게 쭉 살펴
보도록 하겠습니다
일단 가장 처음 기억해 주셔야 될 거는
요 녀석들을 세트 형태로 사용할 수 있다 와 캐릭터 형태로 사용할 수
있다라고 기억을 해 주시면 되겠습니다
요게 가장 기본적인 9분 되겠는데요 예를 들어서 우리가 지난번에 배웠던
cs 쓰라는 녀석을 활용을 해서 요거 에 대해서 살펴보도록 하겠습니다
일단 세타 형태는 값을 지정할 때 사용하는 녀석이라고 생각을 해 주시면
됩니다
우리가 지난 강의에서 h1 태그의 칼날을 레드 로 바꿔 라고 해서 css
속성을 변경을 했었는데요
여기에서 매개 변수를 하나 제거 해 주시게 되면 요녀석은 개 터로 작동을
해서 칼라 라는 속성을 추출해서 출력하게 됩니다
따라서 개 터는 매개 변수를 1
생략해서 사용한다.고 기억을 해 주시면 되겠는데요 한번 이 실행을
확인해보도록 하겠습니다
뭐 글자가 없으면 안 보이기 때문에 헬로 월드 라는 글자를 넣어 주도록
하겠구요
게토 에서는 요녀석을
벨류 라는 변수에 받고 요녀석을 정보 창에 출력해 보도록 하겠습니다
코드를 자장을 하고
실행 해 주시게 되면 헬로 월드 라는 글자의 붉은색 스타일이 적용된 것을
확인할 수 있구요
제 터에서 요 값을 추출해서 rgb 255 점
0.0 을 출력하는 모습을 확인할 수 있습니다
따라서 위 녀석은 째 턱 5 아래 녀석은 개 터 라고 기억을 해 주시면
좋겠습니다
사실 여기에서 정말 중요한 게 있다면 요 아래 녀석은 지금
문자의 를 l 냈다는 것이 9 0 요 위에 녀석은 직접적으로 보이지
않지만 제이쿼리 객체를 리턴 에 따라 고 생각을 해 주시면 됩니다 따라서
css 의 메소드를 계속해서 연속적으로 활용할 수 있습니다
어쨌거나 이러한 체인형 관련 내용은 나중에 살펴 보도록 하겠 고용
계속해서 내용을 알아보도록 하겠습니다
일단 개 터는 요게 전부이고 용 센 터 같은 경우에는 값을 지정하는
방법에 크게 3가지가 있다고 생각을 해 주시면 됩니다
첫번째 방법은
문자열 콤마 문자 일로 지정하는 방법입니다
지금 위의 코드를 보시게 되면 바로 요녀석이 문자열 콤마 문자열로 지정한
녀석이라고 생각을 해 주시면 되겠습니다
두번째 방법은 객체를 지정 하는 건데요
예를 들어서
칼날을 지정을 한다.면
요러한 형태로 주정을 한다.는 의미입니다
객체를 사용하기 때문에 여러 개의 값을 지정할 수 있는데요
칼날을 위와 같이 내 들어주고 백그라운드로 칼날을
오렌지로 주거나 아니면
텍스트 온라인을 센터로 주거나 하는 등의 여러 가지 값을 한번에 넣는
것이 가능하게 됩니다
코드를 저장을 하고 실행해 보게 되면
뭐 경고 창은 생략하도록 하구요 글자 레 가운데 정렬해서 출력하는 모습
까치 확인할 수 있습니다
뭐 요게 좀 다른 색으로 입력을 해야 보이지 않는데
블루와 옐로우 로 입력을 하고 실행해 보도록 하겠습니다
실행하면 글자는 블루로 배경은 옐로우로 텍스 턴을 라인은 센터로 고정이
되는 모습을 볼 수 있는데요
이렇게 객체를 활용하게 되면 여러 값을 한꺼번에 입력할 수 있다라고
기억을 해 주시면 좋겠습니다
추가적으로 현재 키를 문자열 입력을 했는데요
이전에 우리가 그냥 자바스크립트에서 속성을 선택하는데 처럼 요녀석을
곧바로 식별자로 는 사용할 수 없습니다
따라서 이러한 것을 식별자로 입력을 하고 싶다면 요 짝대기 와 그 뒤에
있는 글자를 대문자로 입력을 해서 지금 화면과 같은 형태로 입력을 해야
한다.고 기억해 주시면 되겠습니다
그리고 마지막 방법은 위에서 값을 입력할 때 현재는 문자열을 입력 을
했는데요
함수로 값을 입력하는 방법 이라고 생각을 해 주시면 좋겠습니다
조금 이해가 되실 수 되지 않을 수 있는데요 간단하게
요 형태로 입력을 해 보도록 하겠습니다 유 형태로 입력을 했을 때 몰리
턴에서 레드 를 리턴하게 되면 색상이 붉은 색으로 리턴 되게 됩니다
한번 코드를 저장을 하고 실행해 보도록 하겠습니다
실행해보면 레드로 적용되는 모습을 확인할 수 있죠 그래서 이와 같이
함수의 리턴 값으로 값을 지정할 수 있다라고 기억을 해 주시면 좋겠습니다
사실 저게 무슨 의미냐 라고 생각하실 수 있는데요
h1 태그가 여러 개일 때 도 요 제이쿼리 함수는 여러 개의 태그를 모두
선택하게 됩니다
이때 각각의 매개변수로 인덱스가 들어오게 되는데요
요녀석이 0번째 2000 태그 니까 0번째 첫 번째 2000 태그 니까
첫번째 그리고 두번째 h1 태그 니까 두 번째라는 이라는 숫자가 들어오게
될 텐데요
이를 활용을 해서 예를 들어서
블레이드
블루 ong 라는 글자가 있을 때
저어 레이의 인덱스 번째를 이 턴을 하는 등의 여러가지 활용을 할 수
있게 됩니다
어쨌건 코드를 저장을 하고 실행하게 되면 3개가 모두 다른 색으로
들어가는 모습을 확인할 수 있습니다
이 방법은 제체 를 지정할 때도 마찬가지라고 할 수 있겠는데요
이렇게 개체를 입력을 했을 때도 이 객체의 값에 함수를 입력하게 되면
마찬가지의 효과가 발생 한다.고 생각을 해 주시면 되겠습니다
그래서 센터 로 지정을 할 때는 문자를 입력하는 방법
책 7을 입력하는 방법이 있으며 이때 값은 문자열이나 뭐 숫자 등을
그대로 입력할 수도 있지만 함수로 도 입력을 할 수 있다 라고 세터를
기억해 주시면 되겠습니다
사실 요 녀석을 c 라기보단 참고 라고 입력을 하는 게 조금 더 나을 것
같네요
어찌 관한 요렇게 두가지 게 터와 세터 그리고 세터 내부에서 문 지정
방법을 기억을 했다면 나머지도 쉽게 이해할 수 있을 것입니다
그럼 곧바로 attr 함수에 대해서 알아보도록 하겠는데요
hr 함수는
어트리뷰트 에 줄인 말이라고 할 수 있습니다 따라서 속성을 지정할 때
사용하는 녀석이라고 생각을 하면 되겠는데요
요녀석의 액션 태그 가 아니라 이미지 태그 로 변경을 해서 살펴보도록
하겠습니다
일단 이미지 태그 에서 가장 기본적인 3 탈 수 있는 속성은
소소 속성이 있겠죠 녀석을 http 에 o 플레이스 홀드 1 2 3
100 곱하기 100 이라고 지정을 해 보도록 하겠습니다
그리고 제 토 도 한번 사용해보도록 할게요
매개 변수를 하나 생략하면 되니까 agt 아래
소스라고 지정을 하면 되겠죠 녀석을 테스트에 넣고 출력을 해 보도록
하겠습니다
실행결과를 예측을 해 보시면 쉽게 예측할 수 있을 거라고 생각을 합니다
코드를 저장하고 실행하게 되면 플레이스 올드 점 이 백 곱하기 100을
출력하는 모습을 볼 수 있구요
이미지도 3개가 소수 속성이 들어가는 모습을 확인할 수 있습니다
요소 검사로 보시게 되면
요렇게 소스 속성이 들어간 모습을 볼 수 있죠
어쨌거나 이렇게 문자를 지정하는 방법도 사용할 수 있고
두번째로는 객체로 지정하는 방법도 다양 이니 사용할 수 있습니다
뭐 r2 속성을
테스트 이미지라고 주게 되면
대채 글자 알토 네이티브 글 차가 테스트 이미지 로 들어가게 되겠죠
코드를 저장하고 마찬가지의 방법으로 실행을 하게 되면 지금 화면과 같이
alt 알터 네이티브 속성이 들어간 모습을 확인할 수 있습니다 고 참고로
요 녀석도 당연히 함수로 지정할 수 있습니다
매 개 변 토론 인덱스를 받게 되고요 리턴 으로 뭐 예를 들어서 http
플레이스 올드 점 2 3
100 곱하기 플러스 인덱스 곱하기 100을 준다 기만
그러면 0 1 2 가 들어가서 처음에 0
그리고 백 그리고 202 들어가 겠는데요 플러스 이를 간단하게 해줘서
백과 200 그리고 302 들어가지만 들어보겠습니다
이러한 형태로 코드를 저장을 해 주시고
수행하게 되면 높이가 다른 세 개의 이미지가 쭉쭉 들어가는 모습을 확인할
수 있습니다
첫 번째 있는 녀석은 인덱스 + 1 곱하기 100 이니까 백 그리고
두번째 녀석은 200 세번째 녀석은 302 들어간 모습을 확인할 수
있습니다
그래서 attr 함수도 요러한 형태로 사용할 수 있다고 기억해 주시면
되겠습니다 부족으로 설명할 깜빡하고 넘어온 게 있는데요
개털 할 때 천재 h1 태그나 이미지 태그에 소 속성 컬러를 추출을
했는데 요 태그가 여러 개면 어떻게 되냐 라고 궁금 하실 수 있는데요
가장 첫 번째 있는 여성만 출력을 하게 됩니다
따라서 예를 들어서 현재 요 코드에서는 이미지의 소 속성을 출력한 이까
첫 번째 이미지의 소스 속 정만 출력하게 됩니다
한번 다시 코드 를 실행해서 살펴보게 되면 플레이스 올드 첨 잇 백
곱하기 100을 출력하는 모습을 볼 수 있는데요
요 백 곱하기 100 이라는 녀석은 바로 요 첫 번째 있는 녀석을 의미를
하게 됩니다 따라서 패턴은 일반적으로 첫 번째 있는 여성만 가져온다고
기억해 주시면 되겠습니다
그럼 계속해서 html 에 대해서 살펴보도록 하겠는데요
요번엔 이미 제 태그가 아니라 간단하게 h1 태그로 다시 변경해 보도록
하겠습니다
h1 태그를 만들었을 때 요 녀석에게 html 속성을 지정 을 하게 되면
참고적으로 움 위쪽에 우리가 css 함수로
저걸 지정을 했었으니까 h1 을 지정을 했었으니까
그냥 지정을 하면 그거랑 좀 충돌이 나서 안 보일 수 있으니까
h2 로 바꾸도록 할게요 어쨌거나 html 속성은 매개 변수를 하나만
지정을 하게 됩니다
뭐 헬로 월드 라고 입력을 하게 되면 모든 녀석이 값들이 헬로 월드 로
바뀌겠죠
그래서 코드를 실행하게 되면
헬로 월드 라고 출력되는 모습을 확인할 수 있습니다
그래서 따라서 요 녀석은 그냥 문자열을 지정하는 것 뿐이지 객체로
지정하는 것은 불가능 하다 라고 생각해주시면 되겠구요
개털 같은 경우에는
매개 변수를 하나 생각하면 되니까 h2 태그의 html 이라고 곧바로
입력을 해주시면 되겠습니다
이렇게 입력을 하고
실행을 하게 되면 헬로 월드 라는 첫 번째 녀석을 출력하게 되겠죠
코드를 저장을 하고 실행해 보게 되면
헬로 월드 라는 글자를 출력하는 모습을 확인할 수 있습니다
참고적으로 방금 언 디파인 드라고 나왔던 건 요 위쪽에 있는 그 인지
태그를 활용할 때 사용했던 6 입니다
어째거나 잠시 요 녀석들은 다 주석 처리를 해 주도록 하겠구요
요세 터도 두번째 방법 그러니까 참고 적인 방법으로
함수를 입력할 수도 있습니다 뭐 당연히 함선은
이전과 마찬가지로 인덱스를 매개변수로 받게 될 거고요
뭐 헬로우 할 때
플러스 인덱스 라고 입력을 해 주시게 되면 차례차례 에 헬로 월드 0
헬로 월드 1
헬로 월드 2 가 들어가게 될겁니다 코드를 저장을 하고 실행 해 주시게
되면 방금 설명했던 것과 마찬가지로 출력을 하게 되고요
결과를 보시게 되면 헬로 월드 0 이라는 녀석을 제 토해서 추출해서
출력을 해서 첫번째꺼 0번째 것만 출력을 했다는 것을 기억을 해 주시면
되겠습니다 참고적으로 이 html 이라는 녀석은 못 내부의 html
문자열이 있을때 태그 형식을 가진 문자열이 있을때 요녀석도 알아서 변환을
해 주게 됩니다
예를 들어서
요러한 형태로 ht le 태그 내부에 html5 글자 뿐만 아니라 태그
형태의 문자 일까지 삽입을 하게 된다면
코드를 저장하고 실행을 했을 때 내부적으로 이 html 이 들어가는
모습을 확인할 수 있습니다
만약에 이렇게 html 이 들어가는 것을 보기 싫다면
텍스트 라는 함수를 사용하게 됩니다 텍스트 함수 는 html 함수와 거의
비슷한 대형
요러한 형태로 입력을 해 주시게 되면 요 내부의 글자를 html 태그로
실행하는 게 아니라
그냥 글자로 넣어 주게 됩니다
어쨌건 이 텍스트 함수 는 굉장히 특이한 형태의 속성이 있는데요
이렇게 개 털을 사용을 할때 0번째 걸을 추출해서 출력하는 게 아니라
전부 추출을 하게 됩니다
코드를 실행하게 됐을 때 요렇게 전부 나오는 모습을 확인할 수 있는데요
텍스트 함수 많이 게 다르다고 기억을 해 주시면 좋겠습니다
이렇게 만든 이유는 이 녀석 같은 경우에는 사실 html 조작 보다
텍스트 분석을 할때 많이 쓰이기 때문에 요러한 형태로 만든 거라고 기억을
해 주시면 좋겠습니다 어쨌거나 엄청나게 많은 내용을 갑자기 한번에
살펴보았는데요
다시 한 번 정리해 보도록 하겠습니다
제이쿼리 는 문서 개체 를 조작할 때 4가지 함수를 사용할 수 있다
뭐 추가적으로 더 있는데 요 네 가지가 가장 기본적이 라고 생각을 해
주시면 되겠습니다
첫번째는 cs 쌈 수 두번째는 ht 아람 수
세번째는 html 네번째는 텍스트 라고 기억을 해 주시면 되겠구요
이녀석들은 세터 형태와 제 터 형태로 사용할 수 있다라고 기억을 해
주시면 좋겠고 제 털을 사용할 때는 일반적으로 가장 앞에 있는 녀석을
추천해서 출력을 하게 된다 라고 생각해주시면 좋겠습니다
참고적으로 가장 앞에 있는 녀석이 어느 녀석인 헷갈릴 수 있는데요
그래서 일반적으로 개 털을 사용할 때는 문서 객체 가 여러개 선택되는
상황을 피하는 경우가 많아요 분석 액체를 무조건 적으로 뭐 다양한 것들을
활용을 해서 뭐 h1 에
뭐 헬로우 클래스 달하는 등으로 더 세부적으로 선택을 해서
하나만 선택을 한 다음에 값을 추출하는 게 일반적입니다
어쨌거나 세터 같은 경우에는 문자 1 문제를 입력을 하거나 객체를
입력하는 방법이 있다
이때 각각의 값에 는 문자의 게 아니라 함수를 입력할 수도 있다라고
기억을 해 주시면 되겠습니다
조금 많이 알아봤는데요 어쨌거나 이번 강의의 내용은 다음 강의에서 다시
한번 더 정리를 하도록 하겠고
이번 강 의 내용에 대해서는 책에 있는 내용을 차근차근 읽어 보시면서
복습을 해 주시면 좋겠습니다
어쨌건 오늘 강의는 여기까지 되겠구요 다음 강의해 선 추가적인 별도의 문
속에 찌 활용 메서드 에 대해서 살펴보도록 하겠습니다
그럼 다음 강의에서 뵙겠습니다 감사합니다.