[요약] 요즘 CSS 미쳤습니다...! 2023 최신 기능 쌉정리 :: with AI

> English Summary

> English Full Text

 

[ 요약 ]

이 글에서는 잘 알려지지 않은 5가지 CSS 규칙, 함수 및 의사 클래스에 대해 알아봅니다.
"@support" 규칙을 사용하면 브라우저가 기능을 지원하는지 여부에 따라 실행되는 조건부 CSS 코드를 작성할 수 있습니다.
이 규칙은 not 연산자와 함께 사용할 수 있으며, "and" 및 "or" 연산자를 사용하여 조건을 결합할 수도 있습니다.
선택자 기능을 사용하면 선택자의 지원 여부를 테스트할 수 있습니다.
8번째 자식 의사 클래스를 사용하면 목록에서 특정 항목을 선택할 수 있으며, 오프 선택기 구문은 목록 내 위치에 따라 항목을 선택합니다.
"@support" 규칙을 사용할 때는 대체 또는 기본값을 제공하는 것이 좋습니다.
이러한 기능을 사용하여 웹사이트 환경을 개선해 보세요.
이 글에서는 잘 알려지지 않은 5가지 CSS 규칙, 함수 및 의사 클래스에 대해 알아봅니다.
"@support" 규칙을 사용하면 브라우저가 기능을 지원하는지 여부에 따라 실행되는 조건부 CSS 코드를 작성할 수 있습니다.
이 규칙은 not 연산자와 함께 사용할 수 있으며, "and" 및 "or" 연산자를 사용하여 조건을 결합할 수도 있습니다.
선택자 기능을 사용하면 선택자의 지원 여부를 테스트할 수 있습니다.
8번째 자식 의사 클래스를 사용하면 목록에서 특정 항목을 선택할 수 있으며, 오프 선택기 구문은 목록 내 위치에 따라 항목을 선택합니다.
"@support" 규칙을 사용할 때는 대체 또는 기본값을 제공하는 것이 좋습니다.
이러한 기능을 사용하여 웹사이트 환경을 개선해 보세요.
이 글에서 저자는 웹 개발자를 위한 세 가지 고급 CSS 기술에 대해 설명합니다.
첫 번째 기법은 목록에서 특정 요소를 선택하기 위해 :nth-child() 선택자 구문을 사용하는 것입니다.
두 번째 기법은 :is() 의사 클래스 함수를 사용하여 목록의 선택기와 일치하는 요소를 선택하는 것입니다.
저자는 이 기법이 코드를 간소화하며 모든 주요 브라우저에서 지원된다고 설명합니다.
마지막 기법은 속성 CSS 규칙을 사용하는 것인데, 이 규칙은 실험적이지만 CSS 변수 사용을 강화하는 데 강력합니다.
이 규칙을 활용하면 개발자는 프로퍼티 이름을 지정하고 초기 값을 할당하고 상속 여부를 결정할 수 있습니다.
저자는 이 기법을 통해 기본값을 재정의하고 쉽게 수정할 수 있는 더 스마트한 CSS 변수를 만들 수 있음을 보여줍니다.
이 글은 개발자가 효율적이고 효과적인 디자인을 만들기 위해 이러한 고급 CSS 기법을 실험해 볼 것을 권장하며 마무리합니다.

 

반응형

 

 

 

CSS is Crazy These Days...! 2023 Latest Features Roundup

https://www.youtube.com/watch?v=HZIcTZABMuc 

 

 

 

[ 한글 전체 ]

