스타일 시트
-
브라우저 기본 스타일 : 웹 브라우저에 웹 문서를 표시할 때 브라우저에서 기본으로 사용하는 스타일
-
인라인 스타일 : sytle 속성을 사용해 필요한 요소에 스타일을 직접 지정함.
-
내부 스타일 시트 : 문서 앞부분에 문서에서 사용하는 스타일을 모아서 함께 정의하고 관리
-
외부 스타일 시트 : 문서에서 사용하는 스타일을 모아서 따로 파일로 저장한 후 연결해서 사용
외부 스타일 시트 사용 기본형
<link rel="stylesheet" href="외부 스타일 시트 파일 경로">
CSS 기본 선택자
-
전체 선택자: 문서의 모든 요소에 스타일 적용* { margin : 0; } -
타입 선택자: 특정 태그를 사용한 모든 요소에서 스타일을 적용p { font-style : italic; } -
클래스 선택자: 특정 부분만 선택해서 문서 안에 여러 번 적용. 마침표(.)를 붙여서 사용함..bg { background-color: #ddd; } -
id 선택자: 특정 부분만 선택해서 문서 안에서 한 번만 적용. #을 붙여서 사용함.#container { width: 500px; } -
그룹 선택자: 여러 요소에 같은 스타일을 적용할 때 사용함.h1, h2 { text-align : center; }
캐스캐이딩(cascading)
- CSS는 Cascading Style Sheet 줄임말.
- 스타일 시트에서는 우선순위가 위에서 아래, 즉 계단식으로 적용된다는 의미로 사용. CSS는 우선순위가 있는 스타일 시트.
- CSS에서는 웹 요소에 둘 이상의 스타일을 적용할 때 우선순위에 따라 적용할 스타일을 결정함.
- 스타일 우선순위 : 스타일 규칙의 중요도와 적용 범위에 따라 우선순위가 결정되고, 그 우선순위에 따라 위에서 아래로 스타일을 적용함.
- 스타일 상속 : 태그의 포함 관계에 따라 부모 요소의 스타일을 자식 요소로, 위에서 아래로 전달함.
스타일 우선순위
얼마나 중요한가?
① 사용자(user) 스타일
→ ② 제작자(author) 스타일
→ ③ 브라우저(browser) 기본 스타일
적용 범위는 어디까지인가?
스타일 적용 범위가 좁을수록, 즉 정확히 필요한 요소에만 적용할 스타일일수록 우선순위가 높아짐.
① !important : 다른 스타일보다 우선 적용
→ ② 인라인 스타일 : 태그 안에 style속성을 사용해 해당 태그만 스타일 적용
→ ③ id 스타일 : 지정한 부분에만 적용되는 스타일이지만, 한 문서에 한 번만 적용할 수 있음. ( #선택자이름)
→ ④ 클래스 스타일 : 웹 문서에서 지정한 부분에만 적용되는 스타일로 한 문서에 여러 번 적용할 수 있음. ( .선택자이름)
→ ⑤ 타입 스타일 : 웹 문서에 사용한 특정 태그에 스타일을 똑같이 적용
소스 작성 순서는 어떠한가?
- 나중에 작성한 스타일이 먼저 작성한 스타일을 덮어씀.
스타일 상속
-
스타일 시트에서는 자식 요소에서 별도로 스타일을 지정하지 않으면 부모 요소의 스타일 속성들이 자식 요소로 전달되는데, 이것을 스타일 상속이라고 함.
-
배경색, 배경 이미지는 스타일 상속이 되지 않음.
-
스타일 상속만으로 모든 스타일의 충돌을 해결할 수 있는 것은 아님. 만약 부모 요소로부터 글꼴을 상속받은 자식 요소에서 다른 글꼴을 사용하려면, 우선순위에서 설명했던 '명시도'나 '소스 순서'등에 따라 해결해야 함.
