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) :: 키, 값을 보..

가상선택자를 사용해 원하는 넓이와 높이를 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..

카카오공식홈페이지에 보면 스크롤 시 오른쪽 콘텐츠는 고정되고 왼쪽 콘텐츠들을 스크롤이 된다. 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;..

일러스트에서 path으로 만들면 선이 끊겨지지 않아 일반 선(line..?)으로 만들었다. (분명 방법이 있을 것 같은데 일러스트를 잘모르겠다..) 일단 다음에 만들때는 선을 이어그리되 하나씩 분할이 되도록 선을 만들어야겠다. 그리고 IE 버전은 거의 지원이 안되니 크롬에서 보기로만 하고.. svg만드는게 어려워서 여러 플러그인이 많던데 이를 활용해서 좀 더 유연하고 다양하게 제어할 수 있도록 연습해봐야겠다~~~!😋 Reference nykim.work/35 [SVG] SVG 다루기 1. SVG란? SVG는, 확장 가능한 벡터 그래픽(Scalable Vector Graphics)을 말합니다. 2차원 그래픽을 표현하기 위해 만들어진 XML파일 형식의 마크업 언어인데요, 텍스트 편집기에서 CSS나 JS로 수..

보호되어 있는 글입니다.

[아코디언메뉴] 3level accordionMenu 먼저 결과. 코드리뷰. 1. slideDown() 조건. 해당 a 클릭 시, a 바로 밑 형제 요소 ul 이 존재하며, ul이 보이지 않아야 한다. $('a').on('click', function() { // 1. ul 존재하며, ul이 보이지 않아야한다. if( $(this).next().is('ul') && !($(this).next().is(':visible')) ) { // console.log('slideDown'); $(this).next().slideDown(); return false; } }); 2. slideUp() 조건 해당 a클릭 시, a 바로 밑 형제 요소 ul이 존재하며, ul이 보여야한다. $('a').on('click',..

form 정규식에 맞춰 작성하기 form 회원가입 회원가입유효성검사 [html 코드] 회원 기본 정보 아이디 4~12자의 영문 대소문자와 숫자로만 입력 비밀번호 4~12자의 영문 대소문자와 숫자로만 입력 비밀번호 확인 메일주소 예) id@domain.com 이름 주민등록번호 - 관심분야 컴퓨터 인터넷 여행 영화 음악 자기소개 submit 버튼을 누르면 script의 checkAll() 가 호출된다. [JavaScript 코드] function checkAll() { if(!checkUserId(form.userId.value)) { return false; } else if (!checkPassword(form.userId.value, form.password1.value, form.password2.v..