CSS란?
사용자에게 문서를 표시하는 방법을 지정하는 언어
HTML 요소들이 각종 미디어에서 어떻게 보이는가를 정의하는 데 사용되는 스타일 시트 언어
웹 사이트에서 화면에 표시되는 정보들을 꾸며주는 역할
웹 페이지의 스타일을 별도의 파일로 저장할 수 있게 해주므로 사이트의 전체 스타일을 손쉽게 제어
웹 사이트의 스타일을 일관성 있게 유지할 수 있게 해주며, 그에 따른 유지 보수 편리
HTML - 문장 구조
CSS - 문장 디자인
CSS 사용 방법
인라인 스타일
HTML 요소 안에서 Style 속성 이용
해당 요소에만 스타일 적용
내부스타일
HTML 문서의 <head>태그 내에 <style>태그를 사용하여 스타일을 지정
해당 HTML 문서에만 스타일을 적용
외부스타일
별도의 CSS 파일을 분리하여 HTML 문서에 연결
웹 사이트 전체의 스타일을 하나의 파일에서 설정
스타일 적용의 우선 순위
- 인 라인 스타일
- 내부 스타일 / 외부 스타일 시트
- 웹 브라우저 기본 스타일
- 혼합되어 사용 될 경우 내부나 외부 스타일 시트와 상관 없이 인 라인 스타일 우선
CSS 기본 구조
선택자
- HTML 요소 선택자
CSS를 적용할 대상으로 HTML 요소의 이름을 직접 사용하여 선택
- 아이디(id) 선택자
CSS를 적용할 대상으로 특정 요소를 선택
웹 페이지에 포함된 여러 요소 중에서 특정 아이디 이름을 가지는 요소만을 선택
중복 사용 가능
- 클래스(class) 선택자
특정 집단의 여러 요소를 한 번에 선택
같은 클래스 이름을 가지는 요소들을 모두 선택
- 그룹(group) 선택자
여러 선택자를 같이 사용하고자 할 때 사용
여러 선택자를 쉼표(,)로 구분하여 연결
선언부
하나 이상의 선언들을 세미콜론(;)으로 구분하여 포함할 수 있으며, 중괄호({ })를 사용하여 전체를 둘러쌈
각 선언은 CSS 속성명(property)과 속성값(value)을 가지며, 그 둘은 콜론(:)으로 연결
CSS 선언(declaration)은 항상 마지막에 세미콜론(;)으로 마침.
프로퍼티
셀렉터가 지정한 위치의 무엇을 바꿀 것인지
값
프로퍼티로 지정한 것을 얼마나 바꿀 것인지
