CSS
a. CSS의 이해
1. CSS
: Cascading Style Sheet. 마크업 언어로 작성된 언어가 실제로 웹사이트에 표현되는 방법을 지정해 주는 스타일 언어.
2. 스타일 시트
- 스타일 시트 : 스타일 규칙을 한눈에 확인하고 필요할 때 수정 가능토록 묶어 놓은 것을 스타일 시트라고 함
- 브라우저 기본 스타일 : 웹 브라우저에 기본으로 만들어져 있음
- 사용자 스타일 : 스타일 제작자가 만듬. 다시 인라인 스타일, 내부 스타일 시트, 외부 스타일 시트로 분류 됨
b. CSS 파일 추가
<link rel="stylesheet" href="index.css" /> - <link> 요소의 rel 속성 : 연결하고자 하는 파일의 역할이나 특징
- <link> 요소의 href 속성 : 파일 위치 추가
c. CSS 기본 선택자
1. 전체 선택자 '*'
: universal selector. 스타일을 문서의 모든 요소에 적용할 때 사용.
- 전체 선택자는 웹 브라우저의 기본 스타일을 초기화할 때 자주 사용 됨
2. 타입 선택자
: type selector. 특정 태그를 사용한 모든 요소에 스타일 적용.
- 타입 선택자를 사용해 스타일을 지정하려면 해당 태그를 사용한 모든 요소에 적용
3. . 클래스 선택자
: class selector. 스타일 분류(classification)에 사용.
- 같은 태그라도 일부는 다른 스타일을 사용하고 싶을 경우 특정 부분만 선택해서 스타일 적용.
- 클래스 스타일은 여러 곳에 지정 할 수 있음!
4. # id 선택자
: id selector. 특정 요소에 이름을 붙이는데 사용.
- id 선택자는 문서에서 단 하난의 요소에만 적용 할 수 있음
- 중복해서 적용 할 수 없으므로 주로 문서의 레이아웃과 관련된 스타일을 지정하거나 웹 요소에 자바스크립트 프로그램을 사용하면서 구별할 때 사용
5. 그룹 선택자
: 여러 선택자에서 같은 스타일 규칙을 사용하는 경우 쉼표로 구분해 여러 선택자를 나열한 후 스타일 규칙 한 번에 정의.
d. 케스케이딩 스타일 시트
1. 케스케이딩의 의미
- 스타일 시트에서는 우선 순위가 위에서 아랙, 즉 계단식으로 적용된다는 의미
- 웹 요소에 둘 이상의 스타일을 적용할 때 우선 순위에 따라 적용할 스타일을 결정
2. 스타일 우선순위
- 이 때 우선 순위란 어떤 스타일을 먼저 적용할 것인지를 결정하는 규칙
1) 중요도
- 예를 들어 어떤 웹 문서에서 배경을 회색으로 지정하는 스타일을 사용했다 가정할 경우
- 기본 브라우저 스타일은 흰 배경이나 제작자 스타일이 우선이므로 이 웹 문서는 회색으로 표시
- 이 때 사용자가 고대비 모드를 설정해 검은색으로 지정했다면 사용자 스타일이 우선이므로 검은색 화면으로 표시
2) 적용 범위
- 중요도가 같은 스타일의 경우 스타일의 적용 범위에 따라 우선 순위가 정해짐
- 정확히 필요한 요소에만 적용할 스타일일 수록 우선 순위가 높아짐
- 예외적으로 스타일 규칙에 !important를 붙이면 그 스타일은 다른 스타일보다 우선 순위가 높아짐
① !important : 어떤 스타일보다 우선 적용하는 스타일
② 인라인 스타일 : 태그 안에 style 속성을 사용해 해당 태그만 스타일 적용
③ id 스타일 : 지정한 부분에만 적용되는 스타일이지만 한 문서에 한 번만 적용 할 수 있음
④ 클래스 스타일 : 웹 문서에서 지정한 부분에만 적용되는 스타일. 한 문서에 여러번 적용 가능
⑤ 타입 스타일 : 웹 문서에 사용한 특정 태그에 스타일 똑같이 적용
3) 코드의 작성 순서
- 중요도와 적용 범위 또한 같다면 스타일의 정의한 소스 순서로 우선 순위가 결정됨
- 소스에서 나중에 작성한 스타일 > 먼저 작성한 스타일. 나중에 작성한 스타일이 먼저 작성한 스타일 덮어 쓴다