[모각코][210710] HTML CSS 정리

선택자

• 일반적인 태그(h1, p, div, span, a 등)를 선택자로 사용 가능
• 여러 개의 선택자를 콤마(,)를 이용하여 한번에 스타일 적용 가능(중복방지)

h1 {
  color: red;
}
p {
  color: red;
}

//콤마 사용하여 하나로
h1, p {
  color: red;
}

단순 선택자

1. 타입 선택자
   • 해당 태그를 가지는 모든 요소에 스타일 적용
   • p {color : red;}

2. 클래스 선택자(.)
   • 클래스 이름으로 스타일 적용. 같은 클래스 이름이면 모두 적용.
   • 클래스(class) : 비슷한 특징을 갖는 요소를 지정하여 묶을 수 있음. 여러번 사용 가능
   • .main {color : red;}

3. 아이디 선택자(#)
   • 아이디로 스타일 적용. 해당 아이디 하나에만 적용
   • 아이디(Id) : HTML 문서 내에서 동일한 아이디는 존재할 수 없음. 다른 요소와 구분되는 점을 만들어줌.
   • #main {color : red;}

4. 전체 선택자(*)
   • 모든 요소에 스타일을 적용. 모든 요소에 적용하기 때문에 속도 저하 가능성 有
   • 가급적 사용X
   • * {color : red;}

5. 속성 선택자
   • 특정 속성을 소유하는 모든 요소에 스타일을 적용.
   • 선택자[속성명 = "속성갑] {color : red;}
   • a[target="_blank"] {color : red;}

복합 선택자

1. 자식 선택자(child selector)
   • 선택자A의 모든 자식 중 선택자 B와 일치하는 요소 선택
   • 선택자A > 선택자B {color : red;}
   • article > p {color : red;}
     -> "< article >태그의 모든 자식 중 < p >태그를 가지는 요소의 글자색을 빨간색으로 변경"
   • 바로 직계 자식인 요소를 선택하는 것!

2. 후손 선택자(descendant selector)
   • 선택자A의 모든 후손 중 선택자B와 일치하는 요소 선택
   • 선택자A 선택자B {color : red;}
   • article p {color : red;}
     -> "< article > 태그의 모든 후손 중 < p > 태그를 가지는 요소의 글자색을 파란색으로 변경"
   • 직계 자식 뿐만 아니라 그 아래에 있는 자식의 자식까지, 즉 후손 전체를 선택!

Pseudo 클래스 선택자

• 가상 클래스
• 요소의 특별한 상태를 지정할 때 사용
• 선택자:pseduo-class {속성 : 속성 값;}
  :link : 방문하지 않은 링크일 경우
  :visited : 방문한 링크일 경우
  :hover : 요소에 마우스가 올라와 있는 경우

상속

• 부모나 조상 요소에 적용된 CSS 프로퍼티를 자식 혹은 후손 요소가 물려받는 것
• 모든 CSS 프로퍼티가 상속되는 것은 아니다
  - width, height, margin, padding, display 등은 상속되지 않음!
  - 상속되지 않는 프로퍼티를 상속받게 하는 방법 : inherit
  • margin : inherit;

Cascading

• CSS적용 우선순위 (3가지 규칙)

1. 중요도
   • CSS가 어디에 선언되었는지에 따라 우선순위 달라짐
   1. < head > 태그 내의 < style > 태그
   2. < head > 태그 내의 < style > 태그 내의 import문
   3. < link > 태그로 연결된 CSS
   4. < link > 태그로 연결된 CSS 내의 import문
   5. 브라우저 디폴트 스타일시트

2. 명시도

   1. !important
   2. 인라인 스타일(inline style)
   3. 아이디 선택자(id selector)
   4. 클래스, 속성, 가상클래스 선택자
   5. 태그 선택자
   6. 전체 선택자
   7. 상속

   => id로 지정해 놓은 스타일이 있으면 class로 같은 스타일을 먹이려고 해도 적용되지 않음! (id가 우선 적용)

3. 선언 순서

   • 나중에 선언된 스타일이 우선 적용