지인의 헬로우월드

See the Pen Untitled by 손지인 (@tlyifual-the-bold) on CodePen.

- HTML

<label for="agree1" class="radio_box">
	<input type="radio" id="agree1" name="agree" value="동의" checked="checked" />
	<span class="on"></span>
	동의
</label>
<label for="agree2" class="radio_box">
	<input type="radio" id="agree2" name="agree" value="미동의" />
	<span class="on"></span>
	미동의
</label>

- CSS

.radio_box { display: inline-block; *display: inline; *zoom: 1; position: relative; padding-left: 25px; margin-right: 10px; cursor: pointer; font-size: 14px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

/* 기본 라디오 버튼 숨기기 */
.radio_box input[type="radio"] { display: none; }

/* 선택되지 않은 라디오 버튼 스타일 꾸미기 */
.on { width: 20px; height: 20px; background: #ddd; border-radius: 50%; position: absolute; top: 0; left: 0; }

/* 선택된 라디오 버튼 스타일 꾸미기 */
.radio_box input[type="radio"]:checked + .on { background: #f86480; }
.on:after { content: ""; position: absolute; display: none; }
.radio_box input[type="radio"]:checked + .on:after { display: block; }
.on:after { width: 10px; height: 10px; background: #fff; border-radius: 50%; position: absolute; left: 5px; top: 5px; }

Reference
https://webdee.tistory.com/55

- 스크롤바 커스텀

각 아래에 대한 CSS 코드를 추가해 주면 커스텀을 할 수 있다.

• ::-webkit-scrollbar : 스크롤바 영역에 대한 설정
• ::-webkit-scrollbar-thumb : 스크롤바 막대에 대한 설정
• ::-webkit-scrollbar-track  : 스크롤바 뒷 배경에 대한 설정

* 영역::코드로 적용 대상을 제한하여 사용할 수 있다.

See the Pen Untitled by 손지인 (@tlyifual-the-bold) on CodePen.

- CSS

body::-webkit-scrollbar {
    width: 15px;  /* 스크롤바의 너비 */
}

body::-webkit-scrollbar-thumb {
    height: 10%; /* 스크롤바의 길이 */
    background: #BA55D3; /* 스크롤바의 색상 */
    
    border-radius: 10px;
}

body::-webkit-scrollbar-track {
    background: rgba(88, 50, 120, .1);  /*스크롤바 뒷 배경 색상*/
}

- 참고로 IE(익스플로러) 환경에서는 적용이 안될 수 있다고 한다.

Reference
https://gurtn.tistory.com/120