SW_001_기술적용계획표_css

 

CSS의 정의

 

CSS(Cascading Style Sheets)는 웹 문서의 스타일을 지정하는 스타일 시트 언어입니다. HTML과 함께 사용되며, 웹 페이지의 레이아웃, 색상, 글꼴, 간격 등의 시각적 요소를 정의하는 데 사용됩니다. CSS는 문서의 콘텐츠(HTML)와 스타일을 분리하여 웹 개발의 효율성을 높여줍니다.

 

CSS 2.1과 CSS 3.0 비교

 

CSS 2.1

 

도입 시기: 1998년 (CSS 2) 이후, 2011년 6월에 CSS 2.1이 권장 표준으로 승인됨.

 

특징: CSS 2.1은 웹 문서의 레이아웃과 스타일링을 정의하는 기본적인 기능을 제공합니다. 그리드 레이아웃, 박스 모델, 텍스트 정렬 등의 기능이 포함되어 있습니다.

 

한계: CSS 2.1은 복잡한 애니메이션, 미디어 쿼리, 트랜지션 같은 최신 웹 디자인 요구사항을 충분히 처리하지 못했습니다.

 

CSS 3.0

 

도입 시기: CSS 3는 2012년에 발표되었으며, 이후 여러 모듈로 확장됩니다.

특징: CSS 3.0은 모듈화된 구조로 설계되어, 각 기능이 독립적으로 발전하고 있습니다. 대표적인 기능은 미디어 쿼리, 애니메이션, 트랜지션, 3D 트랜스폼, 그림자, 그라디언트 등이 있습니다. 이로 인해 더욱 복잡하고 동적인 웹 디자인이 가능해졌습니다.

차이점: CSS 2.1은 기능이 한정적이고 단순한 스타일링에 초점을 맞췄지만, CSS 3.0은 다양한 디바이스에서의 반응형 웹 디자인과 화려한 시각적 효과를 제공하는 기능을 강조합니다.

 

 

CSS 활용 사례

 

1. 웹 사이트 레이아웃: Flexbox와 CSS Grid를 사용해 웹 페이지의 레이아웃을 구성.


2. 애니메이션: CSS의 @keyframes를 이용해 간단한 애니메이션 효과를 구현. 버튼 호버 애니메이션, 로딩 애니메이션 등을 들 수 있습니다.


3. 반응형 디자인: 미디어 쿼리를 사용하여 다양한 화면 크기에 맞춰 레이아웃을 조정하는 방식으로 웹 사이트를 제작.


4. 다크 모드 구현: 미디어 쿼리의 prefers-color-scheme을 활용해 다크 모드를 지원하는 웹사이트 제작.

 

 

CSS 확장 기술

 

1. Sass/SCSS:

   CSS의 상위 집합으로, 변수, 중첩, 함수 등의 고급 기능을 제공하여 CSS의 유지보수성과 재사용성을 높여주는 전처리기.


2. Less:

   Sass와 비슷한 CSS 전처리기로, CSS의 문법을 확장하여 코드 재사용성을 향상시킵니다.


3. Styled Components:

   React와 같은 JavaScript 라이브러리에서 CSS를 JavaScript 안에 내장시켜 컴포넌트 기반의 스타일링을 가능하게 합니다.


4. Tailwind CSS:

  클래스 기반 유틸리티-first CSS 프레임워크로, 미리 정의된 클래스를 통해 스타일을 빠르게 적용할 수 있습니다.