< Code diaries />

오늘  HTML 소스에서 data-* 속성을 적는다.text  CSS에서 attr() 을 이용하여 불러들일 수 있다.attr()은 content에서만 사용할 수 있으며, 동적으로 요소의 속성 값을 가져올 수 있음.h1::after { content: attr(data-title); color: red; font-size: 16px;}// 결과 helloh1::before { content: "Prefix - " attr(data-title); font-weight: bold; color: blue;}// 결과 "Prefix - hello"h1::after { content: " (" attr(data-title) ")"; font-size: 14px; color: gray;}// 결과 (..

@property를 사용하면 css변수를 조금 더효율적으로 관리 할 수 있습니다.  1. css 변수 선언 기본방법:root { --primary : tomato;}h1 { color : var(--primary)}이슈 : 변수의 값을 혹시 컬러가 아닌 다른값이 들어가게 되면 아예 컬러가 적용되지 않습니다.  2. @property 사용시@property --primary { syntax : ''; initial-value : tomato ; inherites : false;}h1 { color : var(--primary) // tomato;}h1:hover { --primary : olive;}h1:nth-child(2):hover { --primary : gold;}변수의 기본 값을 지..

거의 모든 브라우저에서 지원되고 있다.h2 { color :#000 ;}:is(section, article) h2 { color : olive;}:is(section,article) :is(header) h2 { color : tomato;}

1. 브라우저의 css 속성 지원여부에 따라 다른 값을 지정할 수 있다.// 모든 브라우저에 적용되는 기본값 지정.wrap { display:flex;}// 만약 브라우저가 grid를 지원한다면@supports(display:grid) { .wrap { display:grid; }}// 만약 브라우저가 flex를 지원하지 않는다면@supports not ( display:flex ) { .wrap { float:left; }}  2. 논리 연산자 사용가능// 부정을 부정하여 무효화 하기 가능@supports not ( not( display:flex ) ) {}// 논리연산자 함께 쓰기// flex와 grid를 둘다 지원하지 않는다면@supports not ( (display:f..