오늘은 여러분이 몰랐던 5가지 새로운 CSS 규칙, 함수, 유사 클래스를 소개합니다.
제가 가장 좋아하는 것은 CSS를 프로그래밍 언어처럼 느끼게 해주는 것이니, 어떤 것인지는 영상을 끝까지 보시면 알 수 있습니다.
지원은 "@규칙"으로, 먼저 "@ 기호"를 작성한 다음 규칙의 이름을 작성합니다.
"@지원" 규칙을 사용하면 브라우저가 기능을 지원하는지 여부에 따라 실행되는 조건부 CSS 코드를 작성할 수 있습니다.
"@supports"를 작성하기만 하면 되므로 사용이 간편합니다.
지원 추가 규칙을 사용할 때는 폴백 또는 기본값을 제공한 다음 테스트하려는 속성과 조건부 코드를 제공하는 것이 좋습니다.
여기에서는 페이지의 헤더가 기본적으로 디스플레이 플렉스가 되도록 코드를 작성하는 방법을 볼 수 있습니다.
하지만 CSS 그리드를 지원하는 브라우저에서는 헤더가 디스플레이 그리드가 됩니다.
이렇게 코드를 작성하면 특정 기능을 지원하지 않는 브라우저에서 웹사이트가 깨져 보이지 않도록 할 수 있으며, 지원하는 브라우저에서는 웹사이트가 더욱 보기 좋게 표시될 수 있습니다.
지원 추가 규칙을 사용할 수도 있습니다.
표현식을 무효화하는 not 연산자를 사용하여 규칙을 지원합니다.
예를 들어 브라우저가 테두리 반경을 지원하지 않는 경우 사용자에게 경고를 표시할 수 있습니다.
또한 여러 개의 not 연산자를 연결하여 부정을 무효화할 수 있습니다.
not 연산자 외에도 필요에 따라 결합할 수 있는 "and"와 "or"도 있습니다.
"and" 연산자는 모든 조건이 참인지 확인합니다.
예를 들어 브라우저가 디스플레이 플렉스 및 디스플레이 그리드를 지원하는지 확인할 수 있습니다.
이러한 조건에 해당하지 않으면 경고를 표시합니다.
반면에 "또는" 연산자는 조건 중 하나 이상이 참이면 사용자에게 참으로 평가됩니다.
예를 들어, 이 코드에서는 지금 스크롤 유형이 Microsoft 접두사와 함께 지원되는지 여부를 확인하고 있습니다.
CSS 속성을 테스트하는 것 외에도 선택자 함수를 사용하여 선택자의 지원 여부를 테스트할 수도 있습니다.
여기서는 브라우저가 첫 번째 하위 선택기를 지원하는지 테스트하기 위해 선택기 함수를 사용하고 있습니다.
선택자 함수와 함께 지원 추가 규칙은 현재 모든 주요 브라우저에서 지원됩니다.
속성 및 선택기를 테스트할 수 있다는 것은 목록의 다음 항목과 결합하면 매우 유용합니다.
여덟 번째 자식은 전혀 새롭지 않은 의사 클래스이며 들어 보셨을 것입니다.
예를 들어 목록의 네 번째 항목, 목록의 짝수 항목, 목록의 오래된 항목 또는 5, 10, 15, 20과 같은 목록의 다섯 번째 항목 모두를 선택할 수 있습니다.
이 sudo 클래스의 새로운 기능은 이 코드에서 다음과 같이 보이는 오프 셀렉터 구문으로, "link" 클래스를 가진 모든 자식 중에서 3번을 선택하는 것입니다.
이는 다음과 같은 코드로 수행할 수 있는 "link" 클래스가 있는 3번 항목과 같은 항목을 선택하는 것과는 매우 다릅니다.
즉, 이 HTML과 CSS를 사용하면 두 번째 목록 항목이 두 번째 항목이고 "링크" 클래스도 있기 때문에 두 번째 목록 항목이 선택됩니다.
하지만 이 CSS를 새로운 오프 셀렉터 구문과 함께 사용하면 원하는 결과를 얻을 수 있습니다.
다섯 번째로 적은 항목이 선택됩니다.
클래스가 "link"인 모든 항목 중에서 두 번째 항목이기 때문입니다.
쉼표를 사용하여 다른 선택기를 포함할 수도 있습니다.
선택자 구문의 n번째 자식은 현재 작업 중인 블록이 있는 Firefox를 제외한 모든 주요 브라우저에서 지원됩니다.
목록의 다음 항목은 "is" 의사 클래스 함수입니다.
이 함수는 더 짧고 간결한 코드를 작성하는 데 도움이 됩니다.
이 코드를 예로 들어보겠습니다. 여기에는 18픽셀의 제목이 있습니다.
제목이 안에 있을 때만 제목의 크기를 변경하고 싶었다면...
제목이 섹션, 글 또는 div 안에 있을 때 제목의 크기를 변경하려면 다음과 같은 코드를 작성해야 합니다.
하지만 보기 좋지 않습니다.
이것이 바로 의사 클래스 함수가 해결하고자 만든 문제입니다.
":is" 유사 클래스 함수를 사용하면 동일한 목표를 달성할 수 있습니다.
그러면 코드는 다음과 같습니다.
":is" 유사 클래스 함수는 선택자 목록을 가져와 일치하는 요소를 선택합니다.
문법을 수정하기 위해 수정된 문장은 다음과 같습니다."해당 목록에 있는 선택기를 사용하여 섹션, 기사 또는 div 안에 있는 H1을 선택할 수 있습니다.
두 번째 경우에는 중첩된 요소 안에 있더라도 "ace" 의사 클래스 함수를 연속적으로 사용하여 제목을 가져올 수 있습니다.
이전과 이후의 코드를 비교해보면 의사 클래스 함수를 사용하는 것이 모든 주요 브라우저에서 지원되므로 더 나은 옵션이라는 것을 알 수 있습니다.
다음 항목으로 넘어가서, 제가 가장 좋아하는 것은..."
"Property"라는 또 다른 CSS 규칙은 상당히 실험적이지만 CSS 변수의 사용을 강화하여 더욱 강력하게 만들어 줍니다.
이는 개발자가 브라우저의 렌더링 엔진과 훨씬 더 직접적으로 접촉할 수 있게 해주는 로우레벨 API 그룹인 CSS Houdini 프로젝트의 일부입니다.
CSS 변수를 사용할 때는 변수를 생성한 다음 사용합니다.
이 정도도 괜찮지만 변수에 기본값을 부여하고 재정의할 수 있도록 하는 등 변수를 더 스마트하게 만들 수 있다면 더욱 멋질 것입니다.
이를 위해 "속성 추가 규칙"을 사용하고 속성의 이름을 "기본 색상"으로 지정합니다.
그런 다음 브라우저에 이 프로퍼티가 보유할 값의 유형이 색상임을 알리고 초기 값을 "빨간색"으로 할당합니다.
마지막으로 이 속성을 상속할 수 있는지 여부를 선택할 수 있습니다.
"true"로 설정하면 프로퍼티가 부모로부터 값을 상속하고, 그렇지 않으면 상속하지 않습니다.
새로 정의한 프로퍼티를 사용할 때가 되면 일반 CSS 변수로 사용할 수 있습니다.
나중에 값을 변경하려면 기본 색상 속성을 수정하기만 하면 됩니다.
문법을 수정하기 위해 수정된 문장은 다음과 같습니다."마우스가 링크 위에 있을 때 링크의 색상을 변경하려면 기본 색상 값을 다른 값으로 설정하기만 하면 됩니다.
흥미로운 점은 코드의 마지막 부분에서 발생합니다.
여기서 기본 색상을 색이 아닌 거짓으로 설정하고 있습니다.
그러나 속성 추가 규칙을 사용하고 있기 때문에 기본 색상 값을 초기 값(이 경우 빨간색)으로 다시 설정하는 것입니다.
속성 추가 규칙은 백분율, URL, 변환 함수 등 다른 종류의 구문도 지원할 수 있습니다.
하지만 100%는 아닙니다."
명확하고 정확한 문법을 위해 문장을 수정해야 합니다.
수정 가능한 버전은 다음과 같습니다. 현재 어디에서도 지원되지는 않지만 이미지 함수라는 CSS 함수가 있는데 이 함수는 매우 유용한 기능을 제공합니다.
CSS에서 이미지를 배경으로 설정하면 크기를 사용자 정의하거나 페이지에 맞게 늘릴 수 있습니다.
하지만 이미지를 자를 수는 없습니다.
CSS 이미지 기능을 사용하면 나중에 그 기능을 사용할 수 있을 것입니다.
다음은 수정된 텍스트입니다: 여기서는 Dock의 사진을 불러와 캔버스에 그리고 있습니다.
사진은 이미지의 왼쪽 상단 모서리인 X축과 Y축에서 0에서 시작합니다.
상자를 너비 100픽셀, 높이 200픽셀로 만들고 있습니다.
그 후에는 이미지의 나머지 부분이 잘리고 상자 안쪽 영역만 신체의 배경 이미지가 됩니다.
이 기능이 모든 브라우저에 적용되기를 기다릴 수는 없지만, 사양이 얼마 전에 정의되었기 때문에 큰 기대는 하지 않겠습니다.
12년 이상이 지났으니 이제 댓글로 두 가지를 알려주실 차례입니다.
첫째, 이 새로운 기능 중 가장 마음에 드는 기능은 무엇인가요?
둘째, 이미 알고 계셨던 기능이 있다면 어떤 것이 있나요?
자바스크립트, 파이썬, 리액트, 리액트 네이티브, 골드 다크, 플러터 등을 무료로 배우고 싶다면 아래 링크를 클릭해 저와 함께 지금 바로 무료로 수강할 수 있는 수많은 무료 강좌 중 하나에 참여하기만 하면 된다는 점을 잊지 마세요.
아래 링크를 클릭하시면 그때 뵙겠습니다.
이 영상이 도움이 되셨기를 바랍니다.
다음 영상에서 뵙겠습니다.
안녕히 계세요.

 

 

