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점