it개발자스터디공간

웹표준 html,css,javascript 실무 과정 자료] :nth-of-type()

웹표준 html,css,javascript 실무 과정 자료] :nth-of-type()

실무개발자를위한 실무교육 전문교육센터학원

www.oraclejava.co.kr에 오시면 보다 다양한 강좌를 보실 수 있습니다.

:nth-of-type()

■ 동일한 부모 요소 안에서 n번째 자식 요소마다 스타일 적용

■ 다른 종류의 형제 요소가 있는 경우에도 ‘요소명’에 해당하는 요소만을 셈

■ img:nth-of-type(2n+1) { float: right; }

■ img:nth-of-type(2n) { float: left; }

   ☞ 동일한 부모 요소 안에 있는 img 요소만을 세어 홀수번째는 오른쪽, 짝수 번째 img요소는 왼쪽으로 배치

웹표준 html,css,javascript 실무 과정 자료] :nth-last-child()

웹표준 html,css,javascript 실무 과정 자료] :nth-last-child()

실무개발자를위한 실무교육 전문교육센터학원

www.oraclejava.co.kr에 오시면 보다 다양한 강좌를 보실 수 있습니다.

:nth-last-child()

■ 동일한 부모 요소 안에서 뒤에서 n번째 자식 요소마다 스타일 적용

■ 나머지는 nth-child() 와 같음

웹표준 html,css,javascript 실무 과정 자료] :nth-child()

웹표준 html,css,javascript 실무 과정 자료] :nth-child()

실무개발자를위한 실무교육 전문교육센터학원

www.oraclejava.co.kr에 오시면 보다 다양한 강좌를 보실 수 있습니다.

:nth-child()

■ 동일한 부모 요소 안에서 n번째 자식 요소마다 스타일 적용

■ ()안의 인수의 종류

1. an + b 식

   n은 0이상의 정수, a와 b는 임의의 정수

   2n + 1 ＝odd ☞ 홀수

   2n ＝ even ☞  짝수

2.odd  ☞ 홀수

3.even ☞ 짝수

■ tr:nth-child(2n+1) {

   backgroundColor: #9999ff;

   }

웹표준 html,css,javascript 실무 과정 자료] :checked &  :root 

웹표준 html,css,javascript 실무 과정 자료] :checked &  :root 

실무개발자를위한 실무교육 전문교육센터학원

www.oraclejava.co.kr에 오시면 보다 다양한 강좌를 보실 수 있습니다.

:checked &  :root 

:checked  

- 라디오 버튼이나 체크 상자가 선택된 상태일 때 스타일 적용

:root 

- 문서 안의 루트 요소에 스타일 적용. 

- HTML문서에서는 html 요소

웹표준 html,css,javascript 실무 과정 자료] :enabled  :disabled

웹표준 html,css,javascript 실무 과정 자료] :enabled  :disabled

실무개발자를위한 실무교육 전문교육센터학원

www.oraclejava.co.kr에 오시면 보다 다양한 강좌를 보실 수 있습니다.

:enabled  :disabled

웹표준 html,css,javascript 실무 과정 자료] :lang

웹표준 html,css,javascript 실무 과정 자료] :lang

실무개발자를위한 실무교육 전문교육센터학원

www.oraclejava.co.kr에 오시면 보다 다양한 강좌를 보실 수 있습니다.

:lang

■ lang 속성값이 지정된 언어 코드로 시작되는 요소에 스타일 적용

*:lang(en) {

font-family: Vedana, Arial, sans-serif;

}

웹표준 html,css,javascript 실무 과정 자료] :target

웹표준 html,css,javascript 실무 과정 자료] :target

실무개발자를위한 실무교육 전문교육센터학원

www.oraclejava.co.kr에 오시면 보다 다양한 강좌를 보실 수 있습니다.

:target

■‘#이름’으로 특정 위치로 이동하는 링크를 설정할 경우, 해당 링크가 액티브 상태가 되었을 경우 이동처가 되는 요소에 스타일 적용

 p:target {

border: 1px dotted blue;

}

웹표준 html,css,javascript 실무 과정 자료] :hover  :active  :focus

웹표준 html,css,javascript 실무 과정 자료] :hover  :active  :focus

실무개발자를위한 실무교육 전문교육센터학원

www.oraclejava.co.kr에 오시면 보다 다양한 강좌를 보실 수 있습니다.

:hover  :active  :focus

■요소명 :hover  요소에 마우스 커서 등 포인팅 디바이스를 올려 놓았을 때 (아직 액티브 상태는 아님) 스타일 적용

■ 요소명 :active  요소를 선택했을 때(클릭했을 때) 스타일 적용

■ 요소명 :focus 요소에 포커스를 이동했을 때 스타일 적용