Yunzz's 코딩정리

반응형 사이드바 Bedimcode Dashboard Messenger Projects Data Group Members Analytics Team Data Group Members Settings Log out /* GOOGLE FONTS */ @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap"); /* VARIABLES CSS */ :root { --nav--width: 92px; /* Colores */ --first-color: #0c5df4; --bg-color: #12192c; --sub-color: #b6cefc; --white-color: #fff; /* Fuente y tipograf..

Double-Range-Slide 구성하는 코드 See the Pen double -range-slide by 조윤주 (@gnlvrezv-the-solid) on CodePen.

단계 별 페이지 구성하는 방법 Step 1 Step 2 Step 3 Step 4 Disabled step .steps { list-style-type: none; padding: 0; text-align: center; } .steps li { display: inline-block; margin-bottom: 3px; width: 18%; } .steps li a, .steps li p { background: #B71F2B30; padding: 8px 20px; color: #B71F2B; display: block; font-size: 14px; font-weight: bold; position: relative; text-indent: 12px; } .steps li a:hover, .steps ..

1) 캐시 삭제 및 강력 새로고침 (가장 Best!!) ① 브라우저에서 F12 클릭하여 개발자 모드 접근 ② 브라우저 좌측 상단 새로고침 버튼 마우스 오른쪽 버튼 클릭 ③ 캐시 비우기 및 강력 새로고침 버튼 클릭 2) style.css?after 추가 CSS 파일을 불러오는 의 .css 파일 뒤에 ?after 추가

1) CSS 파일 내에 아래와 같은 코드 삽입/* CSS 파일 내에 삽입 */ [data-tooltip-text]:hover { position: relative; } [data-tooltip-text]:after { -webkit-transition: bottom .3s ease-in-out, opacity .3s ease-in-out; -moz-transition: bottom .3s ease-in-out, opacity .3s ease-in-out; transition: bottom .3s ease-in-out, opacity .3s ease-in-out; background-color: rgba(0, 0, 0, 0.8); -webkit-box-shadow: 0px 0px 3px 1px rgba(5..

선택자 : 특정 요소들을 선택하여 스타일 적용 ① Tag 선택자 body { } ② Class 선택자 .name { } ③ Id 선택자 #title { } ④ 속성 선택자 input[type="text"] { } ⑤ 전체 선택자 * { ...... } ⑥ 하위 선택자 / 자식 선택자 하위선택자 : section ul { } - 부모 요소에 포함된 '모든' 하위 요소에 스타일 적용 (section 아래 모든 ul에 적용) 자식선택자 : section > ul { } - 부모의 바로 아래 자식 요소에만 스타일 적용 (section 바로 아래 ul에 적용)