[동영상 강의] Do it! HTML + CSS + 자바스크립트 웹 표준의 정석 - CSS기본 선택자, 캐스케이딩 스타일 시트

CSS

스타일과 스타일 시트

• 스타일 시트: 여러 개의 스타일을 모아 놓은 것
• 스타일 종류
  • 브라우저 기본 스타일
  • 인라인 스타일
  • 내부 스타일 시트
  • 외부 스타일 시트

CSS 기본 선택자

• 전체 선택자
  • 브라우저 기본 스타일을 초기화할 때 많이 사용 💡 

    • * {
      	margin: 0;
      	padding: 0;
      }

• 타입(태그) 선택자

  • p {
    	color: blue;
    }

• class 선택자
  • 문서 안에서 여러번 사용.
  • 앞에 마침표를 사용

  • .redtext {
    	color: red;
    }

• id 선택자
  • 문서 안에서 한 번만 사용 가능하기 때문에 고유성을 가짐.

  • #container {
    	border:1px solid #222;
    	padding:10px;
    }

• 그룹 선택자
  • 선택자를 그룹으로 묶어서 나타낼 수 있다. 

  • h1, p {
    	color: blue;
    }

캐스케이딩 스타일 시트

• 캐스케이딩의 의미
  • 캐스캐이딩(Cascading): '위에서 아래로 흐른다'는 뜻. 즉 계단식으로 적용된다는 의미로 사용.
  • 선택자에 여러 스타일이 적용될 때 스타일 충돌을 막기 위해 우선순위에 따라 적용할 스타일을 결정함.
• 스타일 충돌을 막는(캐스캐이딩)의 원칙
  • 스타일 우선순위 - 스타일 규칙의 중요도와 적용 범위에 따라 우선순위가 결정되고 그 우선순위에 따라 위에서 아래로 (계단식으로) 스타일 적용
  • 스타일 상속 - 태그들의 포함 관계에 따라 부모 요소의 스타일을 자식 요소로, 위에서 아래로 전달
• 원칙 1: 스타일 우선순위 ★
  • 얼마나 중요한가에 따라
    1. 사용자 스타일(시스템에서 만든 스타일. windows, mac 등. 사용자가 제어할 수 없음)
    2. 제작자 스타일(웹 사이트를 만들 때 제작자가 만든 스타일)
    3. 브라우저 스타일(브라우저의 기본 스타일)
  • 얼마나 한정 지을 수 있는가에 따라
    1. !important - 어떤 스타일보다 우선 적용되는 스타일
    2. 인라인 스타일 - 해당 태그에만 적용되는 스타일
    3. id 스타일 - 특정 부분에만 적용되는 스타일. 문서 안에서 한 번만 사용됨.
    4. 클래스 스타일 - 특정 부분에만 적용되는 스타일. 문서 안에서 여러 번 사용됨.
    5. 타입 스타일 - 특정 태그에만 적용되는 스타일. 문서 안의 같은 태그에 모두 적용됨
  • 소스 순서에 따라
    • 중요도와 명시도가 같다면 소스 순서에 따라 결정.
    • 소스에서 나중에 온 스타일이 먼저 온 스타일을 덮어씀.
• 원칙 2: 스타일 상속
  • 자식 요소에서 별도의 스타일을 지정하지 않으면 부모 요소에 있는 스타일 속성들이 자식 요소로 전달됨.
  • 상속을 이용하면 스타일 시트를 효과적으로 만들 수 있다.
  • 주의할 것은 스타일의 모든 속성이 부모 요소에서 자식 요소로 상속되는 것은 아니라는 점(ex. 글자 색은 상속되지만 배경 색은 상속되지 않음)

                                   

 

 

Reference

• 06-1 CSS의 기본
• 06-2 CSS의 기본