Yunzz's 코딩정리

① Marvin JS https://marvinjs-demo.chemaxon.com/latest/index.html ( marvin Sketch의 웹버전) Marvin JS marvinjs-demo.chemaxon.com ② Chemdraw https://chemdrawdirect.perkinelmer.cloud/js/sample/index.html?wasm=1 ChemDraw JS Sample Page chemdrawdirect.perkinelmer.cloud ③ Ketcher https://lifescience.opensource.epam.com/ketcher/index.html Ketcher Main features Fast and convenient editing. We strive to make..

반응형 사이드바 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..

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.

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..

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 ..

Mouse Eventclick해당 요소 마우스 버튼 클릭 후 발생mousedown해당 요소 마우스 버튼 클릭 시 발생mouseup해당 요소 마우스 버튼 클릭 후 떼었을 때 발생dbclick해당 요소 마우스 버튼 더블 클릭 시 발생mousemove해당 요소 안에서 마우스 움직였을 때 발생mouseover해당 요소 밖에서 안으로 마우스 움직였을 때 발생mouseout해당 요소 안에서 밖으로 마우스 움직였을 때 발생mouseenter해당 요소 밖에서 안으로 마우스 움직였을 때 발생 (버블링 발생 x)mouseleave해당 요소 안에서 밖으로 마우스 움직였을 때 발생 (버블링 발생 x)contextmenu해당 요소 마우스 오른쪽 버튼 클릭 시 발생