CSS와 CSS3의 차이점

원래의 Cascading Style Sheets 사양과 훨씬 더 최근의 CSS3 개정판은 HTML 웹 페이지를 향상하고 형식을 지정하는 데 사용되는 기술입니다. CSS는 처음에 웹 페이지의 프레젠테이션 계층을 보다 효율적인 방식으로 처리하도록 설계되었습니다. 현대 웹의 복잡한 구성을 처리할 의도가 전혀 없었던 HTML로 서식을 지정합니다. CSS2는 CSS1의 보편적으로 채택된 확장이기 때문에 숫자가 없는 CSS라는 용어는 CSS2가 포함되었음을 의미합니다. CSS3 사양은 2014년 7월 현재 개발 중이므로 웹 개발자는 기능 지원이 브라우저마다 다르다는 점을 고려해야 합니다.

CSS3는 CSS의 모든 기능과의 호환성을 유지하는 CSS2의 업데이트입니다. CSS3는 CSS 코드를 더 이상 사용하지 않습니다. CSS3 코드는 웹 페이지를 더 보기 좋게 만들고 더 빠르게 로드할 뿐만 아니라 사용자 브라우저에서 페이지를 빌드하는 개발 시간을 단축하도록 설계되었습니다. CSS3는 웹 디자인이 페이지 디자인 요소에 대해 이미지 파일에 덜 의존하도록 하고 더 적은 수의 이미지를 사용하여 파일 전송 요청 및 다운로드 시간을 줄입니다. CSS1은 모양 서식 지정에 중점을 둔 반면 CSS2는 텍스트 및 개체에 대한 위치 지정 기능을 추가했습니다. IE 9 및 이전 버전과 같은 이전 브라우저 버전은 CSS3의 추가 기능을 광범위하게 지원하지 않으므로 CSS 폴백 코드를 유지 관리하기 위해 추가 개발 시간이 필요할 수 있습니다.

CSS3 이전에 웹 개발자는 구조적 테두리 및 배경 이미지 그라디언트를 위한 둥근 모서리와 같은 것을 추가하기 위해 이미지 파일을 디자인해야 했습니다. CSS3에는 몇 줄의 코드로 추가할 수 있는 유사한 기능이 포함되어 있습니다. CSS에서 웹 개발자는 테두리 또는 그라디언트를 디자인하고 이미지 서버에 업로드하고 페이지에 이미지를 배치하고 CSS를 사용하여 테두리를 올바르게 배치해야 합니다. CSS3에서 웹 개발자는 ".roundBorder{border-radius: 10px;}"와 같은 코드로 유사한 작업을 수행할 수 있습니다. 배경 그라디언트는 좀 더 복잡하고 브라우저마다 다른 코드가 필요합니다. 예를 들어 Chrome 및 IE의 흰색에서 검은색 그라데이션은 ".gradBG{background: liner-gradient (white, black);}"와 같은 코드를 사용합니다.

CSS3에는 페이지 요소의 모양을 개선하기 위해 CSS에 없는 몇 가지 기능이 있습니다. CSS3를 사용하여 웹 개발자는 텍스트에 텍스트 그림자를 추가하여 읽기 쉽게 하거나 시각적 감각을 추가할 수 있으며 긴 단어 내에서 줄 바꿈을 적용하여 줄 바꿈이 있는 열 안에 맞도록 할 수 있습니다. CSS3 이전에 웹 개발자는 JavaScript 및 jQuery와 같은 스크립팅 언어로 애니메이션을 코딩해야 했습니다. CSS3는 디자인 레이어에 여러 애니메이션 기능을 추가합니다. W3C는 여전히 다른 애니메이션 기술 간의 호환성 문제를 해결하기 위해 웹 애니메이션 표준을 작업 중입니다.

CSS3는 텍스트 섹션을 신문처럼 읽을 수 있도록 여러 열로 분할하는 기능을 추가합니다. CSS2 사양에서 웹 개발자는 표준이 텍스트를 자동으로 분할하는 기능을 갖추고 있지 않기 때문에 다중 열 텍스트 섹션을 구성하는 데 어려움을 겪습니다. 특히 반응형 디자인을 특징으로 하는 사이트의 경우 기반으로 콘텐츠를 재배열하고 크기를 조정하는 개발 기술 보기 장치의 화면 해상도, 더 큰 모니터를 사용하는 사람들은 가로질러 퍼져 있는 텍스트 행을 읽는 데 어려움을 겪을 수 있습니다. 화면.