CSS 개요
필수 기본 지식
계속 공부하기 전에, 다음 지식에 대한 기본적인 이해가 필요합니다:
- HTML
- XHTML
이 프로젝트를 먼저 배우고 싶다면, 다음에 홈페이지 관련 강의에 접근하세요.
CSS 개요
- CSS는 캐싱 스타일 시트(Cascading Style Sheets)를 의미합니다 (Cascading Style Shets)
- 스타일 정의어떻게 표시될지 HTML 요소
- 스타일은 일반적으로 저장됩니다스타일 시트중
- HTML 4.0에 스타일을 추가하는 이유는콘텐츠와 표현을 분리하는 문제를 해결합니다
- external 스타일 시트효율성을 크게 향상시킬 수 있습니다
- 외부 스타일 시트는 일반적으로 저장됩니다 CSS 파일중
- 여러 스타일 정의가 가능합니다캐싱하나
스타일은 일반적인 문제를 해결합니다.
HTML 태그는 원래 문서 내용을 정의하는 데 사용되었습니다. <h1>, <p>, <table>와 같은 태그를 사용하여, HTML의 초기 목적은 “이것은 제목입니다”, “이것은 본문입니다”, “이것은 테이블입니다”와 같은 정보를 표현하는 것이었습니다. 동시에, 문서 레이아웃은 표기화 태그 없이 브라우저가 완료합니다.
주요 브라우저(네트스케이프와 인터넷 익스플로러)가 지속적으로 새로운 HTML 태그와 속성(예: font 태그와 색상 속성)을 HTML 규범에 추가함에 따라, 문서 내용이 문서 표현 계층에서 독립적으로 명확하게 생성되는 사이트를 만들기가 점점 어려워지고 있습니다.
이 문제를 해결하기 위해, 비영리의 표준화 연맹인 월드 와이드 웹 연맹(W3C)이 HTML 표준화의 임무를 맡고, HTML 4.0 이외에 스타일(Style)을 만들었습니다.
모든 주요 브라우저가 캐싱 스타일 시트를 지원합니다.
스타일 시트는 효율성을 크게 향상시킵니다.
스타일 시트는 HTML 요소를 어떻게 표시할지 정의합니다. 이는 HTML 3.2의 font 태그와 색상 속성이 수행하는 역할과 같습니다. 스타일은 일반적으로 외부의 .css 파일에 저장됩니다. 단순한 CSS 문서를 편집하면, 외부 스타일 시트를 통해 사이트 중 모든 페이지의 레이아웃과 외관을 동시에 변경할 수 있습니다.
다중 페이지의 스타일과 레이아웃을 동시에 제어할 수 있어, CSS는 웹 디자인 분야에서의 혁신으로 불릴 수 있습니다. 웹 개발자로서, 각 HTML 요소에 스타일을 정의하고, 원하는 페이지에 적용할 수 있습니다. 전체적인 업데이트를 위해, 단순히 스타일을 변경하면, 웹 페이지의 모든 요소가 자동으로 업데이트됩니다.
다중 스타일은 쌓여 하나로 합니다.
스타일 시트는 스타일 정보를 다양한 방식으로 정의할 수 있습니다. 스타일은 단일 HTML 요소, HTML 페이지의 <head> 요소 내, 또는 외부 CSS 파일 내에서 정의할 수 있습니다. 또한, 동일한 HTML 문서 내에서 여러 외부 스타일 시트를 참조할 수 있습니다.
쌓임 순서
동일한 HTML 요소에 여러 스타일이 정의되었을 때, 어떤 스타일을 사용할까요?
일반적으로 모든 스타일은 다음 규칙에 따라 새로운 가상 스타일 시트에 쌓입니다. 숫자 4는 가장 높은 우선순위를 가집니다.
- 브라우저 기본 설정
- external 스타일 시트
- 인ternal 스타일 시트( <head> 태그 내에 위치)
- 인라인 스타일(HTML 요소 내부에)
따라서, 인라인 스타일(HTML 요소 내부에)는 가장 높은 우선순위를 가집니다. 이는 다음 스타일 선언보다 우선합니다: <head> 태그 내의 스타일 선언, 외부 스타일 시트, 또는 브라우저의 스타일 선언(기본 값).
