본문 바로가기

포돌이

jQuery(속성 조작 메소드) 여러분 안녕하세요 19살 IT 개발자 포돌이입니다. 지난 시간에는 jQuery(탐색 선택자 2)를 알려드리면서 탐색 선택자를 마무리했습니다. 오늘은 jQuery(속성 조작 메소드)을 공부해보려고 합니다. 그럼 긴말 없이 들어가 보도록 하겠습니다. 가시죠! 객체 조작 메소드 객체를 생성, 복제, 삭제, 속성 변환하는 객체 조작 메소드에 대해 알아보겠습니다. 객체 조작 메서드는 속성 조작 메소드와 수치 조작 메소드 그리고 객체 편집 메소드로 나눌 수 있습니다. 속성 조작 메서드는 요소의 속성을 바꿀 때 사용하고, 수치 조작 메소드는 요소의 너비값 또는 높이값 같은 수치를 바꿀 때 사용합니다. 이 두 메서드는 선택한 요소의 속성을 바꾸는 메소드이므로 성격이 바슷하다고 볼 수 있습니다. 그리고 객체 편집 메소드.. 더보기
jQuery(탐색 선택자 2) 여러분 안녕하세요~ 19살 IT 개발자 포돌이입니다. 지난 시간에는 jQuery(탐색 선택자 1)를 배우면서 다양한 선택자를 알아가는 시간을 가지셨을 겁니다. 그리고 오늘도 마찬가지로 새로운 선택자를 배우게 될 거고 탐색 선택자를 마무리하는 시간을 가지려고 합니다. 그리고 댓글을 써주신 분들 너무 감사하게 생각합니다 솔직히 많이 힘들었어요.. 글을 작성하면서 어떻게 해야 사람들이 내 글을 쉽게 읽을 수 있을지.. 정말 고민 많이 했고 밤샘 작업도 해서 몸이 많이 지쳐있는 상태였습니다. 그런데 제 글에 댓글을 적어주신 분들을 읽고 힘이 되었습니다 그래서 더 열심히 작업을 하는 것 같고 그래서 더 세밀하게 하는 것 같아요 지금 몸 상태가 말이 아니지만 글 하나하나 최선을 다해서 적도록 노력하는 포돌이가 되겠.. 더보기
jQuery(탐색 선택자 1) 안녕하세요 19살 IT 개발자 포돌이입니다. 지난 시간에는 jQuery(인접 관계 선택자)에 대해서 알아보았습니다. 오늘은 jQuery(탐색 선택자 1)을 나가려고 합니다. 자 그러면 시작해보겠습니다. 제이쿼리 탐색 선택자 탐색 선택자 탐색 선택자를 사용하면 기본 선택자로 선택한 요소 중 원하는 요소를 한 번 더 탐색해서 좀 더 정확하게 선택할 수 있습니다. 대표적인 탐색 선택자에는 배열의 인덱스(index)를 사용해 선택하는 "위치 탐색 선택자"와 배열에 담겨진 요소중 지정된 속성과 값으로 선택하는 "속성 탐색 선택자"가 있습니다 위치 탐색 선택자 기본 선택자로 선택한 요소는 배열에 담깁니다. 이때 배열의 인덱스를 사용하면 특정 요소를 좀 더 정확하게 선택할 수 있습니다. first/last 선택자 f.. 더보기
jQuery(인접 관계 선택자) 안녕하세요 19살 IT 개발자 포돌이입니다. 지난 시간에는 jQuery(직접 선택자)의 직접 선택자를 공부했었는데요 오늘은 인접 관계 선택자를 한번 공부해보려고 합니다. 그럼 한번 들어가시죠~ 인접 관계 선택자 jQuery(선택자 1)에도 있지만 한번 더 복습하는 겸 다시 올렸습니다. 차례대로 기본형과 예제를 적으며 나아가도록 하겠습니다. 부모 요소 선택자 부모 요소 선택자는 선택한 요소를 감싸고 있는 부모 요소를 선택합니다. 기본형은 다음과 같습니다. 기본형 $("요소 선택").parent(); 코딩해보기 다음은 문단 태그 영역의 부모 요소 선택자를 적용한 예제입니다. 하위 요소 선택자 하위 요소 선택자는 선택한 요소로 선택한 하위 요소만 선택합니다. 기본형 $("기준 요소 선택 1 요소 선택 2") .. 더보기
jQuery(직접 선택자) 안녕하세요 19살 IT 개발자 포돌이라고 합니다. 지난번에는 jQuery에 대해 간단한 설명과 다운로드 방법을 알려드렸습니다 오늘은 jQuery(직접 선택자)에 대해서 알려드리도록 하겠습니다. 그럼 시작해볼까요? * 설명할 때는 jQuery와 제이쿼리 두 가지 방식으로 표기하겠습니다. 선택자 선택자는 HTML 요소를 선택하여 가져옵니다. 제이쿼리 선택자는 CSS 선택자와 마찬가지로 선택한 요소의 디자인 속성을 적용할 때 사용할 수 있습니다. 이때 HTML에서 작성한 스타일(CSS)은 '정적이다'라고 표현합니다. 하지만 제이쿼리 선택자를 사용하면 "동적"으로 스타일을 적용할 수 있습니다. 선택자를 좀 더 정확하고 깊이있게 공부하려면 문서 객체 모델에 대해 알아두는 것이 좋을 겁니다~^^ 문서 객체 모델(D.. 더보기
Javascript 기초(함수2) <완결> 안녕하세요 19살 IT 개발자 포돌이입니다. 지난번에 Javascript 기초(함수 1)를 배웠습니다. 오늘은 Javascript 기초(함수 2)를 배우면서 함수를 마치려고 합니다. 완결인 만큼 마지막까지 최선을 다해주세요~ 그럼 시작하도록 하겠습니다. 함수 스코프 개념 이해 함수 스코프란 스코프(scope)의 사전적 의미는 "범위"이며, 여기에서는 변수 또는 함수의 유효 범위를 가리킵니다. 스코프를 이해하기 위해 지역 변수(Local Variables)와 전역 변수(Global Variables)의 개념과 차이를 먼저 살펴보겠습니다. 전역 변수와 지역 변수의 개념과 차이 전역 변수는 자바스크립트 어디에서든 사용할 수 있는 변수이고 지역 변수는 함수 스코프에서만 사용할 수 있는 변수입니다. 다음은 전역 .. 더보기
Javascript 기초(함수1) 안녕하세요 19살 IT 개발자 포돌이입니다. 지난 시간에는 어렵고 복잡한 Javascript 기초(객체2)를 마무리하면서 객체 전체를 배웠습니다. 오늘은 Javascript의 심장 이라고 할 수 있는 함수를 배워보려고 합니다. 근데 제가 함수에 대해서 간단하게 말하자면 함수를 못하면 Javascript를 모르는 거랑 마찬가지예요.. 지금 까지 배웠던 것들 중에서 가장 중요한 부분입니다. 물론 다 중요합니다. 뭐가 좋다 뭐가 더 중요하다는 건 없습니다. 하지만 함수를 모르면 여태껏 공부한 것들이 제대로 발휘하지 못하게 됩니다. 그러기 때문에 함수는 못하는 건 좋아요 근데 모르는 건 안됩니다. 자 이만 끝내고 본격적으로 함수에 대해서 알려드리도록 하겠습니다. 함수 우리는 Javascript 기초(변수) 부분.. 더보기
Javascript 기초(객체2) 안녕하세요 19살 IT 개발자 포돌이입니다. 저번 시간에는 Javascript 기초(객체 1)의 내장 객체에 대해서 자세하게 배웠습니다. 이번에는 BOM(브라우저 객체모델)를 나가보도록 하겠습니다. 브라우저 객체 모델(BOM) 브라우저 객체란 브라우저에 내장된 객체를 "브라우저 객체"라고 합니다. window는 브라우저 객체의 최상위 객체이며, window 객체에는 하위 객체가 포함되어 있지 않습니다. 즉, 계층적 구조로 이루어져 있으며, 이를 브라우저 객체모델(BOM, Browser Object Model)이라고 합니다. window 객체 window는 브라우저 객체의 최상위 객체이며, 다음과 같은 메소드를 사용할 수 있습니다. window 객체의 메소드 종류 종류 open("URL", "새 창 이름".. 더보기

티스토리툴바