HEADING Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit possimus necessitatibus natus a ipsam, voluptate dolores, optio quibusdam doloribus architecto obcaecati, eveniet magni ex veniam dolorum blanditiis tempora exercitationem ea! Voluptatem voluptate nulla recusandae debitis tempora rem maxime provident nobis minus neque quod excepturi molestiae sapiente, fuga ducimus sint qui..

조건 btn이 여러개 일 때 btn 클래스를 가진 요소가 모두 fix. visual일 때는 btn이 보이지 않아야 한다. resize에도 가능. 일단 코드! header visual cnt01 cnt02 cnt02 footer /* 모든 css 동일 */ * { margin: 0; padding: 0; box-sizing: border-box; } .wrap { position: relative; width: 100%; height: 100%; } header, footer { width: 100%; height: 70px; position: relative; background-color: #eaeaea; } footer { height: 200px; } section { position: relati..

const theme = localStorage.getItem('theme'); // console.log(theme); // 현재 theme를 알 수 있음. // dark || light if(theme) { document.documentElement.SetAttribute('data-theme', theme); } localStorage :: Storage 객체는 단순한 key-value 저장소이며, 이는 객체와 비슷하다. 이 데이터들은 페이지 로딩에도 온전하게 유지된다. (다시 웹페이지에 접속 할 때 마지막 설정을 불러올 수 있다.) localStorage getItem(key) :: 키에 해당하는 값을 받아온다. setItem(key, value) :: 키, 값을 보..

목차 1 배경 2 일반 2.1 일반 스타일 규칙 2.2 일반 서식 규칙 2.3 일반 메타 규칙 3 HTML 3.1 HTML 스타일 규칙 3.2 HTML 형식 규칙 4 CSS 4.1 CSS 스타일 규칙 4.2 CSS 서식 규칙 4.3 CSS 메타 규칙 1 배경 이 문서는 HTML 및 CSS에 대한 형식 및 스타일 규칙을 정의한다. 협업, 코드 품질을 개선하고 지원 인프라를 활성화하는 것을 목표로 한다. 2 일반 2.1 일반 스타일 규칙 2.1.1 프로토콜(Protocol) 리소스에 HTTPS를 넣는 것이 좋다. HTTPS(https:) 는 이미지 및 기타 미디어 파일, 스타일 시트 및 스크립트에 붙이는 것이 좋다. /* 권장하지 않음 : 프로토콜 생략 */ @import '//fonts.google..

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