Be a groovy man by positive thinking

간단정리1. jQuery- 모든 브라우저에서 동작하는 클라이언트 자바스크립트 라이브러리- 무료로 사용 가능한 오픈 소스 라이브러리- document 객체 모델과 관련된 처리를 쉽게 구현- jQuery를 내려받으려면 http://jquery.com에 접속- CDN 호스트를 사용하는 방법- $(document).ready(function(){ }); window.onload = function () {} 1) 기본 구조 - $(선택자).메서드() - $ - sign to define/access jQuery $(document).ready(function(){ $("button").click(function(){ $("p").hide(); }); }); 2) 기본 선택자 - element의 태그명 : $("..

간단정리 1. 자바스크립트 - 동적 기능 수행1) 브라우저가 소스코드를 직접 해석하여 실행하는 인터프리트 언어2) 브라우저 위에서 실행한다 3) HTML파일 안에 삽입 가능 2.자바스크립트 작성1) 자바 스크립트 코드 위치 - 기본 페이지의 head 태그 사이에 script 태크 삽입 - script 태그 사이에 자바스크립트 코드 입력 - HTML5에서는 script 태그에 type 속성을 적지 않는 게 원칙 - 외부 파일 연결 3. 자바스크립트 기본 문법1) 자바스크립트 문장은 ;(세미콜론)으로 구분된다. 문장이 끝나는 지점에 세미콜론을 찍어준다. var test="Good Morning"; 2) 문자열(String)은 "(쌍따옴표) 또는 '(단따옴표)를 붙여서 사용한다. "Hello" 'Hello' ..

1. Which doctype is correct for HTML5? ① ② ③ 2. Who is making the Web standards?① Microsoft ② Google ③ Mozilla ④ The World Wide Web Consortium 3. How can you open a link in a new tab/browser window?① ② ③ 4. Choose the correct HTML element for the largest heading:① ② ③ ④ 5. What is the correct HTML element for inserting a line break?① ② ③ 6. Which character is used to indicate an end tag?① * ② 7...

간편정리 1. 위치 속성1) position - 위치 설정 + x 좌표 - left, y 좌표 - top - position: static ==> 기본값 순서대로 - position: absolute ==> 가장 가까운 상위 요소를 기준으로 위치가 결정 상위 요소가 없으면 위치는 body를 기준으로 설정 - position : relative ==> 상대적 위치 static의 위치부터 계산 - position:fixed ==> 화면을 기준으로 절대 위치 스크롤 되어도 위치 고정 2) z-index - 기본적으로 뒤에 입력한 태그가 앞면에 위치 - z-index 에 값을 주면 가장 큰 값이 앞면에 위치 - static 은 예외 3) overflow - 내부 요소가 상위 요소의 범위를 벗어날 경우 처리방식 ..

간편정리 1. background 태그1) background-image 속성 - 화면 배경이미지로 그림 넣기 - background-image : url('이미지경로'); - background-image : url('앞'), url('뒤');===> 중첩해서 이미지 넣기 2)background-size 속성 - 배경이미지 크기 - auto - contain - cover - inherit - initial 3) background-repeat 속성 - 배경이미지 패턴(반복) 지정 - repeat ==> 기본 반복 - no-repeat ==> 패턴 없음 - repeat-x ==> 가로 패턴 - repeat-y ==> 세로 패턴 4) background-attachment 속성 - 화면에 고정 하는 방식..

간략정리 1. 제목 글자 태그(h1~h6) - 숫자가 낮을수록 크다. 2. p 태그 - p : 본문 글자 태그 3. br, hr 태그 - br : 개행 태그 - hr : 수평 줄 태그 4. 앵커 태그 - controls : 음악 재생 도구를 출력할지 지정 5. ol, ul 태그 - ul : 순서가 없는 목록 태그 - ol : 순서가 있는 목록 태그 - li : 목록 요소 6. dl, dt, dd 태그 - dl : 정의 목록 태그 - dt : 정의 용어 태그 - dd : 정의 설명 태그 7. tr, th, td 태그 - tr : 표 내부의 행 태그 - th : 표 내부의 제목 셀 태그 - td : 행 내부의 일반 셀태그 8. th, td 태그의 속성 - rowspan, colspan - rowspan : ..

간략정리 1. table 태그 내부에 넣을 수 있는 태그 중 많이 쓰이는 태그 - tr표 내부의 행 태그 - th행 내부의 제목 셀 태그 - td행 내부의 일반 셀 태크 2. tr, td 태그의 속성 - colspan : 셀의 너비 지정 - rowspan : 셀의 높이 지정 3. img 태그 - src: 이미지 경로 지정 - alt: 이미지가 없을때 나오는 글자 지정 - width : 이미지의 너비 지정 - height : 이미지의 높이 지정 4. audio 태그 - src : 음악 파일의 경로 지정 - preload : 음악을 재생하기 전에 모두 불러올지 지정 - autoplay : 음악을 자동 재생할지를 지정 - loop : 음악을 반복할지 지정 - controls : 음악 재생 도구를 출력할지 지정..

예문 Ex_01입력양식1. 이 름 2. 버튼 3. 체크박스(중복허용) 4. 파일 첨부5. 숨김6. 이미지 버튼 7. 비밀번호 입력 8. 라디오버튼(1개만 선택) 9. 초기화 버튼 Ex_02textarea텍스트 입력 박스홍길동 Ex_03select 태그선택 박스김밥떡볶이순대오뎅 Ex_04선택 박스 그룹 묶기선택 박스 그룹 묶기Multimedia TagConnectivityDevice AccessAnimation3D Transform Ex_05가입페이지 만들기필수 입력 항목이름비밀번호 선택 입력 항목이메일취미독서 영화 음악좋아하는 음식김밥떡볶이순대오뎅1. 수집하는 개인정보 항목 회사는 회원가입, 상담, 서비스 신청 등등을 위해 아래와 같은 개인정보를 수집하고 있습니다. 가. 수집항목 이름, 비밀번호, 전화번..

간편정리 1. 자손,후손, 동위 선택자 - 후손 : 여러 계층 구조에서 기준이 되는 태그 안에 위치하는 모든 태그 - 자손 : 여러 계층 구조에서 기준이 되는 태그 바로 아래에 위치하는 태그 - 동위(형제) : 계층 구조에서 동일한 계층 - 후손 선택자element element div p ==> div 태그 안에 있는 모든 p 태그들 - 자손 선택자 element > elementdiv > p ==> div 태그 바로 아래에 있는 모든 p 태그들 - element + element : 기준 선택자 바로 뒤에 위치하는 선택자 div + p ==> div 태그 바로 뒤에 있는 p - element1~element2 : 기준 선택자 뒤에 위치하는 모든 선택자 2. 구조 선택자 - 일반구조 선택자 + firs..

간편정리 1. display 속성 - 화면에 영역을 표시하는 방식을 지정 - none : 화면에 보이지 않음 - block : 블럭형식 - 새로운 행에 추가됨 - inline : 인라인형식 - 같은 행에 추가, 넓이와 높이 지정안됨 - inline-block : 인라인형식(같은행에 계속 배치됨)이나 넓이와 높이 지정 가능 2. visibility 속성 - 보이거나 보이지 않게 지정 - visible : 보이게 만듦 - hidden : 보이지 않게 만듦 3. opacity 속성 - 대상의 투명도를 지정하는 속성이다 - 0.0(투명) ~ 1.0(불투명) 4. margin 속성 - 블럭형식의 바깥 쪽 여백 - margin : 10px==> 상하좌우 모두 10px - margin : 10px 5px==> 상하 ..