목록HTML (7)
Yunzz's 코딩정리
[CSS] 반응형 사이드바 (Responsive Sidebar Menu) 생성
반응형 사이드바 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..
[Javascript] 값 입력 후 엔터(Enter)키 눌렀을 때 이벤트 실행
Input 요소의 [type="text"] 내에 값 입력 후 Enter 눌렀을 때 이벤트 발생.function EnterKey(e){ var value = document.getElementById("value").value; if(e.keyCode == 13){ document.getElementById("results").innerText = value; } } onkeypress 통해 키보드 키 입력 시 이벤트 불러옴. event.keyCode==13 통해 Enter 이벤트 발생 시 작업 실행 될 수 있도록 함. See the Pen Untitled by 조윤주 (@gnlvrezv-the-solid) on CodePen.
[Javascript] Ketcher 사용방법 (getSmiles(), generateImage())
Ketcher 란? 'Web-based molecule sketcher ' 웹 기반으로 분자구조를 그리거나 구조 관련 정보를 추출할 수 있는 에디터. JSP에서 사용하는 Ketcher의 output은 'Promise' 객체로 이루어져있음. async function test(){ var frame = document.getElementById("ifKetcher"); var ketcher = frm.contentWindow.ketcher; // Get SMILES Code var smiles = await ketcher.getSmiles(); console.log(smiles); // Get Molecule Image var blob = await ketche..
[CSS] Double Range 슬라이드 구성
Double-Range-Slide 구성하는 코드 See the Pen double -range-slide by 조윤주 (@gnlvrezv-the-solid) on CodePen.
[CSS] 단계 별 (Step-by-Step) 페이지 구성
단계 별 페이지 구성하는 방법 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 ..
[CSS] CSS 적용 안될 때 해결방법
1) 캐시 삭제 및 강력 새로고침 (가장 Best!!) ① 브라우저에서 F12 클릭하여 개발자 모드 접근 ② 브라우저 좌측 상단 새로고침 버튼 마우스 오른쪽 버튼 클릭 ③ 캐시 비우기 및 강력 새로고침 버튼 클릭 2) style.css?after 추가 CSS 파일을 불러오는 의 .css 파일 뒤에 ?after 추가
[CSS] CSS 선택자 종류
선택자 : 특정 요소들을 선택하여 스타일 적용 ① Tag 선택자 body { } ② Class 선택자 .name { } ③ Id 선택자 #title { } ④ 속성 선택자 input[type="text"] { } ⑤ 전체 선택자 * { ...... } ⑥ 하위 선택자 / 자식 선택자 하위선택자 : section ul { } - 부모 요소에 포함된 '모든' 하위 요소에 스타일 적용 (section 아래 모든 ul에 적용) 자식선택자 : section > ul { } - 부모의 바로 아래 자식 요소에만 스타일 적용 (section 바로 아래 ul에 적용)