목차
06-1 스타일과 스타일 시트
06-2 css 기본 선택자 알아보기
06-3 캐스케이딩 스타일 시트 알아보기
06-1 스타일과 스타일 시트
스타일을 왜 사용할까?
스타일
- HTML 문서에서 자주 사용하는 글꼴이나 색상, 정렬, 각 요소의 배치 방법과 같이 문서의 겉모습을 결정짓는 것을 가리킴
- HTML이 아닌 CSS를 사용하는 이유
- 웹 문서의 내용과 상관없이 디자인만 바꿀 수 있음
- 다양한 기기에 맞게 탄력적으로 바뀌는 문서를 만들 수 있음
스타일 형식 알아보기
선택자 { 속성 1: 속성값1; 속성2: 속성값2; }
스타일 규칙을 작성하는 방법
스타일의 주석을 표기하는 방법
스타일 시트 알아보기
스타일 시트
- 스타일 규칙을 한눈에 확인하고 필요할 때마다 수정하기 쉽도록 한 군데 묶어 놓은 것
브라우저 기본 스타일
- 웹 브라우저에 표시할 때 자동으로 적용되는 스타일
간단한 스타일 정보를 적용하는 인라인 스타일
- 스타일 시트를 사용하지 않고 스타일을 사용할 대상에 직접 표시
- style 속성을 사용해 style="속성: 속성 값; ” 형태로 스타일을 지정
문서 안에 스타일을 모아놀은 내부 스타일 시트
- 웹 문서 안에서 사용할 스타일을 같은 문서 안에 정리한 것
- 모든 스타일 정보는 \ 태그 안에서 정의하고 \ 태그 사이에 작성
스타일 정보를 따로 저장해 놀은 외부 스타일 시트
- 여러 웹 문서에서 사용할 스타일을 별도 파일로 저장해놓고 필요할
때마다 가져와서 사용
<link rel="stylesheet" href=" 외부 스타일 시트 파일 경로">
06-2 css 기본 선택자 알아보기
전체 요소에 스타일을 적용하는 전체 선택자
전체 선택자
- 스타일을 문서 의 모든 요소에 적용할 때 사용
* { 속성: 값; ...... } - 웹 브라우저의 기본 스타일을 초기화할 때 자주 사용
특정 요소에 스타일을 적용하는 타입 선택자
타입 선택자
- 특정 태그를 사용한 모든 요소에 스타일을 적용
태그명 { 스타일 규칙 }
특정 부분에 스타일을 적용하는 클래스 선택자
클래스 선택자
- 특정 부분만 선택해서 스타일을 적용
- 클래스 이름을 사용해서 다른 선택자와 구별하는데 이때 클래스 이름 앞에 마침표(.)를 반드시 붙여야 함
.클래스명 { 스타일 규칙 }
클래스 스타일
- 클래스 선택자를 사용해 만든 스타일
특정 부분에 스타일을 한 번만 적용할 수 있는 id 선택자
id 선택자
- 클래스 선택자와 마찬가지로 웹 문서의 특정 부분을 선택해서 스타일을
지정할 때 사용 - 주로 문서의 레이아웃과 관련된 스타일을 지정하거나 웹 요소에 자바스크립트 프로그램을 사용하면서 요소를 구별할 때 사용
#아이디명 { 스타일 규칙 } - 클래스 선택자와의 차이점
- 마침표(.) 대신 # 기호를 사용
- 클래스 선택자가 문서에서 여러 번 적용할 수 있는 반면，id 선택자는 문서에서 한 번만 적용할 수 있음
같은 스타일 규칙을 사용하는 요소를 묶어 표현하기
- 여러 선택자에서 같은 스타일 규칙을 사용하는 경우, 쉽표(,)로 구분해 여러 선택자를 나열한 후 스타일 규칙을 한 번만 정의
선택자1, 선택자2 { 스타일 규칙 }
06-3 캐스케이딩 스타일 시트 알아보기
캐스케이딩의 의미
캐스케이딩(cascading)
- css에서는 웹 요소에 둘 이상의 스타일을 적용할 때 우선순위를 결정
지켜야할 2가지 원칙
스타일 우선 순위
- 어떤 스타일을 먼저 적용할 것인지 결정하는 규칙
얼마나 중요한가?
- 사용자 스타일 (예: 고대비 모드 설정 등)
- 제작자 스타일 (웹 개발자가 작성한 CSS)
- 브라우저 기본 스타일 (웹 브라우저가 기본으로 제공)
적용 범위는 어디까지인가?
- 스타일 적용 범위가 좁고 명확할수록 우선순위가 높아짐:
소스 코드의 작성 순서는 어떠한가?
- 중요도와 적용 범위가 같다면, 코드에서 나중에 작성된 스타일이 우선
→ 나중 코드가 앞의 스타일을 덮어씀
스타일 상속
스타일 상송
- 부모 요소의 스타일이 자식 요소에게 자동으로 전달되는 것
- 자식에게 따로 스타일을 지정하지 않으면, 부모의 스타일이 그대로 적용됨
왜 중요한가?
- HTML 태그는 포함 관계(부모-자식 구조)로 이루어짐
- 예를 들어 \ 태그는 거의 모든 태그의 부모니까, \에 글꼴이나 글자색을 지정하면 문서 전체에 적용됨
장점
스타일을 반복해서 지정하지 않아도 됨 → 효율적인 코드 작성 가능