SMALL

[ English Summary ]

In this article, we learn about five CSS rules, functions, and pseudo-classes that are not well-known.
The "@support" rule allows us to write conditional CSS code that will only run if the browser supports a feature or not.
We can use the rule with the not operator, and also use "and" and "or" operators to combine conditions.
The selector function allows us to test for the support of a selector.
The 8th child pseudo-class allows us to select specific items in a list, and the off selector syntax selects items based on their position within the list.
It is recommended to provide fallbacks or default values when using the "@support" rule.
Try using these features to improve your website's experience.
In this article, we learn about five CSS rules, functions, and pseudo-classes that are not well-known.
The "@support" rule allows us to write conditional CSS code that will only run if the browser supports a feature or not.
We can use the rule with the not operator, and also use "and" and "or" operators to combine conditions.
The selector function allows us to test for the support of a selector.
The 8th child pseudo-class allows us to select specific items in a list, and the off selector syntax selects items based on their position within the list.
It is recommended to provide fallbacks or default values when using the "@support" rule.
Try using these features to improve your website's experience.
In this article, the author discusses three advanced CSS techniques for web developers.
The first technique is using the :nth-child() selector syntax to select specific elements in a list.
The second technique is using the :is() pseudo-class function to select elements that match any selector in a list.
The author explains that this technique simplifies code and is supported in all major browsers.
The final technique is using the property CSS rule, which is experimental but powerful for supercharging the use of CSS variables.
To utilize this rule, developers can name properties, assign initial values, and decide whether they can be inherited.
The author shows that this technique allows for smarter CSS variables that can override defaults and be modified easily.
The article concludes by encouraging developers to experiment with these advanced CSS techniques to create efficient and effective designs.

 

 

 

