0. css2 와 css3 의 차이

1. 모듈화와 선택적 구현:
   • CSS3: CSS3는 여러 모듈로 나누어져 있어서 각 모듈을 독립적으로 구현할 수 있습니다. 이는 브라우저 제작자들이 필요한 기능을 선택적으로 구현할 수 있게 합니다. 예를 들어, 그림자 효과를 가진 요소나 애니메이션을 지원하는 것처럼 선택적으로 적용할 수 있습니다.
   • CSS2: CSS2는 단일 문서로 구성되어 있어서, 한 번에 모든 기능을 구현해야 했습니다. 이는 일부 브라우저에서는 지원되지 않는 기능이 있을 수 있음을 의미합니다.
   • 모듈화: CSS3는 여러 개별 모듈로 나누어져 있습니다. 예를 들어, 그림자 효과를 추가하는 CSS 속성은 하나의 모듈로 간주됩니다. 각 모듈은 특정 기능 또는 스타일을 담당하며, 서로 독립적으로 작동할 수 있습니다.
   • 선택적 구현: 브라우저 제작자들은 CSS3의 각 모듈을 필요에 따라 선택하여 구현할 수 있습니다. 이는 모든 브라우저가 동일한 속도로 모든 CSS 기능을 지원할 필요가 없다는 것을 의미합니다. 예를 들어, 어떤 브라우저는 그림자 효과를 지원하지 않고 다른 기능에만 집중할 수 있습니다.
2. 새로운 속성과 선택자:
   • CSS3: CSS3는 많은 새로운 속성과 선택자를 도입했습니다. 예를 들어, 그림자 효과, 둥근 모서리, 다단 레이아웃 등의 속성들이 추가되었습니다.
   • CSS2: CSS2에서는 이러한 고급 기능들이 부족했으며, 디자인의 한계가 있었습니다.
3. 반응형 웹 디자인의 지원:
   • CSS3: CSS3는 미디어 쿼리(Media Queries)를 포함하여 반응형 웹 디자인을 지원합니다. 이를 통해 다양한 장치와 화면 크기에 따라 스타일을 조정할 수 있습니다.
   • CSS2: 반응형 웹 디자인이라는 개념 자체가 없었기 때문에, 단일 레이아웃만 지원했습니다.
4. 애니메이션과 변환:
   • CSS3: CSS3는 애니메이션과 변환을 쉽게 만들 수 있는 @keyframes와 transform 등의 기능을 도입했습니다.
   • CSS2: CSS2에서는 이러한 고급 애니메이션과 변환 효과를 구현하는 것이 어려웠습니다.
5. 브라우저 지원:
   • CSS3: CSS3의 일부 기능은 일부 오래된 브라우저에서 지원되지 않을 수 있습니다. 그러나 대부분의 현대적인 브라우저는 CSS3의 주요 기능을 지원합니다.
   • CSS2: CSS2는 상대적으로 오래된 기술이기 때문에, 대부분의 브라우저에서 지원됩니다.

 

 

---

 

CSS3의 주요 특징은 다음과 같습니다:

1. 모듈화: CSS3는 여러 개별 모듈로 나누어져 있어 필요한 기능만 선택적으로 구현할 수 있습니다. 각 모듈은 특정 스타일링 기능을 정의하며, 예를 들어 그림자 효과, 애니메이션, 변형(transform), 다단 레이아웃 등의 모듈이 있습니다.
2. 새로운 속성과 선택자: CSS3는 다양한 새로운 속성과 선택자를 도입하여 디자이너들이 더 다양하고 직관적인 스타일을 적용할 수 있게 했습니다. 예를 들어, 그림자 효과를 적용하는 box-shadow, 둥근 모서리를 만드는 border-radius 등이 있습니다.
3. 반응형 웹 디자인: CSS3는 미디어 쿼리(Media Queries)를 통해 반응형 웹 디자인을 가능하게 합니다. 이는 화면 크기와 장치 종류에 따라 스타일을 동적으로 조정하여 다양한 디바이스에서 최적화된 사용자 경험을 제공할 수 있습니다.
4. 애니메이션과 변환: CSS3는 @keyframes를 사용한 애니메이션과 transform을 이용한 요소 변환 기능을 제공합니다. 이를 통해 웹 페이지에 생동감을 주는 다양한 애니메이션 효과를 쉽게 구현할 수 있습니다.
5. 그리드 레이아웃: CSS3는 display: grid를 사용하여 복잡한 레이아웃을 보다 쉽게 구현할 수 있게 해줍니다. 이는 다단 레이아웃을 포함하여 유연하고 정교한 레이아웃을 제공합니다.
6. 폰트와 텍스트 스타일링: CSS3는 웹 폰트를 쉽게 임포트하고 다양한 텍스트 스타일링 기능을 제공합니다. 예를 들어, 글꼴을 설정하는 @font-face 규칙이나 그림자 효과를 적용하는 text-shadow 등이 있습니다.

 

https://chatgpt.com/