CSS) 이론정리

CSS 기본관련 이론정리

선언방식

• 내장 방식
  • html 파일에 태그 안에 내용을 입력해 스타일링하는 방식. 따로 파일을 만들지 않아도 된다는 장점이 있지만, html과 css 각각의 코드가 길어질 경우 작업효율이 떨어지고 가급적 모든 파일을 따로 분류해 만드는것을 권장한다.
• 링크 방식
  • link태그를 사용해 외부 css파일을 연결하는 방식.
• 인라인 방식
  • 요소의 style 속성에 직접 스타일을 작성하는 방식으로 선택자가 없다. 유지보수에 악영향을 미칠수 있으므로 권장하진 않음.
• @import 방식
  • css의 임포트규칙으로 css문서 안에서 또다른 css문서를 가져와 연결하는 방식

---

선택자

• 기본
  • * : 전체 선택자. 모든 요소를 선택할 때 사용한다.
  • 태그선택자 : 태그이름을 선택할 때 사용. ex: div, span…
  • 클래스선택자 : .classname 와같이 클래스속성의 값을 선택한다.
  • 아이디선택자: #idname 와같이 아이디속성의 값을 선택한다.
• 복합
  • 태그.클래스네임 : 선택자 두개를 함께 지칭해 동시만족하는 요소선택 ex: span.classname
  • 선택자 > 자식선택자 : 선택자의 자식요소를 선택하는 방식. ex: ul > .orange
  • 선택자 하위선택자 : 선택자의 하위요소를 선택하는 방식. ex: div .orange
  • 선택자 + 선택자 : 선택자의 형제요소를 선택하는 방식. 선택자의 인접한곳에 위치한 형제를 찾는다. 즉 선택자의 다음 요소. ex: .bro + li
  • 선택자 ~ 선택자 : 선택자의 다음형제 요소 모두를 선택 ex: .orange ~ li
• 가상클래스
  • 선택자:hover : 선택자 요소에 마우스커서가 올라가있는동안 지정해둔 css가 실행된다.
  • 선택자:active : 선택자 요소에 마우스를 클릭한 동안 지정해둔 css가 실행된다.
  • 선택자:focus : 선택자 요소가 포커스된동안 지정해둔 css가 실행된다.
  • 선택자:first-child : 선택자가 형제요소 중에 첫번째인것을 선택.
  • 선택자:last-child : 선택자가 형제요소 중에 막내인것을 선택.
  • 선택자:nth-child(n) : 선택자가 형제요소 중에 (n)번째 인것을 선택. 좋은참고자료 Click
  • 선택자:not(제외선택자) : 제외선택자를 제외한 요소를 선택.
• 가상요소
  • 선택자::before : 선택자 요소의 내부 앞에 content를 삽입.
  • 선택자::after : 선택자 요소의 내부 뒤에 content를 삽입.
• 속성
  • [선택자] : 속성 선택자를 포함한 요소를 선택
  • [선택자=“value”] : 속성값이 value에 해당하는 요소를 선택.

---

선택자 우선순위

같은 요소가 여러 선언의 대상이 된 경우, 어떤 선언의 CSS속성을 우선 적용할지 결정하는 방법 점수가 높을수록 선언이 우선되며 점수가 같으면 가장 마지막에 해석된 선언이 우선된다.

• !important : 9999999999점
• 인라인선언 : 1000점
• id선택자 : 100점
• class선택자 : 10점
• 태그선택자 : 1점
• 전체 선택자 : 0점