20200621

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
	$(function(){
		//$("*").css("background-color", "yellow");
		//$("p").css("background-color", "blue");
		//$("div").css("background-color", "green");
		$("#test1").css("color", "blue");
		$("#test2").css("color", "red");
		$(".test3").css("color", "orange");
	})
</script>
</head>
<body>
	<p id="test1">문자열1</p>
	<p class="test3">문자열2</p>
	<div id="test2">문자열3</div>
	<div class="test3">문자열4</div>
</body>

2. 기본 선택자 조합

선택자1, 선택자2 : 동시에 여러 태그를 선택할 때 사용
선택자1 > 선택자2 : 태그의 바로 하위의 태그들을 선택할
선택자1 선택자 2 : 태그 내부의 모든 태그들을 선택할 때 사용
선택자1.선택자2 : 모든 선택자를 만족하는 태그를 선택
선택자1 + 선택자2 : 선택자1 태그 바로 다음에 있는 선택자2 태그를 선택
선택자1 ~ 선택자2 : 선택자1 태그 다음에 있는 모든 선택자2 태그를 선택

3. 순서 필터 선택자

선택자를 통해 선택된 태그 중에 태그의 상태에 따라 선택할 수 있는 선택자
순서, 태그의 현재 상태 등

첫 번째 태그 선택

-:first : 선택자에 해당하는 태그 중 가장 처음 태그

-:first-child : 선택자에 해당하는 태그 중 각 영역별 첫 번째 태그가 선택. 처음 태그가 선택자에 해당하지 않으면 선택되지 않음.

-:first-of-type : 선택자에 해당하는 태그 중 각 영역별 처음 태그가 선택

마지막 태그 선택

:last : 선택자에 해당하는 태그 중 가장 마지막 태그가 선택
:last-child : 선택자에 해당하는 태그 중 각 영역별 마지막 태그가 선택. 마지막 태그가 선택자에 해당하지 않으면 선택되지 않음.
:last-of-type : 선택자에 해당하는 태그 중 각 영역별 마지막 태그가 선택

그 외 순서 필터 선택자

:odd : 인덱스 번호(0부터 시작)가 홀수인 태그 선택
:even : 인덱스 번호(1부터 시작)가 짝수인 태그 선택
:only-child : 영역내에서 선택자에 해당하는 태그가 하나일 경우 선택. 다른 태그가 있으면 선택되지 않음.
:only-of-type : 영역내에 선택자에 해당하는 태그가 하나일 경우 선택

4. 인덱스 필터 선택자

:ep(인덱스) : 인덱스(0부터 시작)번때 해당하는 태그를 선택
:nth-child(인덱스) : 각 영역의 인덱스(1부터 시작)번째 해당하는 태그를 선택. 인덱스번째 태그가 선택자에 해당하지 않으면 선택되지 않음.
:nth-of-type(인덱스) : 각 영역의 인덱스(1부터 시작)번째 해당하는 태그를 선택

인덱스 번째 태그 선택

:gt(인덱스) : 선택자에 해당하는 태그 중 인덱스(0부터 시작)번째 태그 이후의 태그들이 선택
:lt(인덱스) : 선택자에 해당하는 태그 중 인덱스(0부터 시작)번째 태그 이전의 태그들이 선택
:nth-last-child(인덱스) : 뒤에서 인덱스(1부터 시작)번째 태그가 선택. 인덱스번째 태그가 선택자와 다르면 선택되지 않음
:nth-last-of-type(인덱스) : 뒤에서 인덱스(1부터 시작)번째 태그가 선택
:not : 선택자에 해당하지 않는 태그들이 선택

5. 속성 선택자

태그에 설정되어 있는 속성을 통해 선택하는 선택자
[속성] : 속성을 가지고 있는 태그를 선택
[속성 = 값] : 속성의 값이 지정된 값과 일치하는 태그를 선택
[속성 != 값] : 속성의 값이 지정된 값과 일치하지 않는 태그를 선택

6. 상태 선택자

[속성 $= 값] : 속성의 값이 지정된 값으로 끝난느 태그를 선택
[속성 |= 값] : 속성의 값이 지정된 속성의 값과 일치하거나 지정된 속성으로 시작하고 하이픈으로 연결된 태그를 선택
[속성 ^= 값] : 속성의 값이 지정된 값으로 시작하는 태그를 선택
[속성 ~= 값] : 속성의 값이 지정된 값을 단어로 가지고 있는 태그를 선택
[속성 *= 값] : 속성의 값이 지정된 값을 포함하는 태그를 선택

태그의 상태에 따라 선택하는 선택자

:header : h1 ~ h6 태그를 선택
:focus : 현재 포커스가 주어진 태그를 선택
:contains('문자열') : 지정된 문자열이 포함되어 있는 태그를 선택
:has(선택자) : 지정된 선택자를 포함하고 태그를 선택

7. form 태그 선택자

form은 클라이언트에서 서버측으로 데이터를 전송하는데 사용되는 하나의 수단이다.

정확히 말하면 form 엘리먼트내에 있는 input박스라던지, radio 버튼, checkbox 등에 있는 데이터를 전송한다.

2) 학습내용 중 어려웠던 점

이번 수업을 하기 전에 서버 연결 문제를 어느정도 해결하고 진행되었기 때문에 대체적으로 무난했다.

3) 해결방법

이번 수업에 막히는 구간은 없었다. 어제 서버 문제는 해결되었기에 이후 진행에는 별 다른 문제가 없었다.

4) 학습소감

이번 수업은 jQuery에 사용되는 문구를 이용하는 방법을 통해 수업을 했다.

내가 스프링을 독학하는 것이 결과적으로 도움이 되어서 이번 수업을 진행하는 데 많은 무리가 없었다.

jungkwanlee

coding

이전 포스트

20220620

다음 포스트

20200621

코딩일지

1) 학습한 내용

jQuery 선택자

Ready 함수

1. 기본 선택자