https://soharu.tistory.com/11

https://velog.io/@byeol4001/Meta-Tag-OG%EC%98%A4%ED%94%88%EA%B7%B8%EB%9E%98%ED%94%84-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0 https://nowonbun.tistory.com/517

http://old.remain.co.kr/bbs/board.php?bo_table=portfolio

https://remain.co.kr/page/designsystem/visual-hierarchy.php http://groobee.net/2019/12/16/calltoaction-dynamicui/

https://s-yeonjuu.tistory.com/6 Thymeleaf 사용법 타임리프(Thymeleaf)란 뷰 템플릿으로 컨트롤러에서 리턴된 데이터들을 페이지에 동적으로 렌더링 해줍니다. ※ Thymeleaf 사용법 : 타임리프 사용 시 기본 문법은 data-th-text, th:text 둘 중 아무거나 s-yeonjuu.tistory.com JSP 대신 사용하는것 상세한 사용 방법 https://sidepower.tistory.com/145

https://ditoday.com/404-not-found-_-ux-%EB%94%94%EC%9E%90%EC%9D%B8%EA%B3%BC-%EA%B0%9C%EB%B0%9C/

@font-face { font-family: "NotoSansKRL"; src: url(/static/fonts/NotoSansKR/NotoSansKR-Light.otf); } * { padding: 0; margin: 0; box-sizing: border-box; } body { font-size: 12px; line-height: 1.4; font-family: 'NotoSansKRL'; letter-spacing: 0.7px; }

컴포넌트의 정의 컴포넌트란 재사용 가능한 웹의 구성요소란 뜻으로 웹 응용 프로그램에서 재사용 가능한 구성 요소를 만들 수 있게 해주는 일련의 표준 기반 웹 플랫폼 API 세트

https://remain.co.kr/page/designsystem/font-color.php https://www.wah.or.kr:444/Participation/%ED%95%9C%EA%B5%AD%ED%98%95%EC%9B%B9%EC%BD%98%ED%85%90%EC%B8%A0%EC%A0%91%EA%B7%BC%EC%84%B1%EC%A7%80%EC%B9%A82.1.pdf https://www.w3.org/WAI/WCAG21/quickref/#contrast-minimum

*필요한 파일 3가지 - jquery-ui.min.css - jquery-2.2.4.min.js - jquery-ui.min.js https://stackoverflow.com/questions/47885271/jquery-draggable-is-not-a-function position absolute 필요 없고 부모 태그 안에서 움직임 자유 자재로 움직인다. 신기해

http://aj-energy.webmoa21.co.kr/index.asp

.radioBox { position: relative; width: 60px; height: 28px; color: #fff; border-radius: 3px; } .radioBox .handle { position: absolute; top: 0; left: 0; width: 50%; height: 100%; transform: translateX(0px); background-color: #37987d; transition: 0.3s; border-radius: 3px; } .radioBox input:checked~.handle { transform: translateX(30px); } .radioBox label { position: absolute; top: 0; left: 0; width:..

본 태그의 data-off="내용물" 불러오기 가능

https://www.phpschool.com/gnuboard4/bbs/board.php?bo_table=qna_html&wr_id=293802 https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_switch https://www.htmllion.com/test.html?fileroot=css&filename=css3-toggle-switch-button switch-label:before { content: attr(data-off); right: 11px; color: #aaaaaa; text-shadow: 0 1px rgba(255, 255, 255, 0.5); } .switch-label:after { content: attr(data-o..

*자식 transform: rotateY(0deg) translateZ(-764px); y축은 동일하게 주고 z축을 다르게 하면 360/자식수 >>> 주고, 2배, 3배, 4배로 주기 >>공 모양 완성

// // 특정 요소의 모든 자식 요소 탐색 방법 // const list = document.querySelector('.list'); // const items = list.children; // console.log(items); // // 특정 자식요소의 직계 부모 요소 탐색 // const item2 = document.querySelector('.item2'); // const parent = item2.parentElement; // console.log(parent); // // 직계 부모가 아닌 최상위 부모 바로 탐색 // const item = document.querySelector('.item'); // const frame = item.closest('article'); // co..

const bg = getComputedStyle(box).backgroundColor; const wid = getComputedStyle(box).width;console.log(bg);console.log(wid);