클릭 조건. 각각 해당 숫자를 클릭하면 총 합계가 나와야 한다. 입력 조건. 원하는 숫자를 입력 시 총 합계가 나와야 한다. 숫자만 입력이 가능하다. 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

작업을 하면서 한글은 notoSans, 숫자는 Montserrat으로 설정하고 싶었다. 내가 시도한 방법 중 하나는 body { font-family: 'NotoSansKR' }로 먼저 적용한 후, 숫자 클래스를 따로 만들어서 .mont { font-family: 'Montserrat' } 클래스를 적용했는데 후에 유지보수할 때 html을 건드려야해서 추천하고 싶지 않은 방법이다. 이에 국문, 영문은 notoSans로 숫자만 montserrat으로 적용하는 방법을 찾던 중, unicode-range 란 방법이 있어 소개하고자 한다. 국문과 영문만 Noto Sans KR 입니다. 숫자 12345678910 Montserrat 유니코드 범위 전체 : U+0020-007E 특수문자 : U+0020-002F, ..

브라우저에서는 CSS만 인식한다. 그러므로 Sass는 서버에서만 확인이 가능하다. 그럼에도 Sass를 쓰는 이유는 표준css보다 많은 기능(변수, 조건문, 함수 등)을 사용해서 편리하게 작성할 수 있기 때문이다. Sass로 작성하고 css로 컴파일(compile)하여 동작시킨다. 브라우저에서는 [파일명.scss]를 인식하지 못하므로, [파일명.scss]를 [파일명.css]로 변환해주는 작업이 필요하다. Live server 를 다운받아 서버를 통해 본다. Sass 설치방법 node-sass ruby koala vscode 확장플러그인 설치 그중에서 가장 쉬운 vscode로 설치하는 방법을 알아보자. 1. 먼저 기본세팅. test.html 를 만들어 test.css의 링크를 걸어준다. // test.htm..

.gallery .board 에서 43.2% 계산방법. 223(이미지하나의 넓이) + 223(이미지하나의 넓이) + 20(margin-left) + 10(margin-left) = 476 476/1100*100 = 43.2727% ::before padding-top 부분 (높이/넓이)*100 ===> 큰 이미지 기준. 220321 추가 height / width * 100 = padding-bottom [CSS] selector { width: 100%; padding-bottom: 계산값; background-size: 100%; } 출처 https://5603.tistory.com/135