CSS 소개

CSS는 캐스케이딩 스타일 시트(Cascading Style Sheets)를 의미합니다. CSS는 웹 페이지의 표현 형식(즉, 레이아웃과 포맷)을 설명하는 표준 스타일 시트 언어입니다.

CSS 이전에는, HTML 문서의 대부분의 표현 형식 속성이 HTML 태그 내에 포함되었습니다(특히 HTML 태그 내에). 모든 글꼴, 배경 스타일, 요소 정렬 방식, 경계와 크기는 HTML에서 명확하게 설명되어야 했습니다.

이렇게 하면 스타일 정보가 웹사이트의 각 페이지에 반복적으로 추가되어, 대형 웹사이트 개발이 긴 시간이 걸리고 비용이 많이 들고, 유지보수 비용도 증가합니다.

이 문제를 해결하기 위해 월드 와이드 웹 연맹(W3C)에 의해1996년에 CSS를 도입했으며, 이 연맹도 표준을 유지했습니다. CSS는 표현과 내용을 분리하는 목적을 가지고 있습니다. 지금, 웹 디자이너는 웹 페이지의 포맷 설정 정보를 별도의 스타일 시트로 이동할 수 있으며, 이는 HTML 태그를 크게 간소화하고 유지보수성을 높입니다.

CSS3CSS 표준의 최신 버전입니다. CSS3웹 데모 기능을 강화하기 위해 새로운 스타일 기능과 개선 사항을 추가했습니다.

CSS가 할 수 있는 일

CSS는 더 많은 일을 할 수 있습니다.

• 동일한 스타일 규칙을 여러 요소에 쉽게 적용할 수 있습니다.

• 한 개의 스타일 시트를 사용하여 웹사이트 여러 페이지의 표시를 제어할 수 있습니다.

• 같은 페이지를 다양한 장치에서 다른 방식으로 표시할 수 있습니다.

• 요소의 동적 상태(예: 마우스 오버, 포커스 등)의 스타일을 설정할 수 있으며, 이렇게 하지 않으면 구현할 수 없습니다.

• 요소의 웹 페이지 내 위치를 변경할 수 있으며, 태그를 변경하지 않아도 됩니다.

• 존재하는 HTML 요소의 표시를 변경할 수 있습니다.

• 다음은 사용할 수 있습니다.2D 또는3D 공간에서 변환, 확대, 회전, 기울기 등 요소를 변환할 수 있습니다.

• JavaScript를 사용하지 않고 애니메이션과 전환 효과를 생성할 수 있습니다.

• 웹 페이지의 인쇄 친화 버전을 생성할 수 있습니다.

CSS의 장점과 이점은 많습니다. CSS를 사용하여 다양한 흥미로운 작업을 수행할 수 있습니다. 다음 장에서는 모든 이 내용을 자세히 설명할 것입니다.

CSS를 사용하는 장점

CSS의 가장 큰 장점은 스타일과 레이아웃을 문서의 내용과 분리할 수 있다는 것입니다. 여기에는 더 많은 장점이 있습니다. 왜 CSS를 사용해야 합니까?

• CSS는 많은 시간을 절약합니다. -CSS는 요소 스타일 속성을 설정하는 데 많은 유연성을 제공합니다. 한 번 작성한 CSS를 통해 HTML 요소 그룹에 적용할 수 있으며, 여러 HTML 페이지에서 반복적으로 사용할 수 있습니다.

• 易于维护 — CSS는 문서의 형식을 간단하게 업데이트하고 여러 문서 간의 일관성을 유지하는 방법을 제공합니다. 한 개나 여러 개의 스타일 시트를 사용하여 전체 웹 페이지의 내용을 쉽게 제어할 수 있기 때문입니다.

• 页面加载速度更快 -CSS는 여러 페이지가 공유할 수 있는 포맷 정보를 제공하여 문서 구조 내용의 복잡성과 중복성을 줄입니다. 이는 파일 전송 크기를 显著 줄이고, 페이지 로드 속도를 빠르게 합니다.

• HTML의 고급 스타일 -CSS는 HTML보다 더 넓은 표현 기능을 가지고 있으며, 웹 페이지 레이아웃을 더 잘 제어할 수 있습니다. 따라서 HTML 표현 요소와 속성보다, 웹 페이지가 더 잘 보일 수 있습니다.

• 다양한 장치 호환성 -CSS는 여러 가지 유형의 장치나 미디어에 대한 웹 페이지 최적화를 허용합니다. CSS를 사용하면 다른 표시 장치(예: 데스크톱, 스마트폰 등)에 대해 동일한 HTML 문서를 다른 뷰 스타일로 표시할 수 있습니다.

이 튜토리얼이 다루는 내용

이 CSS 튜토리얼 시리즈는 CSS의 모든 기본 지식을 다루고 있으며, 선택자 개념, 색상과 배경을 설정하는 방법, 글꼴 및 텍스트 형식을 설정하는 방법, 슈퍼 링크, 목록, 테이블 등 UI 요소에 스타일을 적용하는 방법, CSS 블록 모델 등을 포함하고 있습니다.

기본 지식을 익히면, 다음 단계로 이동하게 되며, 이 단계에서는 요소의 크기와 정렬 방식을 설정하는 방법, 웹 페이지에 이미지 스플래시를 사용하여 요소를 배치하는 방법, 상대적 및 관련 개념 등을 소개합니다. 절대 단위, 시각적 포맷 모델, 표시 및 보이기, 레이어, 페르소나 및 요소, 미디어와 관련된 스타일 시트 등.

마지막으로, CSS를 탐구할 것입니다3제공된 고급 기능, 예를 들어 변화하는 색상, 그림자 효과 등.2D와3D 변환, alpha 투명도, 전환 및 애니메이션 효과를 생성하는 방법, 스크린 레이아웃, 필터 효과, 미디어 콘셉 쿼리 등.