# CSS의 미래 : CSS Toggles

> Clean Markdown view of GeekNews topic #6440. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=6440](https://news.hada.io/topic?id=6440)
- GeekNews Markdown: [https://news.hada.io/topic/6440.md](https://news.hada.io/topic/6440.md)
- Type: news
- Author: [xguru](https://news.hada.io/@xguru)
- Published: 2022-04-26T09:38:40+09:00
- Updated: 2022-04-26T09:38:40+09:00
- Original source: [bram.us](https://www.bram.us/2022/04/20/the-future-of-css-css-toggles/)
- Points: 6
- Comments: 1

## Topic Body

- 현재 비공식 초안이 나왔고, 크로미엄이 프로토타이핑 시작 예정   
- 체크박스/라디오 버튼 같은 DOM 객체의 상태와 CSS를 연결하는 메커니즘   
```  
html {  
  toggle-root: lightswitch; /* 토글 생성. 0 (비활성화, 기본값) 과 1 (활성화)  */  
}  
  
button {  
  toggle-trigger: lightswitch; /* 버튼 클릭시 토글*/  
}  
  
html:toggle(lightswitch) {  
  /* lightswitch 토글이 활성화 되었을 때 적용할 스타일 */  
}  
```  
- 여러개의 토글 생성가능. 1개 이상의 활성화 상태를 가질 수 있고, 꼭 0/1 같은 숫자값이 아니어도 됨   
- 기본값은 0 이지만 오버라이드 가능   
- 한 엘리먼트가 toggle-root 이자 toggle-trigger 인 것도 가능   
- toggle-visibility 를 통해서 토글 값에 따라 엘리먼트 보이기/숨기기 가능   
- toggle-group 으로 그룹핑 가능(탭 인터페이스에 유용)

## Comments



### Comment 9845

- Author: joyfui
- Created: 2022-04-26T10:41:39+09:00
- Points: 1

라디오 버튼을 이용해서 자바스크립트없이 css만으로 탭메뉴 만드는 방법이 있는데 이게 생기면 더 쉬워지겠네요.