[HTML/CSS] 이런 방법도 있었네! + 미세팁

 

 

 

 

잊지말고 써먹자~~!!

퍼블리싱은 알면 알수록 재미있는 세계다.

 

 

 

---

 

 

 

1. border의 max 값을 정해보자.

border: max(2px, 0.1em) solid gray;

 

 

2. cursor 속성에는 not-allowed도 있다.

pointer만 주구장창 사용해왔음..

cursor: not-allowed;

 

 

3. 웹 접근성(accessibility) 측면에서 키보드 사용자를 배려하자.

키보드 포커스가 해당 위치로 오면 포커스 링(ring)이 나타날 수 있도록 한다.

[type="checkbox"]:focus-visible {
    outline-offset: 2px;
    outline: 2px solid tomato;
}

 

 

4. 꾸밈용으로 <img> 태그를 넣는다면 alt는 공백으로 설정한다.

 

5. cursor: pointer;을 사용할 때 참고하자.

해당 엘리먼트를 버튼으로 만들 수도 있다면 <button>을 사용하면 굳이 필요없는 속성을 넣지않아도 된다.

cursor: pointer;

 

6. transition은 상위에만 넣으면 된다.

div {
	opacity: 1;
	transition: opacity 0.3s;
    
	&.is-selected {
		opacity: 1;
		transition: opacity 0.3s; // 여기에는 넣지않는다.
	}
}

 

7. 부모요소가 display:flex; 처리되어 있을 때는 따로 자식 inline 요소에 display 설정을 변경하지 않아도 width 지정이 가능하다.

 

 

 

---

 

 

 

출처

https://www.daleseo.com/css-toggle-switch/

https://github.com/adamculpepper/toggle-switchy/blob/master/toggle-switchy.css

GitHub - adamculpepper/toggle-switchy: A pure CSS toggle switch for form input checkboxes