CSS 의 개념과 기능

CSS(Cascading Style Sheets)

 CSS(Cascading Style Sheets)는 웹 페이지의 디자인과 레이아웃을 정의하는 데 사용되는 스타일 시트 언어입니다. HTML과 함께 사용되며, 웹 페이지의 시각적인 표현을 제어하고 구조화하는 역할을 합니다. CSS는 HTML이 웹 페이지의 내용을 정의하지만 CSS는 해당 내용의 스타일을 정의합니다.

CSS의 기능

선택자(Selectors): CSS는 HTML 요소를 선택하기 위해 다양한 선택자를 제공합니다. 선택자는 요소의 이름, 클래스, ID, 속성 등을 기반으로 요소를 선택하는 방법을 정의합니다. 

p, h1, div와 같은 HTML 요소 이름을 사용하여 해당 요소를 선택합니다.

.classname과 같이 클래스 이름을 사용하여 해당 클래스를 가진 요소를 선택합니다.

#idname과 같이 ID 이름을 사용하여 해당 ID를 가진 요소를 선택합니다.

parent child와 같이 부모 요소의 하위에 있는 특정 자식 요소를 선택합니다.

:hover, :active 등과 같이 특정 상태의 요소를 선택합니다.

속성(Properties): CSS 속성은 선택한 HTML 요소의 스타일을 지정합니다. color, font-size, margin, padding 등이 있습니다.

값(Values): 속성에 할당되는 값으로, 해당 속성의 효과를 결정합니다. 예를 들어, color: blue;에서 "blue"는 텍스트 색상을 의미하는 값입니다.

규칙(Rules): CSS 규칙은 선택자와 해당 선택자에 적용할 속성-값 쌍의 조합으로 이루어집니다. 규칙을 통해 HTML에 원하는 스타일을 적용할 수 있습니다.

스타일 시트(Stylesheet): 하나 이상의 스타일 규칙을 포함하는 파일입니다 스타일시트는  .css 확장자를 가집니다. HTML 문서에 링크하여 해당 문서에 스타일을 적용합니다.

클래스(Class)와 ID: 클래스와 ID는 특정 요소에 스타일을 적용하는 데 사용됩니다. 클래스는 .으로 시작하며, ID는 #으로 시작합니다. 클래스와 ID를 사용하여 선택적으로 스타일을 적용할 수 있습니다.

상속(Inheritance): 상속을 통해 특정 스타일을 상위 요소에서 하위 요소로 전달할 수 있습니다.

글꼴 및 색상과 같은 속성은 상속되는 경우가 많습니다.

상속된 스타일은 하위 요소의 보다 구체적인 스타일로 재정의될 수 있습니다.

가상 클래스 및 가상 요소(Pseudo-classes and Pseudo-elements): 특정 상황에서 요소에 스타일을 적용하기 위해 사용되는 가상 클래스와 가상 요소를 정의할 수 있습니다. 예를 들어, :hover 가상 클래스는 마우스가 요소 위로 올라갈 때의 스타일을 정의할 수 있습니다.

박스 모델(Box Model): 박스 모델은 요소의 크기와 간격을 정의합니다.

내용: 요소의 실제 내용

패딩(Padding): 콘텐츠와 테두리 사이의 공간

테두리(Border): 콘텐츠와 패딩을 둘러싸는 선

여백: 테두리 외부의 공간으로 요소 사이에 공간

반응형 디자인 및 미디어 쿼리:

미디어 쿼리를 사용하면 미디어 유형, 장치 해상도 등과 같은 조건에 따라 다양한 스타일을 적용할 수 있습니다.

반응형 레이아웃을 디자인하려면 미디어 쿼리를 사용하여 다양한 화면 크기에 적응해야 합니다.

전환 및 애니메이션:

CSS 전환을 사용하면 시간이 지남에 따라 속성이 원활하게 변경됩니다.

CSS 애니메이션은 키프레임 및 타이밍 기능을 통해 더 복잡한 애니메이션을 제공합니다.