/* ############################################# :root는 문서의 최상위 요소를 나타내는 특수 선택자 엘리먼트를 가리킨다 :root에 정의한 변수는 문서 전체에서 접근 가능하다 * 변수를 이용해서 컬러 적용하기 * var(--main-bg-color); ############################################*/ :root { --main-bg-color: #607d8b; --sub-bg-color: #6f8c9b; --main-font-wh: #fff; --main-bg-m-grey: #ddd; --footer-bg-color: #666; --footer-font-rgrey: #aaa; --desc-line-color: #e9e9e9; --board-col-hover-color: #e9e9e973; --main-hover-color: #8da4b1; --denger-color: #f44336; } /* ############################################# -- 전체 CSS 적용 ############################################*/ * { margin: 0; padding: 0; border: 0; } html, body { margin: 0 auto; min-width: 100%; background-color: var(--main-bg-m-grey); } :focus { outline: 0; } div { box-sizing: border-box; } a { color: #333; text-decoration: none; outline: none; } a:hover { text-decoration: underline; } button, .btn { border: 1px solid var(--desc-line-color); border-radius: 2px; padding: 0.4rem 0.8rem; cursor: pointer; background-color: #fff; color: var(--main-bg-color); font-weight: bold; } .btn.btn-dk { background-color: var(--main-hover-color); color: var(--main-font-wh); } button:hover, .btn:hover { border: 1px solid var(--denger-color); background-color: var(--denger-color); color: var(--desc-line-color); } button.btn-dk:hover { background-color: var(--denger-color); color: var(--desc-line-color); }