본문 바로가기

🐣codeLab

(16)

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

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

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

rollingSlide 만들기 보호되어 있는 글입니다.

[아코디언메뉴] 3level accordion menu [아코디언메뉴] 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 정규식에맞춰작성하기 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..

[슬라이드] prpend / append 사용하여 슬라이드만들기

이전 1 2 다음

티스토리툴바