○ CSS 선택자 구성 및 설정 & 선언 방법

CSS 선택자 구성 및 설정

    - 『*』 공용 선택자

       모든 엘리먼트를 선택한다.

    - 『E』 엘리먼트 선택자, 태그 선택자, 타입 선택자

       E 엘리먼트를 선택한다.

    - 『.』 클래스 선택자

       html 에서만 사용할 수 있으며, 예를 들어 『div.warning』 은

       warning 이라는 클래스를 가지고 있는 div 엘리먼트를 선택하게 된다.

    - 『#』 아이디 선택자

       예를 들어 『#myId』는 myId 를 아이디로 사용하는 엘리먼트를 선택하게 된다.

    - 『E>F』 자식 선택자

       E 엘리먼트의 자식 엘리먼트인 F 엘리먼트를 선택하게 된다.

    - 『E F』 자손 선택자, 하위 선택자

       E 엘리먼트의 하위에 있는 F 엘리먼트를 선택하게 된다.

       이 경우 특이한 점은 E 와 F 사이에 다른 엘리먼트가 포함되어 있더라도

       선택 대상에 해당한다는 것이다.

    - 『E+F』 인접 선택자, 형제 선택자

       E 와 F 가 서로 상하위 관계가 아닌 인접해 있는 형제 관계인 경우 선택하게 된다.

    - 『E:action』 동적 선택자, 가상 선택자

       사용자 액션이 적용되는 상황에 따라 선택하게 된다.

       예를 들어 『button:HOVER』 는 버튼 위에 마우스 커서가 머물게 되는 경우 선택하게 된다.

CSS 선언 방법

    - 외부 선언 (External)

      HTML Document 외부에 별도의 CSS 파일을 생성하여 내용을 구성한다. 『확장자 : *.css』

      이 CSS 를 적용할 문서에서는 『<link rel="stylesheet" href="css파일경로">』

      외부의 CSS 를 해당 문서에 적용할 수 있도록 한다.

※ <style type="text/css">

      @import url("Css/classFimport.css")

   </style>

    - 문서 안에 포함하여 선언 (Embedded)

      HTML Doument 내부에

      『 <style type="text/css">

            // 선택자 { 적용내용 }

         </style>                   』

      과 같이 기술하여 스타일은 적용시킨다.

    - 엘리먼트에 직접 선언 (Direct)

      스타일을 적용할 태그(엘리먼트)에 직접 『style = "적용내용"』 형식으로 기술하여 처리한다.