CSS(스타일 시트, Cascading Style Sheets)는 웹 페이지의 디자인과 레이아웃을 정의하는 스타일 언어입니다. HTML로 작성된 웹 페이지의 내용을 꾸미고, 레이아웃을 설정하며, 요소들의 시각적인 표현을 변경하는 데 사용됩니다. 아래는 CSS의 기본 구성과 몇 가지 주요 개념에 대한 설명입니다.
CSS 기본 구성:
선택자 (Selectors): 스타일을 적용할 HTML 요소를 선택합니다. 선택자는 요소의 태그 이름, 클래스, ID, 속성 등을 사용하여 정의됩니다.
예:
h1 {
color: blue;
}속성 (Properties): 선택한 요소에 적용할 스타일 속성을 정의합니다. 각 속성은 스타일을 변경하는 역할을 하며, 이를 설정할 수 있습니다.
예:
color: blue;값 (Values): 스타일 속성의 값은 해당 속성이 가질 특정 값이며, 스타일을 변경하는 데 사용됩니다.
예:
font-size: 16px;주요 CSS 개념:
상속 (Inheritance): 일부 스타일 속성은 부모 요소로부터 자식 요소로 상속됩니다. 이것은 스타일을 일괄 적용하고 코드의 중복을 줄이는 데 도움이 됩니다.
우선순위 (Specificity): 여러 스타일 규칙이 충돌할 때, 스타일 규칙의 우선 순위에 따라 어떤 스타일이 적용될지 결정됩니다. 선택자의 특정성, 중요도, 스타일 규칙의 순서 등이 우선순위에 영향을 줍니다.
박스 모델 (Box Model): 모든 HTML 요소는 컨텐츠, 패딩, 테두리, 마진으로 구성된 박스로 취급됩니다. CSS로 이 박스의 크기와 여백을 제어할 수 있습니다.
클래스와 ID: 선택자로 HTML 요소를 찾을 때, 클래스와 ID를 사용하여 특정 요소를 선택하거나 그룹화할 수 있습니다.
의사 클래스와 의사 요소 (Pseudo-classes and Pseudo-elements): 특정 상태나 위치에 있는 요소에 스타일을 적용하기 위해 의사 클래스(예: :hover)와 의사 요소(예: ::before)를 사용할 수 있습니다.
미디어 쿼리 (Media Queries): 미디어 쿼리를 사용하여 미디어 유형과 화면 크기에 따라 다른 스타일을 적용할 수 있습니다. 이것은 반응형 웹 디자인을 구현하는 데 사용됩니다.
CSS 전처리기 (CSS Preprocessor): SASS나 LESS와 같은 CSS 전처리기는 복잡한 CSS를 더 효율적으로 작성할 수 있도록 도와주는 도구입니다.
CSS는 웹 디자인과 웹 개발의 필수적인 부분이며, HTML과 함께 사용하여 웹 페이지를 멋지게 꾸미고 사용자 경험을 개선하는 데 중요한 역할을 합니다.