[ English Full Text ]

And today, I bring you five new CSS rules, functions, and pseudo-classes that you didn't know existed.
My favorite one makes CSS feel a bit more like a programming language, so make sure to watch the video until the end to know which one it is.
The support is an "@rule," which means that you first write the "@ symbol" and then the name of the rule.
The "@support" rule allows you to write conditional CSS code that will run only if the browser supports a feature or not.
It is effortless to use; all we have to do is write "@supports."
It is better to provide fallbacks or default values when using the add support rule, followed by the property we want to test for and our conditional code.
Here, you can see how we write our code so that the header of our page is, by default, a display flex.
However, on browsers that support CSS grid, the header will be a display grid.
By writing our code like this, we can ensure that our website does not look broken on browsers that do not support certain features, and on browsers that do, our website can look even better.
We can also use the add support rule.
Support the rule with the not operator, which negates the expression.
For instance, we can show an alert to the user if the browser does not support border radius.
Additionally, we can chain multiple nots together to negate the negation.
Apart from the not operator, we also have "and" and "or," which we can combine as needed.
The "and" operator checks if all conditions are true.
For example, we can check if the browser supports display flex and display grid.
If these conditions are not true, we show an alert.
To the user, the "or" operator, in contrast, will evaluate to true if at least one of the conditions is true.
For example, in this code, we are checking if the Scrolls now type is supported with the Microsoft prefix or not.
Apart from testing CSS properties, we can also test for the support of a selector using the selector function.
Here, we are using the selector function to test if the browser supports the first child selector.
The add supports rule, along with the selector function, is supported by all major browsers today.
Being able to test for properties and selectors is very useful if you combine it with the next item on our list.
The 8th child is a pseudo-class that isn't new at all, and I am sure you've heard of it.
It allows you to select, for example, the fourth item on a list, the even items on a list, the old items on a list, or all the fifth items on a list like 5, 10, 15, and 20.
What's new about this sudo class is the off selector syntax, which looks like this in this code: out of all the children that have the "link" class, we are selecting number three.
This is very different from selecting something like item number three that also has the "link" class, which can be done with code like this.
In other words, with this HTML and CSS, the second list item would be selected, since it is item number two and also has the "link" class.
However, using this CSS with the new off selector syntax, we can achieve the desired result.
The fifth least item will be selected.
Since out of all the items with the class "link", it is the second one.
You can also use a comma to include other selectors.
The nth child of selector syntax is supported on all major browsers, apart from Firefox, which has a block currently being worked on.
The next item in our list is the "is" pseudo class function.
It helps us write shorter and more compact code.
Take this code, for example: here, we have a title that is 18 pixels.
If I wanted to change the size of the title only when it's inside of a...
If I wanted to change the size of the title when it's inside a section, article, or div, my code would look something like this.
However, it doesn't look good.
This was the problem that the pseudo-class function was created to solve.
By using the ":is" pseudo-class function, we can accomplish the same goal.
Our code then looks like this.
The ":is" pseudo-class function will take a list of selectors and select any of the elements that match.
To fix the grammar, the corrected statement would be:"Any of the selectors on that list can be used to select the H1 that is inside a section, article, or div.
In the second case, we can use the "ace" pseudo-class functions consecutively to get the title, even if it's inside nested elements.
When comparing the code before and after, it's clear that using the pseudo-class function is the better option because it's supported in all major browsers.
Moving on to the next item, my favorite is..."
Another CSS rule called "Property" is fairly experimental, but it supercharges the use of CSS variables, making them more powerful.
It is a part of the CSS Houdini project, which is a group of low-level APIs that enable developers to have much more direct contact with the browser's rendering engine.
When we use CSS variables, we create the variable and then use it.
This is fine, but it would be even cooler if we could make the variables smarter by giving them default values, allowing us to override them, and more.
To achieve this, we use the "add property rule" and name our property "primary color".
Then, we inform the browser that the type of value this property will hold is a color and assign an initial value of "red".
Lastly, we can choose whether this property can be inherited.
If we set it to "true", the property will inherit the value from its parent, otherwise, it won't.
When it's time to use our newly defined property, we can use it as a regular CSS variable.
And if we want to change the value later on, we can simply modify the primary color property.
To fix the grammar, the corrected sentence would be:"To change the color of our link when the mouse is over it, all we have to do is set the value of primary color to something else.
The interesting thing happens at the end of our code.
There, we are setting primary color to false, which isn't a color.
But, what this will do, because we are using the add property rule, is to set the value of primary color back to its initial value, which in our case is red.
The add property rule supports other kinds of syntax as well; it can hold percentages, URLs, transform functions, and many more.
However, it's not a hundred percent."
The sentence needs to be rephrased for clarity and correct grammar.
Here's a possible revised version:Although it's not currently supported anywhere, there is a CSS function called the image function that offers a super sweet feature.
When we set an image as a background in CSS, we can customize its size or stretch it to fit the page.
However, we cannot crop the image.
With the CSS image function, we will be able to achieve that at some future time.
Here's the corrected text: Here we are loading a photo of our Dock and drawing it on a canvas.
The photo starts at zero on the X and Y axis, which is the top left corner of our image.
We are making the box 100 pixels wide and 200 pixels tall.
After that, the rest of the image will be cropped, and only the region inside our box will be the background image of our body.
I can't wait for this to arrive in all browsers, but I wouldn't get my hopes up since the specification was defined some time ago.
More than 12 years have passed, and now it's your turn to let me know in the comments two things.
Firstly, which one of these new features is your favorite?
Secondly, which, if any, did you already know?
Don't forget that if you want to learn JavaScript, Python, React, React Native, Gold Dark, Flutter, and many others for absolutely free, all you have to do is click the link below to join any of our numerous free courses that you can take right now with me for absolutely free.
Click the link below, and I will see you there.
I hope you find the video useful.
See you on the next one.
Bye.