it개발자스터디공간

웹표준 html,css,javascript 실무 과정 자료] drag and drop

웹표준 html,css,javascript 실무 과정 자료] drag and drop

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

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

drag and drop

■ HTML문서 내의 컨텐츠를 드래그 앤 드롭할 수 있는 방법

■ 이전에는 img, a 요소만 가능했지만, HTML5에서는 모든 요소에 드래그가 가능. 

  -  draggable 속성 붙임

ex) <li draggable=“true” id=“item1”>항목1</li>

웹표준 html,css,javascript 실무 과정 자료] 유사 요소

웹표준 html,css,javascript 실무 과정 자료] 유사 요소

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

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

유사 요소

■ 유사 요소

- HTML 요소로 지정할 수 없는 성질에 스타일을 적용하기 위한 것

- 콜론 두 개 :: 붙임

■ 유사 요소 :: first-line

 - 지정한 요소의 맨 첫 줄에 스타일을 적용

■ 유사 요소 ::first-letter

 - 지정한 요소의 맨 첫 문자에 스타일을 적용

■ 유사 요소  ::before  ::after

 - 요소의 직전(::before), 직후(::after)에 생성/추가되는 내용에 스타일을 적용.

 - content 프로퍼티와 함께 사용

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

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

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

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

:not()

■ () 안에 지정된 선택자와 일치하지 않는 요소에 스타일을 적용

p:not(.sample) {

color: navy;

}

☞ ‘class=“sample”’ 이 지정되지 않은 p요소에 스타일을 적용

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

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

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

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

:empty

■ 자식 요소나 요소 내용을 갖지 않는 요소에 스타일 적용

td:empty {

background: gray;

}

☞ 셀의 내용이 공백 <td></td>인 경우 스타일이 적용

웹표준 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()과 동일