CSS2와 CSS3의 차이점

CSS3의 주요 변경 사항 이해하기

CSS2와 CSS3 의 가장 큰 차이점은 CSS3 가 모듈이라고하는 다른 섹션으로 나뉘어져 있다는 것입니다. 각 모듈은 권장 프로세스의 여러 단계에서 W3C를 통해 진행되고 있습니다. 이 과정을 통해 CSS3의 다양한 부분이 다른 제조업체의 브라우저에서 허용되고 구현되는 것이 훨씬 쉬워졌습니다.

이 과정을 CSS2에서 일어난 일과 비교하면 모든 정보가 모든 CSS (Cascading Style Sheets) 정보가 포함 된 단일 문서로 제출 된 것이므로 권장 사항을 더 작은 개별 조각으로 나눌 수 있다는 이점이 있습니다. 각 모듈은 개별적으로 작업하기 때문에 CSS3 모듈에 대한 브라우저 지원 범위가 훨씬 넓습니다.

새롭고 변화하는 사양과 마찬가지로 최대한 많은 브라우저와 운영 체제에서 CSS3 페이지를 철저히 테스트하십시오. 목표는 모든 브라우저에서 똑같이 보이는 웹 페이지를 만드는 것이 아니라, CSS3 스타일을 포함하여 사용하는 모든 스타일이 브라우저를 지원하는 브라우저에서 멋지게 보이고 이전 브라우저에서 정상적으로 뒤집어 지도록하는 것입니다. 하지 마라.

새로운 CSS3 셀렉터

CSS3는 새로운 CSS 선택기로 CSS 규칙을 작성할 수있는 새로운 방법과 새로운 결합 자 및 새로운 의사 요소를 제공합니다.

3 개의 새로운 속성 선택자 :

• 속성 시작은 정확히 일치하는 요소입니다 [foo ^ = "bar"] 요소는 "bar"로 시작하는 foo라는 속성을가집니다.
• 속성 끝은 정확하게 일치하는 요소 [foo $ = "bar"] 요소는 foo라는 속성이 "bar"로 끝납니다.
• 속성은 일치 요소를 포함합니다 [foo * = "bar"] 요소는 문자열 "bar"를 포함하는 foo라는 속성을가집니다.

16 개의 새로운 가상 클래스 :

• :뿌리
  • 문서의 루트 요소입니다. HTML에서는 항상 그렇습니다.
• : n 번째 자식 (n)
  • 정확한 하위 요소를 일치 시키거나 변수를 사용하여 일치하는 항목을 찾으려면이 옵션을 사용하십시오.
• : nth-last-child (n)
  • 마지막 자식 요소부터 세는 정확한 자식 요소와 일치시킵니다.
• : n 번째 유형 (n)
  • 형제 요소를 문서 트리에서 같은 이름으로 일치시킵니다.
• : n 번째 마지막 타입 (n)
  • 동일한 이름을 가진 형제 요소를 맨 아래부터 세 어서 매치하십시오.
• :막내
  • 부모의 마지막 자식 요소와 일치시킵니다.
• : 첫 번째 유형
  • 해당 유형의 첫 번째 형제 요소를 찾습니다.
• : last-of-type
  • 해당 유형의 마지막 형제 요소와 일치시킵니다.
• : 유일한 자식
  • 부모의 유일한 자식 인 요소와 일치시킵니다.
• : 유일한 유형
  • 그 유형의 유일한 요소와 일치시킵니다.
• :빈
  • 자식 (텍스트 노드 포함)이없는 요소와 일치시킵니다.
• :목표
  • 참조 URI의 대상인 요소를 찾습니다.
• : 사용
  • 요소가 사용 설정되면 일치시킵니다.
• : 사용 중지됨
  • 요소가 사용 중지되면 일치시킵니다.
• : 확인 됨
  • 요소가 선택되면 일치시킵니다 (라디오 버튼 또는 확인란).

• : not (s)
  • 요소가 단순 선택자 s와 일치하지 않을 때 일치.

새로운 조합 자 하나 :

• elementA ~ elementB
  • elementB가 elementA 다음에 오는 경우 반드시 일치해야합니다.

새 속성

CSS3는 또한 많은 새로운 CSS 속성을 도입했습니다. 이러한 속성 중 많은 부분이 Photoshop과 같은 그래픽 프로그램과 더 많은 연관성이있는 시각적 스타일을 만드는 것이 었습니다. border-radius 나 box-shadow와 같은 이들 중 일부는 CSS3이 도입 된 이후로 소개되었습니다. flexbox 나 CSS Grid와 같은 다른 것들은 여전히 ​​CSS3 추가로 간주되는 새로운 스타일입니다.

