본문 바로가기

프로그램 이론/CSS

[CSS]자유롭고 창의적인 디자인 기법(CSS) - 2

1. CSS 선택자

  1-1. Type 선택자

  1-2. 전체 선택자


1-3. class와 id 선택자


  1-4. 속성(attribuet) 선택자


  1-5. 가상 요소와 가상 클래스


  1-6. 선택자 조합

  1-7. 하위 선택자

  1-8. 자식 선택자

  1-9. 인접 형제 선택자


  1-10. 선택자 그룹화

2. CSS 개념 및 단위

  - 상속

    - 하위 요소가 상위 요소의 사용값을 물려 받느냐 아니냐를 타나내는 것

    - 이러한 값의 상속은 상속되는 것이 있고 안되는 것이 있음

    - 값이 자동으로 자식 요소에 상속되지 않는 경우 inherit 키워드를 이용하여 강제로 상속시킬 수 있음

    - 상속된 스타일을 재정의하고 싶다면 원하는 선택자에게 적용을 원하는 스타일을 정의


  - 겹침(Cascading)

    - 우선순위

     - 스타일의 충돌 : 두 개 이상의 규칙이 동일한 한 개의 요소에 적용

     - 스타일의 우선순위 결정 규칙 : 가장 마지막에 지정된 스타일을 우선적으로 적용


  - 특정도(Specificity)

  - CSS 주석

   - 작성자의 관리와 편의를 위한 찾아보기나 메모

   - "/*" 와 "*/" 사용. 주석으로 작성한 내용은 스타일에 영향을 미치지 않음

   - /* comment */


  - 단위(Units)

   - CSS에서 사용할 수 있는 단위는 크게 절대 단위와 상대 단위가 있습니다.

   - 절대 단위에는 워드 프로그램에서 사용하는 익숙한 단위인 pt와 cm, mm, pc, in가 있다.

   - 상대 단위에는 해상도를 기준으로 크기가 결정되는 px, 소문자 x의 높이를 기준으로 크기가 결정되는 ex 단위

     font-size값을 기준으로 크기가 정해지는 em, 그리고 %단위가 있습니다.


  - 색상(color & background)