CSS: Cascading Style Sheets | 데이터카페

CSS 기본
CSS( Cascading Style Sheets)는 HTML이나 XML 기반 문서의 레이아웃과 스타일을 정의하기 위한 스타일 시트 언어입니다

기본 구조
CSS는 주로 선택자(Selector)와 선언부(Declaration Block)로 이루어져 있습니다.


code
.code{  /* 선택자  */
 /*선언부*/
}

#code{/* 선택자  */
 /*선언부*/
}

code{/* 선택자  */
 /*선언부*/
}


선택자
전체 선택자: * (모든 요소)
요소 선택자: element (특정 요소)
클래스 선택자: .class (특정 클래스를 가진 요소)
ID 선택자: #id (특정 ID를 가진 요소)
자손 선택자: ancestor descendant (ancestor 내부의 descendant)
자식 선택자: parent > child (parent의 직계 child)

선언부
속성(Properties)과 값(Values)
- 각 속성은 요소의 스타일을 정의하며, 값은 해당 속성의 특정 설정을 나타냅니다.
- 예를 들어, color: red;는 텍스트 색상을 빨간색으로 지정합니다

레이아웃
static: 기본값. 문서 흐름에 따라 배치.
relative: 자기 자신을 기준으로 배치.
absolute: 가장 가까운 상위(relative, absolute, fixed 중) 요소를 기준으로 배치.
fixed: 뷰포트를 기준으로 배치. 스크롤에 영향을 받지 않음.

미디어 쿼리(Media Queries):
미디어 유형 및 특성에 따라 스타일을 다르게 적용할 수 있게 하는 기능
반응형 웹 디자인을 구현하는데 사용

code
@media (max-width: xxxpx) {
  .code {
  }
}