CSS3에서는 상자 모델이 변경되지 않았습니다. 그러나 상자의 배경과 테두리를 스타일링하는 데 도움이되는 새로운 스타일 속성이 많이 있습니다.

여러 배경 나는 마법사들

배경 이미지, 배경 위치 및 배경 반복 스타일을 사용하면 여러 배경 이미지를 상자 안에 서로 겹쳐서 지정할 수 있습니다. 첫 번째 이미지는 사용자에게 가장 가까운 레이어이며 뒤에 오는 레이어가 그려져 있습니다. 배경색이 있으면 모든 이미지 레이어 아래에 그려집니다.

새 배경 스타일 속성

CSS3에는 새로운 배경 속성도 있습니다.

• 배경 클립
  • 이 속성은 배경 이미지를 잘라내는 방법을 정의합니다. 기본값은 경계 상자이지만 패딩 상자 나 내용 상자로 변경할 수 있습니다.
• 배경 출처
  • 이 속성은 배경이 패딩 상자, 테두리 상자 또는 콘텐츠 상자에 있어야하는지 여부를 결정합니다.
• 배경 크기
  • 이 속성을 사용하면 배경 이미지의 크기를 나타낼 수 있습니다. 그것은 당신이 페이지에 맞게 작은 이미지를 늘릴 수 있습니다.

기존 배경 스타일 속성의 변경 사항

기존 배경 스타일 속성을 약간 변경했습니다.

• 배경 반복
  • 이 속성에는 space와 round의 두 가지 새로운 값이 있습니다. 빈 공간은 타일링 된 이미지를 클립하지 않고 상자 내에 고르게 배치합니다. 라운드는 배경 이미지의 크기를 재조정하여 상자에 전체 횟수로 바둑판 식으로 배열합니다.
• 배경 부착
  • 요소에 스크롤 막대가있을 때 요소의 내용으로 배경이 스크롤되도록 "local"이라는 새 값이 추가됩니다.
• 배경
  • 배경 약식 속성은 크기 및 원점 특성을 추가합니다.

CSS3 테두리 속성

CSS3 테두리는 우리가 익숙한 스타일 (솔리드, 더블, 파선 등)이거나 이미지 일 수 있습니다. 또한 CSS3는 둥근 모서리를 만드는 기능을 제공합니다. 테두리 이미지는 네 가지 테두리 모두의 이미지를 만든 다음 CSS에 해당 이미지를 테두리에 적용하는 방법을 알려주기 때문에 흥미 롭습니다.

새 테두리 스타일 속성

CSS3에는 몇 가지 새로운 테두리 속성이 있습니다.

• 국경 - 반경
  • border-top-right-radius , border-bottom-right-radius , border-bottom-left-radius , border-top-left-radius
  • 이 속성을 사용하면 테두리에 둥근 모서리를 만들 수 있습니다.
• border-image-source
  • 이미 정의 된 테두리 스타일 대신 사용할 이미지 원본 파일을 지정합니다.
• border-image-slice
  • 경계 이미지 가장자리로부터의 내부 오프셋을 나타냅니다.
• border-image-width
  • 테두리 이미지의 너비 값을 정의합니다.
• 국경 이미지 시작
  • 테두리 이미지 영역이 테두리 상자를 넘어서 확장되는 크기를 지정합니다.
• 보더 - 이미지 - 스트레치
  • 테두리 이미지의 측면과 가운데 부분을 타일링하거나 크기를 조정하는 방법을 정의합니다.
• 국경 이미지
  • 모든 테두리 이미지 속성에 대한 속기 속성입니다.

테두리 및 배경과 관련된 추가 CSS3 속성

페이지 나누기, 줄 바꿈 (인라인 요소의 경우)에 대한 열 나누기에서 상자가 끊어지면 box-decoration-break 속성은 새 상자가 테두리 및 패딩으로 둘러싸인 방식을 정의합니다. 이 속성을 사용하여 여러 개의 깨진 상자간에 배경을 나눌 수 있습니다.

또한 상자 요소에 그림자를 추가하는 데 사용할 수있는 상자 그림자 속성이 있습니다.

