Skip to content

02_CSS.md

Latest commit

 

History

History
46 lines (38 loc) · 2.61 KB

02_CSS.md

File metadata and controls

46 lines (38 loc) · 2.61 KB

CSS 선택자(selector) 및 선언 방법

  • CSS 선택자(selector) 구성 및 설정
    • 『*』공용 선택자, 전체 선택자
      • 모든 엘리먼트를 선택한다.
    • 『E』 엘리먼트 선택자, 태그 선택자, 타입 선택자 -> h1 p div ...
      • 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』 는 버튼 위에 마우스 커서가 머물게 되는 특정 상황에서만 선택이 이루어지게 된다.
      • ex) 선택자:hover (반응선택자), 선택자:checked (상태선택자), 선택자:first-child (구조선택자)

CSS 선언 방법

  • 외부 선언(External Linked Style)

    • HTML Document 외부에 별도의 CSS 파일을 생성하여 내용을 구성한다.
    • 확장자 : .css
    • 이 CSS를 적용할 문서에는 『』 를 활용하여 외부의 CSS를 해당 문서에 적용할 수 있도록 처리한다.

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

      HTML Document 내부에
 『<style type="text/CSS">
    선택자 { 적용할 스타일 내용 }
  </style>』

과 같이 기술하여 스타일을 적용시키도록 처리한다.

  • 엘리먼트에 직접 선언(Direct, Inline Style)

    • 스타일을 적용할 태그(엘리먼트)에 직접 『style="적용할 스타일 내용"』 형식으로 기술하여 처리한다.
    • 대상에 직접 적용하는 방식이기 때문에 선택자는 별도로 기술하지 않는다.