< 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문서에 링크하는 방식입니다.- 이 방법이 프로젝트를 할때에 가장 많이 쓰이는 방식이며,..

Javascript에서 CSS 변수 다루는 방법을 한번 알아봅시다~  먼저, CSS 변수선언은 아래와 같이 보통 :root에 선언합니다.하위 선택자들이 모두 사용할 수 있도록 하기위함입니다.   1. CSS 내에 변수 선언하기, CSS에서 사용하기// 변수선언:root { --primary : tomato; } // 변수의 값을 사용할때에는 var() css메소드 사용 .wrap { color:var(--primary) }   2. Javascript에서 CSS의 변수값을 가져오기const docs = document.documentElement; const value = getComputedStyle(docs).getPropertyValue('--primary') console.log(value..

HTML(Hyper Text Markup Language)   기본 사용법과 접근방식 등 HTML의 기본적인 내용을 살펴봅시다.  01. Media 및 기타 태그TagDescriptionMeaning동영상 파일을 넣을 수 있는 태그이다. 오디오 파일을 넣을 수 있는 태그이다. 다른 웹문서를 현재문서에 창을 만들어 보여줄 수 있는 태그이다.종료태그가 있지만 컨텐츠를 포함할 수없으니 주의하자.  같이 사용된다. 태그 내에서 클릭가능한 요약 제목이다.1. Tag-  2. Tag-   3. Tag- 4. , Tag- 아래의 예제를 따라해 보세요See the Pen Html - by Jey Lee (@Jey-Lee-the-sasster) on CodePen.      본 문서는 제가 오랫동안 일해왔던 ..