CSS 초보 강의

필수 지식

계속 공부하기 전에, 다음 지식에 대한 기본적인 이해가 필요합니다:

  • HTML
  • XHTML

이 프로젝트를 먼저 배우고 싶다면, 다음을 통해 시작하세요: 홈페이지 관련 강의에 접근하세요.

CSS 개요
  • CSS는 캐싱 스타일 시트(Cascading Style Sheets)를 의미합니다 (Cascading Style S시트)
  • 스타일 정의어떻게 표시되는지 HTML 요소
  • 스타일은 일반적으로 저장됩니다.스타일 시트중
  • HTML 4.0에 스타일을 추가하는 것은 다음과 같은 이유로입니다:내용과 표현을 분리하는 문제를 해결합니다.
  • 외부 스타일 시트효율성을 크게 향상시킬 수 있습니다.
  • 외부 스타일 시트는 일반적으로 저장됩니다. CSS 파일중
  • 다중 스타일 정의가 가능합니다.캐싱하나

스타일은 일반적인 문제를 해결합니다.

HTML 태그는 원래 문서 내용을 정의하는 데 사용되었습니다. <h1>, <p>, <table>와 같은 태그를 사용하여, HTML은 원래 '이것은 제목입니다', '이것은 본문입니다', '이것은 테이블입니다'와 같은 정보를 표현하기 위해 사용되었습니다. 문서 레이아웃은 브라우저가 처리하며, 포맷 태그를 사용하지 않도록 예상되었습니다.

두 가지 주요 브라우저(네트스케이프와 인터넷 익스플로러)가 지속적으로 새로운 HTML 태그와 속성(예: 텍스트 태그와 색상 속성)을 HTML 규범에 추가함에 따라, 내용과 표현이 분리된 사이트를 생성하는 것이 점점 더 어려워지고 있습니다.

이 문제를 해결하기 위해, 비영리 표준화 연맹인 월드 와이드 웹 연맹(W3C)은 HTML 표준화의 임무를 맡고 HTML 4.0 이외에 STYLES(스타일)을 창출했습니다.

모든 주요 브라우저는 캐싱 스타일 시트를 지원합니다.

스타일 시트는 효율성을 크게 향상시킵니다.

스타일 시트는 HTML 요소의 표시 방법을 정의합니다. 예를 들어, HTML 3.2 스타일의 텍스트 태그와 색상 속성은 일반적으로 외부 .css 파일에 저장됩니다. 단순한 CSS 문서를 편집하면, 외부 스타일 시트를 통해 사이트 전체의 모든 페이지 레이아웃의 외관을 동시에 변경할 수 있습니다.

다중 페이지의 스타일과 레이아웃을 동시에 제어할 수 있어, CSS는 WEB 디자인 분야의 혁신으로 불릴 수 있습니다. 웹 개발자로서, 각 HTML 요소에 스타일을 정의하고 원하는 페이지 수만큼 적용할 수 있습니다. 전체적인 변환을 위해 필요한 경우, 단순히 스타일을 변경하면 웹 사이트의 모든 요소가 자동으로 업데이트됩니다.

다중 스타일은 쌓여

스타일 시트는 스타일 정보를 다양한 방식으로 정의할 수 있습니다. 스타일은 단일 HTML 요소, HTML 페이지의 헤더 요소, 또는 외부 CSS 파일에 정의될 수 있습니다. 단일 HTML 문서 내에서 여러 외부 스타일 시트를 참조할 수도 있습니다.

쌓임 순서

동일한 HTML 요소가 여러 스타일로 정의되었을 때, 어떤 스타일을 사용할 것인가요?

일반적으로 모든 스타일은 다음 규칙에 따라 새로운 가상 스타일 시트에 쌓입니다. 그 중 숫자 4가 가장 높은 우선순위를 가집니다.

  1. 브라우저 기본 설정
  2. 외부 스타일 시트
  3. 인터널 스타일 시트( <head> 태그 내부에 위치)
  4. 인라인 스타일(HTML 요소 내부에서)

따라서, 인라인 스타일(HTML 요소 내부에서)은 가장 높은 우선순위를 가집니다. 이는 다음 스타일 선언보다 우선합니다: <head> 태그 내부의 스타일 선언, 외부 스타일 시트의 스타일 선언, 또는 브라우저의 스타일 선언(기본 값).