웹어플리케이션_Chapter01_개요

백엔드를 희망하는 사람도 어느정도의 프론트엔드 지식이 필요하다.

그렇기에 이번 카테고리는 웹 어플리케이션 시작품을 개발하는 것을 목표로한다.

그렇기에 웹퍼블리싱, 마크업 랭기지(HTML/ CSS) 및 UI 디자인 도구(Figma)와 JS기본 문법을 어느정도 알고 있어야한다.

 

1. JQuery(JavaScript Library)

• 자바스크립트를 더 편하게 사용할 수 있도록 만들어주는 라이브러리
• 브라우저의 호환성 지원, 애니메이션, 데이터 전송 등의 기능 포함

사용법

jQuery를 사용하기 위해서는 jQuery를 불러와야 하는데 2가지 방법이 존재한다.

• 다운로드방식
  • jQuery라이브러리를 다운로드하고 필요한 곳에 직접 파일을 넣어 Import하는 방식
  • https://jquery.com/download/

Download jQuery | jQuery

• CDN 방식
  • CDN : 컨텐츠 전송 네트워크로 데이터 사용량이 많은 애플리케이션의 웹 페이지로드 속도를 높이는 상호 연결된 네트워크이다.
  • 대부분의 최근 라이브러리는 CDN을 활용하여 배포한다. 단, 실행 시 인터넷에 꼭 연결되어 있어야 한다.

 

2. 선택자(Selector)

코드 기본 구조는 다음과 같다.

<!--jQuery문-->
$('p').css('color','red');

<!--css-->
p{
	color:red;
}

ID와 Class

<h1 id="myTitle" class="my-title">제이쿼리 선택자</h1>

• Id : 유일한 속성을 지정할 때 사용한다.
  • 중복될 경우 마지막 개체만 인식하므로 사용에 주의한다.
• class(구분, 특징)
  • 비슷한 형식을 지정할 때 사용한다.
  • 주로 스타일링을 위해 사용하며 CSS 구현 시에 주로 사용한다.

기본 선택자 종류

표기법	선택자	설명
$('*')	전체 선택자	모든 객체를 선택
$('h1')	요소 선택자	요소명(태그)와 일치하는 객체들을 선택
$('#myTItle')	아이디 선택자	id 속성에 지정한 값을 가진 객체를 선택
$('.my-title')	클래스 선택자	class 속성에 지정한 값을 가진 객체들을 선택
$('h1.my-title')	종속 선택자	특정 요소 중 지정한 id또는 class를 가진 객체를 선택
$('h1, p, div, ...')	그룹 선택자	지정된 객체를 한번에 선택(콤마로 구분)

 

기본 선택자

부모/자식

상위/하위

동위

탐색선택자

위치 탐색

속성 탐색

 

콘텐츠 탐색

Find/ Filter

 

3. 내용 변경(Text/HTML)

Text / HTML 변경

Each 메서드

Each 메서드의 결과는 배열 형식으로 출력된다.

이를 이용하여 각 객체별로 기능을 수행하게 할 수 있다.

4.CSS 변경

스타일 속성 변경

만약 p라는 요소의 글자 색을 빨간색으로 바꾸기 위해서는 다음과 같이 사용한다.

//css방식
p{
    color: red;
}

//jQuery방식
$('p').css('color','red');

클래스 조작

종류	표기법	설명
추가	$('#item').addClass('selected');	점(.)을 찍지 않도록 주의  #item 객체에 .selected 클래스가 추가된다.
삭제	$('#item').removeClass('selected');	#item 객체의 selected 클래스를 제거한다.
토글	$('#item').toggleClass('selected');	해당 클래스가 지정되어 있으면 삭제하고, 없으면 추가한다.
판단	$('#item').hasClass('selected');	클래스가 포함되어 있는지 판단한다.

 

문제

선택자 종류

표기법	선택자
$('*')	전체 선택자
$('요소')	요소 선택자
$('.class')	클래스 선택자
$('#id')	아이디 선택자
$('요소.class || #id')	종속 선택자
$('요소1, 요소2')	그룹 선택자

 

부모 요소를 선택하기 위해서는 어떤 명령어를 사용하는가?

$('자식 요소').parent()

 

바로 하위 자식요소만 선택하려면 어떤 명령어들이 있는가?

$('부모요소 > 자식요소')

$('부모 요소').children('자식 요소')

 

상위 요소를 선택하려면 어떤 명령어를 사용하는가?

$('자식 요소').parents()

 

하위 요소를 선택하려면 어떤 명령어를 사용하는가?

$('부모 요소 자식 요소')

 

전체 형제 요소를 선택하려면 어떤 명령어를 사용하는가?

$('선택 요소').siblings

 

자식 요소중 홀수번째만 선택하려면 어떤 명령어들이 있는가?

$('부모 요소 : even')

$('부모 요소:nth-children(2n-1)')

 

리스트 중에 3번째 요소만 선택하려면 어떤 명령어를 사용해야 하는가?

$('부모 요소 : eq(2)')

$('부모 요소').eq(2)

$('부모 요소:nth-children(3)')

 

요소 중 선택한 속성을 포함하는 객체를 선택하기 위해선 어떤 명령어를 사용하는가?

$('요소[속성]')

 

요소 중 속성에 값이 포함되는 객체를 선택하기 위해선 어떤 명령어를 사용하는가?

$('요소[속성 *= 값]')

 

대상 객체의 하위 객체 중 조건을 만족하는 요소를 선택하기 위해선 어떤 명령어들이  있는가?

$('부모요소 조건')

$('부모 요소').find('조건')

 

대상 객체 중 조건을 만족하는 요소를 선택하기 위해선 어떤 명령어들이 있는가?

$('요소').filter('조건') 

$('요소조건')

 

선택된 요소들을 각각 변경시키기 위해서는 어떤 명령어를 사용하는가?

$('요소').each(function (index,item) { }); 

 

클래스 조작.

종류	표기법
추가	$('객체').addClass(클래스명)
삭제	$('객체').remove(클래스명)
토글	$('객체').toglle(클래스 명)
판단	$('객체').hasClass(클래스 명)