전체 글

Pixel (px) = (Viewport width unit (vw) * Viewport width) / 100 px = (설정한 vw(ex:5vw) * 보여지는 화면 넓이(ex:1920px) / 100) = 96px rem = (구하고자 하는px) / 96 https://www.pixelconverter.com/vw-to-pixel-px-converter/

[plugIn] 반응형 이미지 링크 걸기 반응형 이미지에 링크를 걸어서 제작하는게 쉽지 않다. jQuery plugin을 사용하여 이미지에 맞는 링크를 걸 수 있는 플러그인을 소개하고자 한다. (반응형조직도를 만들 때 많이 쓴다.) 1. 세팅준비 jQuery-rwdImageMaps에 들어가 jquery.rwdImageMaps.js 또는 jquery.rwdImageMaps.min.js을 다운받아 넣는다. 이 때 주의할 점은 jQuery가 먼저 오도록 한다. 2. 이미지준비 https://www.image-map.net/ 에 들어가 원하는 이미지를 넣어 라인을 따라 만든다. Active Shape Link Title Target 현재 진행중인 이미지 맵 - Rect -Poly -Circle 클릭 시 링크 주..

가상선택자를 사용해 원하는 넓이와 높이를 calc로 만들어보자. 참고한 홈페이지 삼성반도체 section box box box box section /******* reset CSS *******/ * { margin: 0; padding: 0; box-sizing: border-box; } li { list-style: none; } /******* custom CSS *******/ section { width: 100%; height: 150px; background: #e9e9e9; } .wrap { position: relative; padding: 50px 0; } /* wrap::before를 이용하여 background-color를 만들어준다. */ .wrap::before { displa..

클릭 조건. 각각 해당 숫자를 클릭하면 총 합계가 나와야 한다. 입력 조건. 원하는 숫자를 입력 시 총 합계가 나와야 한다. 숫자만 입력이 가능하다. 0 이나 공백 일 경우(띄어쓰기 제외) 에도 합계가 나온다. 클릭 시 덧셈 구하기 10000 30000 50000 100000 1000000 합계 지우기 입력 시 덧셈 구하기 * { margin: 0; padding: 0; box-sizing: borde-box; } li { list-style: none; } ul li { display: inline-block; padding: 10px; margin: 0 5px; min-width: 50px; text-align: center; background: paleturquoise; cursor: pointe..

jsp로 header, footer 연결하기 메인 html에 header / footer 따로 떼서 붙일 수 있는 방법은 jquery의 include방법밖에 찾지 못했다. (이것도 로컬이 아닌 서버 환경에서만 볼 수 있음.) jsp도 물론 서버에서만 확인 가능하지만 jquery가 아닌 jsp로 직접 header, footer를 따로 만들어서 떼는 방법을 알아보자. 세팅 VScode 필요. tomcat 설치. 그외 나머지는 vscode의 확장 프로그램으로 설치. 세팅 - tomcat 설치. vscode로 JSP 환경구성을 하기 위해서는 tomcat 설치가 필요하다. 아래 블로그를 보고 순서대로 설치. https://nevertrustbrutus.tistory.com/245 header / footer js..

메뉴 | 메뉴 | 모양의 바모양을 가상선택자로 만드는 방법 LOGO menu1 menu2 menu3 menu4 * { margin: 0; padding: 0; box-sizing: border-box; } li { list-style: none; } a { text-decoration: none; color: inherit; } nav { width: 800px; height: 40px; margin: 0 auto; background: #e1e1e1; display: flex; } nav h1 { align-self: center; font-size: 14px; } nav ul { margin-left: auto; display: flex; justify-content: center; align-ite..

카카오공식홈페이지에 보면 스크롤 시 오른쪽 콘텐츠는 고정되고 왼쪽 콘텐츠들을 스크롤이 된다. css와 jquery를 사용한 codepen을 찾아 정리해보았다. Scroll * { margin: 0; box-sizing: border-box; } header { width: 100%; height: 100px; background: #2e446d; } .container { width: 992px; height: 100%; margin: 0 auto; padding: 25px; background: #b3c1da; } section.one { position: relative; } section.one::after { display: block; content: ''; clear: both;..

css nth-child(n)에 대해 확실히 알아보자. /* 3,6,9.. 번째(3의배수) 적용 */ li:nth-child(3n) {} /* 5번째 이후 부터 모든 리스트 적용 */ li:nth-child(n+5) {} /* 첫번째부터 5번째까지 적용 */ li:nth-child(-n+5) {} /* 5번째부터 10번째까지 적용 */ li:nth-child(n+5):nth-child(-n+10) {} /* 끝에서 3번째만 적용 */ li:nth-last-child(3) {} /* 홀수만 적용 */ li:nth-child(odd) {} /* 짝수만 적용 */ li:nth-child(even) {} Reference https://hohoya33.tistory.com/99