it개발자스터디공간

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

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

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

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

only

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

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

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

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

:first-of-type

■ 지정한 요소가 부모 요소 안에서 맨 처음 자식 요소에 스타일 적용

■ 다른 종류의 형제 요소가 앞에 있는 경우에도 ‘요소명’에 지정한 요소를 대상으로 함.

 *nth-of-type(1) 과 같음

p:first-of-type {

color: blue;

text-style: italic;

}

  ☞ 동일한 부모 요소 안에서 맨 처음 나타나는 p요소에 대해서만 스타일이 적용

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

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

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

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

:first-child  :last-child

■ 요소명 :first-child   지정한 요소가 부모 요소 안에서 맨 처음 자식 요소인 경우 스타일 적용

   * :nth-child(1) 과 같음

■ 요소명 :last-child   지정한 요소가 부모 요소 안에서 맨 마지막 자식 요소인 경우 스타일 적용

   *nth-last-child(1) 과 같음

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

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

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

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

:nth-last-of-type()

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

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

■ 나머지는 nth-of-type()과 동일

웹표준 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 요소