< Code diaries />

@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..

CSS(Cascading Style Sheet)  CSS는 HTML 웹문서를 스타일링 하기위해 만들어진 언어입니다.Cascading은 '계단식'이라는 뜻인데, style의 선언문이 계속 겹쳐져 우선순위를 따르고 있는 모습을 표현 한 것 같습니다.CSS를 HTML문서에 적용시키는 방법은 총 3가지 입니다.Inline(인라인) 선언 방식 : 태그에 직접적으로 style이라는 속성(Attribute)을 이용하여 넣는 방법입니다. Javascript로 css를 제어할때에 인라인방식으로 적용됩니다. Internal(내부) 선언 방식 : ...-  HTML의 ...-  css폴더 아래에 style.css 파일로 만들어 HTML문서에 링크하는 방식입니다.- 이 방법이 프로젝트를 할때에 가장 많이 쓰이는 방식이며,..