CSS3를 사용하면 테이블이나 복잡한 div 태그 구조가없는 여러 열이있는 웹 페이지를 쉽게 설정할 수 있습니다. 당신은 단순히 body 요소가 가지고 있어야하는 컬럼의 수와 얼마나 넓은지를 브라우저에 알려주는 것입니다. 또한 테두리 (규칙), 열의 높이에 걸쳐있는 배경색을 추가 할 수 있으며 텍스트가 모든 열을 자동으로 흐르게됩니다.

CSS3 열 - 열의 수와 너비 정의

열의 수와 너비를 정의 할 수있는 세 가지 새로운 속성 이 있습니다.

• 열 너비
  • 열이 있어야하는 너비를 정의합니다. 그러면 브라우저는 텍스트를 넓은 열로 공백을 채 웁니다.
• 열 개수
  • 페이지의 열 수를 정의합니다. 그러면 브라우저는 공간에 맞게 열 너비를 지정하지만 지정한 수만 만듭니다.
• 기둥
  • 너비 또는 수 (또는 둘 다를 정의 할 수 있지만 거의 이해할 수없는)를 정의 할 수있는 속기 속성.

CSS3 열 간격 및 규칙

간격 및 규칙은 동일한 다중 열 시나리오의 열 사이에 배치됩니다. 간격이 열을 밀어 부치지 만 규칙은 공간을 차지하지 않습니다. 열 규칙이 간격보다 넓 으면 인접한 열과 겹칩니다. 컬럼 규칙과 갭을위한 5 개의 새로운 속성이 있습니다 :

• 칼럼 갭
  • 열 사이의 갭 너비를 정의합니다.
• 열 규칙 색
  • 규칙의 색상을 정의합니다.
• 칼럼 - 규칙 - 스타일
  • 규칙 스타일 (솔리드, 점선, 더블 등)을 정의합니다.
• column-rule-width
  • 규칙의 너비를 정의합니다.
• 칼럼 룰
  • 한 번에 세 개의 열 속성을 모두 정의하는 속기 속성입니다.

CSS3 열 나누기, 스패닝 열 및 채우기 열

열 나누기 는 페이지 된 내용의 구분을 정의하는 데 사용되는 것과 동일한 CSS2 옵션을 사용하지만 세 가지 새로운 속성 인 break-before , break-after 및 break-inside를 사용 합니다.

테이블과 마찬가지로 column-span 속성을 사용하여 열을 확장하도록 요소를 설정할 수 있습니다. 이렇게하면 신문과 같이 여러 열에 걸쳐 헤드 라인을 만들 수 있습니다.

채우기 열은 각 열의 내용량을 결정합니다. 균형 잡힌 열은 각 열에 동일한 양의 콘텐츠를 넣으려고하지만 자동 열은 콘텐츠가 가득 찰 때까지 흐르게하고 다음 열로 이동합니다.

CSS2에 포함 된 CSS3의 추가 기능

CSS2에는 CSS3에는 없었던 다음과 같은 추가 기능이 많이 있습니다.

• CSS 템플릿 레이아웃 모듈 및 CSS3 그리드 위치 모듈 : CSS로 그리드 생성.
• CSS3 텍스트 모듈 : 텍스트를 윤곽 처리하고 심지어 CSS로 드롭 섀도우를 만듭니다.
• CSS3 컬러 모듈 : 이제 불투명도가 있습니다.
• 상자 모델의 변경 사항 : IE 태그와 같은 역할을하는 선택 윤곽 속성을 포함합니다.
• CSS3 사용자 인터페이스 모듈 : 새로운 커서, 액션에 대한 응답, 필수 입력란 및 요소 크기 조정을 제공합니다 .
• 미디어 쿼리 : 미디어 쿼리를 사용하면 스타일 시트를 사용하는 방법을 정의 할 때보다 융통성있게 사용할 수 있습니다. 예를 들어 뷰포트가 20em보다 큰 핸드 헬드 장치에만 사용할 수있는 스타일 시트를 정의 할 수 있습니다.
• CSS3 Ruby 모듈 : 문서에 주석을 달기 위해 텍스트 루비를 사용하는 언어를 지원합니다.
• CSS3 페이징 된 미디어 모듈 : 페이징 된 미디어 (용지, 투명 필름 등)를 훨씬 더 지원합니다.
• 생성 된 컨텐트 : L, 특히 페이지 된 미디어에 대해 프로그래밍 방식으로 생성 된 머리글 과 바닥 글, 각주 및 기타 컨텐트.
• CSS3 음성 모듈 : 청각적인 CSS의 변경.