TIL/Web(HTML, CSS, JS, jQuery)

1. jquery 필터링 메서드 .eq() - index에 해당하는 .first() - 첫번째 .last() - 마지막 .filter() - 검색 .not() - 제외 2. jquery의 $ 기호와 noConflict() 메서드 - $라는 기호는 jQuery를 나타낸다(object) - 다른 javascript 프레임워크(Angular, Backbone, Ember 등등)에서 $ 기호를 사용할 수 있어 충돌하는 문제가 발생한다. (jquery의 $와 다른 프레임워크의 $기호가 충돌) - 이와 같이 충돌하는 문제는 jQuery의 noConflict() 메서드를 사용하여 해결한다. HTML 삽입 미리보기할 수 없는 소스 - {} 블럭 안에서 jquery 코딩을 하는데 $ 기호가 필요하기 때문에 아래와 같이 ..

1. contents(내용) 가져올 때 사용하는 method 1) text() : 문자열로 가져오는 메서드 2) html() : html 요소로 가져오는 메서드 3) val() : value를 가져오는 메서드 2. attribute(속성) 가져오거나 설정할 때 사용하는 method 1) attr() - 속성 값 가져올 때 예시: $("a").attr("href"); - 속성 값 설정할 때 예시 : $("a").attr("href", "http://www.naver.com"); 3. element(요소) 추가할 때 사용하는 method 1) append() : 마지막 자식으로 추가 부모요소.append(자식요소) 2) appendTo() : 마지막 자식으로 추가 자식요소.appendTo(부모요소) 3) p..

1. animate() 메서드 [형식] $(selector).animate({params}, speed, callback); 1) {params} 매개변수는 css 속성 정의 2) speed 매개변수는 효과의 지속 시간을 정의 ㄱ. "slow" - 천천히 ㄴ. "fast" - 빠르게 ㄷ. ms - 밀리세컨드 값을 넣어서 직접 설정할 수도 있음 3) callback은 애니메이션 효과가 완료된 후에 실행 1-2. 요소의 위치를 이동시키기 위해서는 style position 속성을 absolute를 주어야 함 1-3. 여러 속성을 동시에 애니메이션 처리할 수 있다. 1-4. 상대적인 값을 정의하는 것도 가능하다. - 기준은 현재 요소의 값이며, += 또는 -=으로 값을 설정해주면 된다. 1-5. 미리 정의된 ..

1. jquery selector(제이쿼리 선택자) 1) * - 모든 요소 2) #아이디명 - 해당 아이디명을 가진 요소 3) .클래스명 - 해당 클래스명을 가진 요소 4) 태그명 - 해당 태그명을 가진 요소 5) :first :last :first - 첫 번째에 해당하는 요소 :last - 마지막에 해당하는 요소 6) :even :odd :even - 짝수 인덱스 기준인 행 :odd - 홀수 인데스 기준인 행 7) :first-child :last-child :first-child - 어떤 요소의 첫 번째 자식 요소가 해당 요소인 것 :last-child - 어떤 요소의 마지막 자식 요소가 해당 요소인 것 8) :first-of-type :last-of-type :first-of-type - 어떤 요소..

1. 제이쿼리(jquery)란? - jQuery는 빠르고 작고 기능이 풍부한 JavaScript 라이브러리 - 여러 브라우저에서 작동하는 사용하기 쉬운 API를 사용하여 1) HTML 문서 탐색 및 조작 (DOM) 2) 이벤트 처리 3) 애니메이션 및 Ajax 위와 같은 작업을 훨씬 더 간단하게 만듦 - 다목적성과 확장성의 조합으로 jQuery는 수백만 명의 사람들이 JavaScript를 작성하는 방식을 변화시킴 2. jquery 사용하는 방법 1) 다운로드 ㄱ. 압축 => jquery-3.6.0.min.js - 대역폭 절약, 프로덕션 성능 향상 시킴 ㄴ. 비압축 => jquery-3.6.0.js - 개발 또는 디버깅에 가장 잘 사용됨 즉, 개발할 때는 비압축으로 사용, 배포할 때는 압축으로 사용 - j..

1. HTTP의 일종으로서 사용자가 어떠한 웹사이트를 방문할 경우 사용자의 웹브라우저를 통해 사용자의 컴퓨터나 다른 기기에 작은 텍스트 파일로 저장되는 데이터를 cookie(쿠키)라고 한다. 2. 웹클라이언트(전용브라우저) -> 요청 -> 웹서버 -> 쿠키 발급 쿠키 사용 마지막 방문 정보 저장(최근 방문 정보) 로그인 인증, 권한을 받은 후 다른 페이지 요청, 응답을 해도 인증 정보 권한을 계속 저장, 유지할 수 있도록 5. 브라우저에서 쿠키 사용하지 않겠다고 설정하면 쿠키를 사용할 수 있다. 6. javascirpt 또는 JSP 쿠키를 다룰 수 있다. javascript는 document.cookie 속성을 사용해서 데이터 쓰기(저장), 데이터 읽기 작업을 할 수 있다. 7. 쿠키 형식 [쿠키 구성]..

예제1) 원하는 위치에 마우스 클릭시 이미지 생성하기 - 이미지를 원하는 위치에 생성하기 위해선 style 태그 안에 position 속성을 absolute를 주어야 함 - body 태그 안에 이미지 태그 하나 생성 [script 코드] [결과] title 부분에 좌표와 이미지 너비가 보임 원하는 위치를 클릭하면 새로운 이미지 생성 이미지 우클릭시 해당 이미지 삭제 휠 클릭시 전체 이미지 삭제 예제2) 모달(modal) 창 [style 태그] [body 태그 안 뼈대] [script 코드] [결과] Open Modal 버튼을 누르면 창이 나옴 창의 X를 클릭하면 닫힌다.

[주소 입력하는 창] [우편번호 검색하는 창 - ex08_02.html] [결과] - 우편번호 검색 버튼을 누르면 우편번호를 검색할 수 있는 새로운 창이 뜸 - 당산 입력 후 검색 버튼을 누르면 당산에 해당하는 주소가 뜸(이 부분은 DB와 연동해야하는 부분으로 sample 형태로 만듬) - 당산 3동의 우편번호를 누르면 아래처럼 자동으로 우편번호와 주소가 입력이 되고 상세주소에 포커스가 맞춰진다.

1. DOM(Document Object Model) 1. DOM? - Document Object Model의 약자 - 웹 페이지를 요청 -> 응답 -> 브라우저에 응답된 웹페이지가 로딩할 때 [DOM 객체]를 생성 - 트리 구조로 된 객체 2. DOM 사용 - html 요소 추가, 수정, 삭제 - html 속성 추가, 수정, 삭제 - css 스타일 변경 - html 이벤트 추가, 수정, 삭제 등등 3. W3C DOM 종류 1) Core DOM - 모든 문서 유형에 대한 표준 DOM 2) html DOM - ex05.html 3) xml DOM - test.xml 4. DOM 메서드 ㄱ. html 요소를 찾는 메서드 document.getElementById() document.getElementsBy..