기록저장소

input[type=date]::-webkit-datetime-edit-text { -webkit-appearance: none; display: none; } input[type=date]::-webkit-datetime-edit-month-field{ -webkit-appearance: none; display: none; } input[type=date]::-webkit-datetime-edit-day-field { -webkit-appearance: none; display: none; } input[type=date]::-webkit-datetime-edit-year-field { -webkit-appearance: none; display: none; } value값 custom input[t..

https://codepen.io/paperwiz/pen/BaRQvJN BaRQvJN ... codepen.io https://www.freecodecamp.org/korean/news/html-select-taegeu-deurobdaun-menyu-ddoneun-kombo-riseuteureul-mandeuneun-bangbeob/ https://www.w3schools.com/howto/tryit.asp?filename=tryhow_custom_select W3Schools online HTML editor The W3Schools online code editor allows you to edit code and view the result in your browser www.w3schools.co..

이벤트 1강. 이벤트 객체 들여다보기 2강. 이벤트 객체 파라미터? 함수의 구조 // 함수 선언 function makeLog(str) { console.log(str); } // 함수 호출 makeLog('안녕하세요'); makeLog함수는 파라미터 하나(str)를 받도록 정의도어, 함수를 호출할 때 파라미터로 값을 하나 넘길 수 있음 이벤트 핸들러 $(document).on('keydown', keyboardInput); 이벤트 핸들러 함수(keyboardInput)를 호출하는 코드가 자바스크립트 내부에 구현된 상태, 함수 선언에 파라미터를 넣는 것만으로도 이벤트 객체 전달이 가능 // 이벤트 객체를 사용할 경우 function keyboardInput(e) { console.log(e.key); }..

jQuery I 1강. DOM pt.1 HTML의 트리구조 = 문서 객체 모델(Document Object Model), DOM 구조, 텍스트가 아닌 Object로 생성된 구조 2강. DOM pt.2 document - html - head - title / meta - body - form - input typeof document = "object" document.getElementById('submin-btn'); //document라는 최상위 객체에서 불러옴 jQuery를 이용해서 DOM트리 다루기 - 다양한 방식으로 DOM객체 선택하기 - DOM 트리에 요소 추가하고 빼기 - DOM트리의 요소 변형시키기 3강. jQuery 사용해보기 Hello Codeit! 청소 코딩 숙제 영화 $("#hel..

과제로 워밍업 1강. JavaScript의 기능들 2강. Math 정리노트 절대값(Absolute Number) : Math.abs(x) console.log(Math.abs(-10)); //10 console.log(Math.abs(10)); //10 최댓값(Maximum) : Math.max(a, b, c) console.log(Math.max(2, -1, 0); //2 최솟값(Minimum) : Math.min(a, b, c) console.log(Math.max(2, -1, 0); //-1 거듭제곱(Exponentiation) : Math.pow(x, y) console.log(Math.pow(2, 3); //8 제곱근(Square Root) : Math.sqrt(x) console.log(Mat..

HTML, CSS와의 콜라보레이션 1강. 환경설정 F12 - console 에서 임시적용 가능 2강. HTML의 해결사, 자바스크립트 Home Home Home //▽ Home Home //photo라는 id값을 가진 요소 가져오기 //src 변경 Home 3강. 코드를 함수로 빼기 Home Home //photo라는 id값을 가진 요소 가져오기 //src 변경 Home //clickSeoul이라는 함수 호출 //간략히 하기 Home Home //하나의 함수로 남기기 .......?? seoul tokyo 4강. 폰트 굵기 바꾸기 5강. jQuery jquery cdn 최신버전, minified Home Home //▽ 6강. jQuery 설치 정리 노트 1. 링크 사용하기 _ jQuery CDN 더 빠..

반응형 웹 1강. 반응형 웹 h1{font-size: 24px;} @media (min-width: 768px){ h1{font-size: 36px;} } @media (min-width: 992px){ h1{font-size: 48px;} } 2강. 반응형 그리드 3강. 이노 //세로정렬 .helper{ display:inline-block; vertical-align: middle; } .center{ display:inline-block; vertical-align: middle; } 부트스트랩 1강. 새로운 기술을 배우는 법 2강. 부트스트랩 소개 twitter 개발자 제공의 HTML, CSS, JS 프레임워크 css, js 스타일태그 가져오기 3강. 부트스트랩 그리드 container, row(..

포지셔닝 1강. relative 포지션 position: static default값으로 기본으로 있어야할 곳에 위치함 position: relative 상대적인, 요소의 원래 위치를 기준으로 이동, 위치를 옮겨도 기존 공간은 차지함 2강. 해변의 몽숭이 3강. 명언 4강. fixed 포지션 position: fixed 브라우저를 기준으로 고정된 위치, 기존 공간 상실 5강. absolute 포지션 포지셔닝이 안 된 요소 / 포지셔닝이 된 요소 static / relative, absolute, fixed relative : 원래 위치 기준 fixed : 브러우저 기준 absolue : 가장 가까운, 포지셔닝된 조상 요소 기준 6강. 우표 붙이기 float 1강. float float : 3d공간에서 위..

CSS 제대로 활용하기 1강. 선택자 정리 //태그이름 h1 {color: orange;} //클래스,아이디 .important {color: orange;} #favorite {color: blue;} //자식 .div1 i {color: orange;} //직속자식 .div1 > i {color: orange;} //복수선택 .two, .four {color: orange;} //여러조건 .outside.one {color: blue;} //가상클래스(pseudo-class) .div1 p:nth-child(3) {color: blue;} //.div1의 자식인 태그 중 3번째 .div1 p:first-child {color: red;} //.div1의 자식인 태그 중 첫 번째 .div1 p:last..

Box Model 1강. Box Model 소개 border, margin, padding 2강. margin, padding 3강. margin & padding 정리 padding : 위 우 아래 좌 margin : 위 우 아래 좌 margin-left : auto; margin-right : auto; margin : 0 auto; padding과 margin의 차이 내용(content), 패딩(padding), 테두리(border)로 이루어진 요소에서 내용과 테두리사이의 여유공간이 padding 요소 주위의 여백은 margin 4강. width, height 5강. width, height 정리 width, min-width, max-width height, min-height, max-heigh..