2021년 이후 생겨난 CSS의 새 기능 모음

이 글을 시작하며과거에 CSS는 CSS1, CSS2라는 버전명을 붙여 주기적으로 릴리즈가 되었습니다. 하지만 점점 더 빠르고 복잡하게 변화하는 웹/모바일 환경에 대응하기 위해 CSS도 발 빠르게 대처해야 했습니다. CSS3 이후로는 버전으로 공개하지 않고 속성별로 새 기능을 발표하고 있습니다. 현업에 있는 분들은 CSS3이 공개 됐을 때, "HTML5와 CSS3을 배워야지!"하고 신기술을 습득하셨을 겁니다. 그런데 이렇게 속성이 하나씩 공개되다 보니, 한참 후에 그 소식을 접하는 일이 빈번하게 일어날 것이라 생각합니다. 그리하여 새로운 속성에 대한 안내글을 모아보는 포스트가 필요할 것 같아 이 글을 작성하게 됐습니다.CSS의 새 기능:is() 선택자2024.09.27 - [HTML&CSS] - CSS :..

• topic HTML&CSS
• · 2024. 9. 27.
• textsms

CSS :is() 선택자

CSS :is() 선택자가 없던 시절의 코드CSS에서 :is()와 :where() 선택자를 내놓기 전까지는 무수히 많은 중복 코드가 발생했습니다. 아래와 같이 모든 요소를 콤마로 연결해 디자인을 작성해야 했습니다.aside h1,aside h2,aside h3,article h1,article h2,article h3 { color:darkblue; } CSS :is() 선택자 사용법:is() 선택자는 :where() 선택자와 마찬가지로 여러 선택자를 그룹화하여 코드를 간결하게 만들어줍니다. :is() 선택자는 괄호 안에 쉼표로 구분하여 여러 요소를 인자로 받습니다. 사용법은 :where()와 완전히 동일합니다.:is(p, ul, ol) { margin:0; padding:0; } 위 코드는 , , 태..

• topic HTML&CSS
• · 2024. 9. 27.
• textsms

CSS :where() 선택자

:where() 선택자가 없던 시절의 CSS 코드CSS에서 유용한 선택자를 많이 릴리즈하는 것은 무척 반가운 일입니다. :where() 선택자는 CSS 코딩 시 엘리먼트나 클래스를 콤마로 연결해 코드 효율성을 해치는 것을 해소해 주는 일을 합니다..article h1,.article h2,.article h3,.sidebar h1,.sidebar h2,.sidebar h3 { margin:0; padding:0; }기존 코드는 위와 같이 h1~h3 엘리먼트에 동일하게 패딩, 마진을 없애고 싶다면 콤마로 연결을 해야 합니다. 엘리먼트의 h1~h3에도 동일한 규칙을 적용시키고 싶다면, 콤마로 연결된 요소를 3개를 추가해야겠지요. 콤마를 잘못 찍거나, 한 줄을 누락시킨다면 너무 사소해서 잘 찾기 힘든 오류가..

• topic HTML&CSS
• · 2024. 9. 26.
• textsms

CSS :not() 선택자 (~이 아닐 때)

:not() 선택자의 뜻과 기본 사용법CSS :not() 선택자는 특정 조건에 일치하지 않은 요소를 선택하는 데 사용합니다. 아래 코드와 같이 괄호 안에 특정 조건을 입력하는 방식입니다. // p 태그가 아닌 요소:not(p) { margin:0; }// .last 요소가 아닌 divdiv:not(.last) { margin-bottom:20px; } :not 선택자의 응용괄호 안에 HTML 엘리먼트를 작성하거나, 클래스/Id 네임을 작성하는 방식으로도 작성하지만 조금 더 복합적으로 사용할 수 있습니다. 아래 코드와 같이 콤마로 여러 조건 값을 쓰거나 [disabled], [readonly] 처럼 상태를 쓸 수 있습니다.  See the Pen Untitled by flexbox (@flex-gro..

• topic HTML&CSS
• · 2024. 9. 25.
• textsms

[CSS] 근접, 자식요소에 따라 부모요소를 제어할 때 :has()

:has() 선택자는 언제 필요한가요?코드를 작성하다보면 근접요소, 자식요소에 따라 특정 엘리먼트의 디자인을 제어해야 할 때가 있습니다. 그동안의 CSS는 근접요소, 자식요소만 컨트롤이 가능했습니다. 부모/상위 요소를 제어하기 위해서는 자바스크립트를 이용해야만 했습니다. 이제는 상위에 있는 요소를 제어할 수 있는 방법이 생겼습니다. 예를 들어서 제목+본문으로 된 구성과 제목+부연설명+본문으로 구성된 박스가 혼용된 디자인을 만들어보겠습니다.  제목 아래에 margin을 20픽셀로 주었습니다. 그런데 인접한 p태그에 부연설명이 들어간다면 태그 아래의 마진은 5픽셀, 부연설명 태그의 마진을 20픽셀 주어야 합니다. 해결책은 여러 가지가 있습니다. 에는 여백을 주지 않고 본문용 태그 상단에 여백을 주는 것..

• topic HTML&CSS
• · 2024. 9. 16.
• textsms

CSS의 중첩 (CSS nesting)

CSS 중첩이란?CSS 중첩이란 스타일 규칙을 HTML 요소에 적용할 때 부모 요소의 스타일이 자식 요소에 영향을 미치는 방식을 말합니다. 중첩된 구조는 가독성을 높이고 스타일을 보다 체계적으로 관리하는 데 유용합니다. CSS로 중첩을 이용해 코드를 작성할 때에는 선택자를 이용하는 방법이 있습니다..box { display:flex; gap:10px;}.box .item { border:1px solid #ddd; }.box .item p { margin-bottom:10px; } .box 클래스를 가진 요소의 자식인 .item 클래스를 가진 요소에만 스타일이 적용됩니다. 부모 요소-자식 요소의 스타일이 중첩된 방식으로 표현한 것입니다. 그동안의 CSS는 위와 같은 방식으로만 중첩을 허용했습니다.  CS..

• topic HTML&CSS
• · 2024. 9. 16.
• textsms