이 글을 시작하며
과거에 CSS는 CSS1, CSS2라는 버전명을 붙여 주기적으로 릴리즈가 되었습니다. 하지만 점점 더 빠르고 복잡하게 변화하는 웹/모바일 환경에 대응하기 위해 CSS도 발 빠르게 대처해야 했습니다. CSS3 이후로는 버전으로 공개하지 않고 속성별로 새 기능을 발표하고 있습니다.
현업에 있는 분들은 CSS3이 공개 됐을 때, "HTML5와 CSS3을 배워야지!"하고 신기술을 습득하셨을 겁니다. 그런데 이렇게 속성이 하나씩 공개되다 보니, 한참 후에 그 소식을 접하는 일이 빈번하게 일어날 것이라 생각합니다.
그리하여 새로운 속성에 대한 안내글을 모아보는 포스트가 필요할 것 같아 이 글을 작성하게 됐습니다.
CSS의 새 기능
:is() 선택자
2024.09.27 - [HTML&CSS] - CSS :is() 선택자
CSS :is() 선택자
CSS :is() 선택자가 없던 시절의 코드CSS에서 :is()와 :where() 선택자를 내놓기 전까지는 무수히 많은 중복 코드가 발생했습니다. 아래와 같이 모든 요소를 콤마로 연결해 디자인을 작성해야 했습니다
flexbox.tistory.com
:where() 선택자
2024.09.26 - [HTML&CSS] - CSS :where() 선택자
CSS :where() 선택자
:where() 선택자가 없던 시절의 CSS 코드CSS에서 유용한 선택자를 많이 릴리즈하는 것은 무척 반가운 일입니다. :where() 선택자는 CSS 코딩 시 엘리먼트나 클래스를 콤마로 연결해 코드 효율성을 해치
flexbox.tistory.com
:not() 선택자
2024.09.25 - [HTML&CSS] - CSS :not() 선택자 (~이 아닐 때)
CSS :not() 선택자 (~이 아닐 때)
:not() 선택자의 뜻과 기본 사용법CSS :not() 선택자는 특정 조건에 일치하지 않은 요소를 선택하는 데 사용합니다. 아래 코드와 같이 괄호 안에 특정 조건을 입력하는 방식입니다. // p 태그가 아닌
flexbox.tistory.com
:has() 선택자
2024.09.16 - [HTML&CSS] - [CSS] 근접, 자식요소에 따라 부모요소를 제어할 때 :has()
[CSS] 근접, 자식요소에 따라 부모요소를 제어할 때 :has()
:has() 선택자는 언제 필요한가요?코드를 작성하다보면 근접요소, 자식요소에 따라 특정 엘리먼트의 디자인을 제어해야 할 때가 있습니다. 그동안의 CSS는 근접요소, 자식요소만 컨트롤이 가능했
flexbox.tistory.com
CSS의 중첩(Nesting)
2024.09.16 - [HTML&CSS] - CSS의 중첩 (CSS nesting)
CSS의 중첩 (CSS nesting)
CSS 중첩이란?CSS 중첩이란 스타일 규칙을 HTML 요소에 적용할 때 부모 요소의 스타일이 자식 요소에 영향을 미치는 방식을 말합니다. 중첩된 구조는 가독성을 높이고 스타일을 보다 체계적으로 관
flexbox.tistory.com
CSS의 변수(Variables)
2024.09.15 - [HTML&CSS] - CSS의 변수(Variables)
CSS의 변수(Variables)
변수란? 변하는 값을 '변수'라고 합니다. 부가세를 계산하는 프로그램을 만든다고 예를 들어보겠습니다.부가세 = 입력 금액 * 0.1 금액을 입력하면 0.1을 곱해서 부가세가 얼마인지 계산을 해주
flexbox.tistory.com
CSS 브라우저별 호환성 조회 방법 (caniuse.com)
브라우저 호환성을 표시해주는 웹사이트는 많이 있습니다.
대표적으로 모질라재단에서 제공하는 https://developer.mozilla.org/ko/docs/Web/CSS 가 있습니다.
제가 추천하고 싶은 사이트는 caniuse입니다.
Can I use... Support tables for HTML5, CSS3, etc
caniuse.com
일단 궁금한 속성을 큰 검색창에 입력합니다.
그러면 아래에 결과가 표시됩니다. 이 정보도 좋지만, 우리는 얼마나 오래전부터 이 속성이 호환되었는지가 궁금합니다. 너무 최근 브라우저에서만 호환이 된다면 아직은 사용하기에 시기상조란 뜻이기도 하니까요.
아래 그림을 자세히 봐주시기 바랍니다. [Date relative] 버튼을 클릭하면 호환성 정보가 연도별-버전별로 연결되어 나타납니다. 그러면 얼마나 오래전에 이 속성이 사용가능했는지 알 수 있도록 동그라미가 가득한 표가 펼쳐집니다.
이 정보가 굉장히 유용하게 사용될 것이라 생각합니다.
추후 또 새로운 속성이 나온다면 별도의 포스트를 하고 이 목록을 업데이트할 예정입니다.
'HTML&CSS' 카테고리의 다른 글
| flexbox 레이아웃에서 flex-basis와 width의 차이 (0) | 2025.03.22 |
|---|---|
| [flexbox] 레이아웃을 잡을 때 사용하는 flex 속성 (0) | 2024.10.07 |
| CSS :is() 선택자 (0) | 2024.09.27 |
| CSS :where() 선택자 (0) | 2024.09.26 |
| CSS :not() 선택자 (~이 아닐 때) (1) | 2024.09.25 |