https://sweetalert2.github.io/ SweetAlert2 SweetAlert2 - a beautiful, responsive, customizable and accessible (WAI-ARIA) replacement for JavaScript's popup boxes sweetalert2.github.io 소개 기본 alert 창을 커스터마이징 할 수 있게 해주는 라이브러리이다. 예시 기본 alert 창 sweetalert2 라이브러리 적용시 공식 문서가 보기 힘든 다른 공식 문서와 다르게 아주 아주 잘 만들어져있다. 다른 테마로도 적용해서 보여주기도 하고 용법, 예시, 클래스, 메소드 소개 등등 전부 정리가 잘 되어 있다. 초보자도 쉽게 읽고 내려갈 수 있는 UI로 되어있어서 자세..

반응형 웹 미디어 쿼리 : 각 미디어 매체에 따라 다른 스타일을 적용할 수 있게 만드는것 @media 옵션을 주면 페이지의 너비나 높이가 몇이상 이하 일때의 옵션을 줄 수 있다. @media (max-width:600px) { .box { display: none; } } 최대 너비가 600보다 작아지게 되면 display를 none으로 하겠다는 뜻 그리고 meta 부분에 이걸 추가해야 반응형으로 만들 수 있다. 헤더입니다. 메인입니다. 사이드 입니다. 푸터입니다. 전부 max-height 옵션을 줘서 각각의 최대치의 너비보다 작아졌을때의 옵션을 준 모습 헤더입니다. 메인입니다. 사이드 입니다. 푸터입니다. max-height와는 반대의 개념인 min-height가 있다. 최소 너비가 ~~ 이상일때 의 ..

파일 용량 체크 등록하기 File List 업로드 파일이 단일일 경우와 여러개일 경우 비교하기 text File 읽기 이건 텍스트 파일만 가능하다. 파일을 읽어와서 콘솔창에 텍스트 파일의 내용을 뿌리는 코드 이미지 미리보기 등록하기 이미지 파일만 올릴 수 있도록 input 옵션에 accept="image/*" 를 줬다 역시 정규식을 사용해서 *으로 인해 이미지 파일이지만 모든 타입의 이미지 파일을 허용하게 했다. 그리고 이미지 미리보기 기능을 위해서 파일 객체 reader가 로드가 되면 function(e) 함수 이벤트를 실행하게 했는데, 문서내 엘리먼트의 아이디가 imgPreView인 애한테 어트리트뷰트셋(속성 설정) 해주는 것 그리고 그 읽어온 이벤트 결과를 보낸다는 뜻 .readAsDataURL(f..

DOM 이름 : 나이 : 생년월일 : 양력 전화번호 : 확인 요소에 접근하기 위한 방법은 엄청 다양하다. document.getElementsByTagName("*"); 을 통해서 모든 요소에 접근 할 수 있고 아니면 특정 태그나 클래스 이름 아이디 등등 접근할 방법이 많다. document.getElementById("name").value; 아이디로 접근 document.getElementsByName('age')[0].value; 네임으로 접근 document.getElementsByClassName("telClass")[0].value; 클래스로 접근 querySelector("#layout").innerHTML = s; 쿼리 셀렉터로 접근 노드 추가 및 삭제 자바 안드로이드 프레임워크 노드정보 ..

정규식(Regular Expression) - 정규식 생성방법 보통은 생성자 방식 보다는 리터널(값을 주는) 방식으로 많이 사용한다. + = 앞 문자가 한개 이상 즉 앞 문자가 ab가 하나씩은 있어야함 그리고 슬러시 뒤에 i는 대소문자 구분안하고 검사 하겠다는 뜻 정규식(Regular Expression) - flag [a-d]+ 는 괄호로 묶인 애들을 패턴 정규식이라고 하며 a~d의 의미 +가 있으니까 앞에 한글자가 a~d 사이는 하나는 있어야 한다 라는 뜻 그리고 /자바/g 같은 경우 뒤에 g는 자바랑 똑같이 일치하는 모든 문자를 검색 한다는 뜻 문자열 치환할때 유용하다. 정규식(Regular Expression) - 패턴 . 점은 뭐와 뭐의 사이 라는 뜻 a.s는 a와s사이에 뭐가오든 상관없다는 뜻..

form 접근 : 'document.forms'로 접근 이름 : 과목 : 등록하기 - 일단 var f = document.forms[0]; 을 통해서 0번째 인덱스 즉 첫번째 폼을 f에 담고 - 폼이 담긴 f에서 여러 form 컨트롤 요소들을 찾는다. (비어있는 칸을 찾기 위해서) - form 요소들을 찾기위해서는 elements[i]를 사용해야하는데 이건 배열임 - for문으로 전체 요소 길이만큼 반복문 돌리고 for문 안에서 if문으로 확인을 거침 f.elements[i].value를 했을때 값이 있으면 true 없으면 false 반환 form 접근 : 'document.폼이름' 으로 접근 이름 : 과목 : 등록하기 위랑 같은 개념이지만 폼에 접근하는 방식이 인덱스가 아니라 폼 이름으로 접근함 폼 이..

event handler - 이벤트 핸들러 : 이벤트가 발생했을 때 그 처리를 담당하는 함수 - 이벤트 등록 인라인 이벤트 핸들러 방식 : on으로 시작(onclick)하는 이벤트 속성값으로 이벤트 호출 클릭 1 클릭 2 인라인 태그에서 이벤트 핸들러를 추가하려면 onclick를 사용하면 된다. 버튼 태그 인라인에서 onclick = "fun1(); fun2()" 버튼을 누르면 펀함수1과 2를 실행해라 event handler 이벤트 등록 : 이벤트 핸들러 프로퍼티 방식 클릭 이벤트 핸들러는 하나만 가능하다. 만약 이미 있는데 또 이벤트를 만들면 기존의 이벤트는 사라진다. event handler : 이벤트 등록 - addEventListener() 메소드 클릭 이벤트 핸들러를 자바스크립트에서 따로 등록..

navigator 네비게이터는 정보를 보여주는 객체임 우리가 알 수 없었던 userAgent를 볼 수 있게 도와주는데 브라우저의 정보를 보여줌