6개월 대장정 (97) 썸네일형 리스트형 46일차 - [JQ] HTML(CSS Classes), Traversing 안녕하세요. pitang입니다. jQuery HTML의 CSS Classes와 Traversing을 알아보겠습니다. jQuery - HTML(CSS Classes) jQuery에는 CSS 조작을 위한 여러 가지 방법이 있다. addClass() - 하나 이상의 클래스를 선택한 요소에 추가 removeClass() - 선택한 요소에서 하나 이상의 클래스를 제거 toggleClaass() - 선택한 요소에서 클래스 추가/제거 간에 전환 css() - 스타일 특성을 설정하거나 반환 예시를 살펴보겠다. addClass() ex1) removeClass() ex1) toggleClass() ex1) -> 두 번째, 세 번째, 네 번째 h1 요소를 클릭해서 .dark css요소가 추가된 것을 볼 수 있다. 다시 클.. 46일차 - [JQ] HTML(add, remove) 안녕하세요. pitang입니다. jQuery HTML의 Add와 Remove를 알아보겠습니다. jQuery - HTML(Add) HTML content를 추가하는 메서드 네 가지가 있다. append() - 선택한 요소의 끝에 내용 삽입 prepend() - 선택한 요소의 시작 부분에 내용 삽입 after() - 선택한 요소 뒤에 내용 삽입 before() - 선택한 요소 앞에 내용 삽입 예시를 살펴보면 더욱이 이해가 갈 것이다. append() ex1) ex2) ex3) prepend() ex1) ex2) after() ex1) -> after, append, li.after 버튼을 클릭한 순으로 이미지가 나열되어 있다. jQuery - HTML(remove) HTML elements, content를.. 45일차 - [JQ] HTML(get, set) 안녕하세요. pitang입니다. 45일차 저번 게시글에 이어! jQuery HTML 중 get, set에 대해 알아보겠습니다. jQuery-HTML(get) get은 쉽게 내용을 가져오는 것이다. html() - 선택한 요소의 내용을 설정하거나 반환한다. text() - 선택한 요소의 텍스트 내용을 설정하거나 반환한다. val() - 폼 필드 값을 설정하거나 반환한다. ex1) html() ex2) text() ex3) val() jQuery 라이브러리를 사용해서 문서 객체 속성을 조작할 때는 attr() 메서드를 사용한다. attr() - 매개변수를 넣는 방법에 따라 속성을 지정하거나 추출할 수 있다. 문서 객체의 속성을 조작한다. attr() 매서드에 매개변수를 하나 입력하면 해당 속성을 추출한다. .. 45일차 - [JQ] effect 안녕하세요. pitang입니다. 오늘은 jQuery의 effect와 html의 get-set에 대해 알아보겠습니다. jQuery-effect jQuery라이브러리는 문서 객체를 보이거나 보이지 않게 만드는 간단한 효과 메서드를 제공한다. 간단한 효과 메서드에는 속도를 매개변수로 입력할 수 있고, 입력하지 않으면 기본 값인 500ms가 적용된다. hide() / show() - 숨기기 / 표시 toggle() - 표시된 요소가 숨겨지고 숨겨진 요소가 표시 ex1) hide() ex2) show() ex3) toggle() ex4) hide() show() toggle() -> 효과를 사진으로 보여주긴 어렵지만, 코드를 작성해 출력해보면 효과가 적용된 것을 볼 수 있다. fadeIn() - fade 되면서 .. 44일차 - [JQ] 기초문법, event 안녕하세요. pitang입니다. 저번 게시물로 자바스크립트를 마무리하고 제이쿼리 jQuery를 알아보겠습니다. jQuery의 기초와 event들을 먼저 알아보도록 하겠습니다. JQUERY 기초 jQuery 라이브러리는 모든 웹 브라우저에서 동작하는 클라이언트용 자바스크립트 라이브러리이다. jQuery는 무료로 사용 가능한 오픈 소스 라이브러리이며, 사용 목적은 다음과 같다. - 쉬운 문서 객체 모델과 관련한 처리 구현 - 쉽고 일관된 이벤트 연결 구현 - 쉬운 시각적 효과 구현 - 쉬운 Ajax 응용 프로그램 개발 ex1) - 아래의 외부 js 파일을 html 파일에서 사용하는 방법은 다음과 같다. CDN은 jQuery를 비롯해 구글, 마이크로소프트 등에서도 제공한다. CDN은 파일을 여러 서버에 분산시.. 44일차 - [JS] string, object 안녕하세요. pitang입니다. 자바스크립트에서 string과 object에 대해 알아보겠습니다. string 자바스크립트에서 string을 쓰는 방법은 자바와 다르다. 전 게시물에서 따옴표에 대해 알아본 적이 있을 것이다. "" 큰따옴표를 사용했으면 '' 작은따옴표를 사용해야 한다. "" 큰따옴표 안에 또 큰따옴표를 사용하고 싶으면 \를 앞에 적어 사용해야 한다. "" 큰따옴표를 사용하고 줄을 바꿔서도 사용하고 내용을 적고 싶다면, "" 마무리하고 + 로 계속 문장을 적어 나가면 된다. 더 간단하게는 \ 표현으로 큰따옴표를 마치지 않고 줄을 바꾸고 계속 사용하면 된다. 다른 간단한 방법으로는 ` 기호를 사용하는 방법이 있다. 키보드에 보면 ` 가 있을 것이다. 없다면, ₩ 모양이 있는 키보드를 누르면 .. 43일차 - [JS] 이벤트처리 안녕하세요. pitang입니다. 이벤트 이벤트는 키보드를 누르거나 마우스를 클릭하는 것처럼 어떤 현상이 프로그램에 영향을 미치는 것을 의미한다. 이벤트는 사용자가 직접 발생시킬 수도 있고 응용 프로그램에서 자체적으로 발생시킬 수도 있다. 자바스크립트는 다음 이벤트를 기본으로 지원한다. - 마우스 이벤트 - 키보드 이벤트 - HTML 프레임 이벤트 - HTML 입력 양식 이벤트 - 사용자 인터페이스 이벤트 - 구조 변화 이벤트 - 터치 이벤트 onclick - 클릭 dblclick - 더블클릭 onmouseover - 마우스가 올라감 onmouseout - 마우스가 떠남 onkeyup - 키보드에서 손이 떨어짐 문서 객체에 이벤트를 연결하는 방식을 이벤트 모델이라고 한다. 인라인 이벤트 모델과 고전 이벤트.. 43일차 - [JS] 반복문(2), break, continue 안녕하세요. pitang입니다. 이중 for문과, while문 그리고 break, continue까지 알아보겠습니다. 이중 for문 중첩반복문에 해당한다. 자바에서 살펴본 문법과 비슷하므로 바로 예제로 살펴보겠다. ex1) ex2) while문 while 반복문은 가장 기본적인 반복문이다. if 조건문과 형식이 비슷하지만, if 조건문과 달리 불 표현식이 참이면 중괄호 안 문장을 계속 실행한다. while문의 사용방법은 아래와 같다. while ( 조건 ) { 문장 } ex1) ex2) ex3) ex4) break문 break문은 가장 가까운 반복문을 빠져나온다. ex1) continue문 continue문은 부합하는 조건을 건너띄고 반복문을 계속 실행한다. ex1) ex2) 감사합니다. *m1 맥북을 .. 이전 1 2 3 4 5 6 7 8 ··· 13 다음
