TIL

Today

08:00 기상
10:00 공부

---

항상 써도 새로운 깃..
새로운 github 계정에 항해99를 하면서 했던 프로젝트들을 다시 푸쉬했다.
맥북에서 github 계정 바꾸는건 지난번에 정말 헷갈리고 시간이 오래걸렸는데 한번 익숙해 지니까 이제는 금방금방 하는 것 같다.

CSS Variable

• CSS에서 변수를 정의하고 쓸 수 있는곳은 어디에서나 가능하다.
• --를 사용해서 만든다.
• 항상 var를 사용해서 사용한다.

<style>
	.first-list{
    	--font-size: 32px;
        font-size: var(--font-size)
    }
</style>

• 보통 루트에서 변수를 정의해서 모든 요소들이 접근 할 수 있도록 사용한다.
• media query를 사용할 때 유용하게 사용 할 수 있다.
• var 에서 정의 된 값이 없다면, 기본값을 따로 정해서 사용 할 수도 있다.

<style>
	:root {
    	--background-color: thistle;
        --text-color: whitesmoke;
        --base-space: 8px;
    }
    
    .first-list {
    	...
        margin-left: var(--base-space, 8);
    }
    
    .second-list {
    	background-color: var(--background-color);
        color: var(--text-color);
        margin-left: calc(var(--base-space) * 2);
    }
    
    @media screen (max-width: 768px){
    	:root {
    	--background-color: salmon;
        --text-color: blue;
        --base-space: 4px;
    }
    }
</style>

HTML Data-

• data attribute 추가하기
• data 속성 값을 사용해서 css를 추가해 줄 수 있다. []를 사용.
• 자바스크립트에서도 적용이 가능하다.
• 보안에 조심해야 하는 요소들은 DOM안에 보관하는 것은 안좋다.

<style>
	div[data-display-name='test'] {
    	background-color: beige;
    }
</style>


<div data-index="1" data-display-name="test"></div>
<div data-index="2" data-display-name="test2"></div>

<script>
	const test = document.querySelector('div[data-display-name="test"]');
    console.log(test.dataset);
</script>