정의
CSS(Cascading Style Sheets)는 HTML이나 XML(포함하여 SVG나 XHTML와 같은 XML 언어)로 작성된 문서의 표현을 설명하는 스타일시트 언어입니다. CSS는 화면, 인쇄, 음성 또는 기타 미디어에서 요소가 어떻게 렌더링되어야 하는지 설명합니다.
목적과 사용
CSS는 주로 디자이너와 개발자가 HTML 요소에 시각적 스타일링과 레이아웃을 적용하여 웹 페이지의 모습을 개선하는 데에 사용됩니다. CSS는 웹 사이트의 콘텐츠(HTML이나 유사한 마크업 언어로 작성된)와 시각적 디자인을 분리하여 기본 콘텐츠를 변경하지 않고도 웹 사이트의 외관을 쉽게 유지하고 업데이트할 수 있도록 합니다.
주요 기능
- 셀렉터: CSS는 셀렉터를 사용하여 HTML 요소를 선택하고 해당 요소에 스타일을 적용합니다.
- 프로퍼티: 각 셀렉터는 선택된 요소가 어떻게 스타일링될지 정의하는 하나 이상의 프로퍼티를 포함할 수 있습니다.
- 값: 프로퍼티는 색상, 글꼴, 크기, 마진 등과 같은 특정한 스타일을 지정하는 값을 할당받습니다.
- 카스케이딩: CSS 규칙은 카스케이드되어 우선순위가 특정성, 중요도 및 소스 순서에 따라 결정됩니다.
- 상속: 일부 CSS 속성은 부모 요소에 설정된 값이 자식 요소에게 상속되지만, 일부는 상속되지 않습니다.
구문
CSS 규칙은 셀렉터와 선언 블록으로 구성됩니다:
selector {
property: value;
property2: value2;
}
예를 들어, 모든 <p> (단락) 요소의 텍스트 색상을 파란색으로 설정하려면 다음과 같습니다:
p {
color: blue;
}
HTML과의 통합
CSS는 HTML 문서에 세 가지 방법으로 포함될 수 있습니다:
- 인라인 스타일: HTML 요소의
style속성 내에 직접 작성합니다. - 내부 스타일시트: HTML 문서의
<head>섹션 내에 있는<style>요소 내에 작성합니다. - 외부 스타일시트: HTML 문서에서
<link>요소를 사용하여 연결된 별도의.css파일에 작성합니다.
결론
CSS(Cascading Style Sheets)는 웹 개발에서 필수적인 기술로 웹 페이지의 시각적 스타일과 레이아웃을 담당합니다. 이는 멋진 디자인과 일관된 디자인을 만들기 위해 강력하고 유연한 방법을 제공하며, 동시에 콘텐츠를 다양한 장치에서 접근 가능하고 가독성이 있는 것으로 만들어줍니다. 웹 표준이 진화함에 따라 CSS는 더욱 복잡하고 반응형 디자인을 구현하는 데 필요한 새로운 기능과 기능을 제공하고 있습니다.
