< Code diaries />

CSS Pseudo Selectors  CSS는 브라우저가 해석한 HTML DOM 트리구조를 기준으로 HTML tag를 스타일링 합니다.이때에 어떠한 태그를 선택하여 스타일링 할지 선택해야하는데요, 이것을 우리는 셀렉터(선택자)라고 부릅니다.가상클래스(Pseudo Class)는 독립적으로 사용하기 보다, 특정한 태그 뒤에 붙어서 보통 사용하게 됩니다.CSS는 참 많은 셀렉터와 방식이 있는데요, 한번 알아봅시다~! 저는 자주쓰이는 것 위주로만 정리를 해놓을거라, 전체적으로 Selector를 보시려면 w3schools.com 에 잘 정리되어있는 CSS Selector 표를 링크 걸어둘게요~https://www.w3schools.com/cssref/css_selectors.php CSS  Syntax  A. ..

CSS Pseudo Selectors  CSS는 브라우저가 해석한 HTML DOM 트리구조를 기준으로 HTML tag를 스타일링 합니다.이때에 어떠한 태그를 선택하여 스타일링 할지 선택해야하는데요, 이것을 우리는 셀렉터(선택자)라고 부릅니다.가상클래스(Pseudo Class)는 독립적으로 사용하기 보다, 특정한 태그 뒤에 붙어서 보통 사용하게 됩니다.CSS는 참 많은 셀렉터와 방식이 있는데요, 한번 알아봅시다~! 저는 자주쓰이는 것 위주로만 정리를 해놓을거라, 전체적으로 Selector를 보시려면 w3schools.com 에 잘 정리되어있는 CSS Selector 표를 링크 걸어둘게요~https://www.w3schools.com/cssref/css_selectors.php CSS  Syntax  A. ..

CSS Pseudo Selectors  CSS는 브라우저가 해석한 HTML DOM 트리구조를 기준으로 HTML tag를 스타일링 합니다.이때에 어떠한 태그를 선택하여 스타일링 할지 선택해야하는데요, 이것을 우리는 셀렉터(선택자)라고 부릅니다.가상클래스(Pseudo Class)는 독립적으로 사용하기 보다, 특정한 태그 뒤에 붙어서 보통 사용하게 됩니다.CSS는 참 많은 셀렉터와 방식이 있는데요, 한번 알아봅시다~! 저는 자주쓰이는 것 위주로만 정리를 해놓을거라, 전체적으로 Selector를 보시려면 w3schools.com 에 잘 정리되어있는 CSS Selector 표를 링크 걸어둘게요~https://www.w3schools.com/cssref/css_selectors.php CSS  Syntax  A. ..

CSS Selectors  CSS는 브라우저가 해석한 HTML DOM 트리구조를 기준으로 HTML tag를 스타일링 합니다.이때에 어떠한 태그를 선택하여 스타일링 할지 선택해야하는데요, 이것을 우리는 셀렉터(선택자)라고 부릅니다.CSS는 참 많은 셀렉터와 방식이 있는데요, 한번 알아봅시다~! 저는 자주쓰이는 것 위주로만 정리를 해놓을거라, 전체적으로 Selector를 보시려면 w3schools.com 에 잘 정리되어있는 CSS Selector 표를 링크 걸어둘게요~https://www.w3schools.com/cssref/css_selectors.php CSS  Syntax   A. 태그 선택자- 태그선택자는 말 그대로 태그명을 직접적어서 선택하는 것입니다.- 아래처럼 문서의 모든 태그의 글자색을 're..

@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;}