본문 바로가기
728x90
반응형

CSS9

Spring 개발자 수업 109일차 - jQuery Ajax를 이용한 post-it 메모장 만들기(작성, 위치 저장, 삭제) jQuery Ajax를 이용한 post-it 메모장 만들기(작성, 위치 저장, 삭제) [ 구현 목표 ] - 어제 작업하던 post-it 마무리 구현을 오늘 해보자. 1. 메모 이동 -> (id, left, top) -> DB 반영 2. 메모 z-index 변경 -> (id, zindex) -> DB반영 3. 메모 내용 수정 -> (id, memo) -> DB반영 ----------------------------------------------------------- 4. 메모 삭제 -> DB반영 --> 정리해서 업무 구분을 하자면 이동, z-index 변경, 내용 수정은 UPDATE 작업이며 메모 삭제는 DELETE 작업이다. [ 환경설정 및 파일 생성 ] - 환경설정, 파일 및 DB테이블은 어제와 동.. 2021. 8. 31.
JDBC 개발자 수업 84일차 - 크롤링(crawling) 크롤링(crawling) 크롤링(crawling) [ 정의 ] - 웹상의 페이지들에게서 내가 원하는 정보를 수집하는 행위 - ex) 맛집 블로그 방문 > 식당 정보를 얻고 싶다면? > 블로그의 소스를 긁어서 원하는 데이터 추출 > "크롤링" [ 주의점 ] - 허가 문제, 저작권 문제가 상당히 많다. ( 크롤링을 하려면 "정도껏" 긁는 작업을 해야한다. ) - 이유? 프로그램 > 속도 빠름 & 횟수 많음 > 서버 입장 > 트래픽 과부하 > 소송 > 크롤링 금지(동작 불능) 사이트가 많아졌다. [ 크롤링을 하려면? ] 1) HTML / CSS 이해도 ( JavaScript 조금 ) 2) jsoup 다운로드 https://jsoup.org/download Download and install jsoup Dow.. 2021. 7. 28.
jQuery 개발자 수업 69일차(2) - Effect, HTML 조작 1. Effect 2. HTML 조작 1. Effect [ jQuery Effect Function ] - CSS 애니메이션(transition, animate) 조작 1) 요소의 표시와 숨김 메소드 메소드명 설명 hide(time) 선택한 요소를 숨긴다. show(time) 선택한 요소를 나타낸다. toggle(time) 선택한 요소를 숨길 수 있으며 나타낼 수 있다. * 인자값(time)에는 'slow', 'fast', 시간(s)을 넣을 수 있다. See the Pen event 예제1 by yhyuk (@yhyuk) on CodePen. 2) 요소의 표시와 숨김 메소드 메소드명 설명 fadeOut(time) 선택한 요소를 숨긴다. fadeIn(time) 선택한 요소를 나타낸다. fadeToggle(.. 2021. 7. 5.
jQuery 개발자 수업 69일차(1) - jQuery, 선택자(Selector), 이벤트(Event) 1. jQuery 2. 선택자(Selector) 3. 이벤트(Event) 1. jQuery [ 정의 ] - 클라이언트 측 HTML 스크립팅을 간소화하기 위해 고안된 크로스 플랫폼 자바스크립트 라이브러리다 - Lightweight footprint, 경량 - CSS3 Comliant, CSS3 선택자를 지원한다. (태그 검색하는 도구로 제공) - Cross-Browser(Chrome, Edge, FireFox, IE, Safari, Android, iOS) [ 설치 방법 ] 1) 로컬 설치 방법 - http://jquery.com 에 접속한뒤 필요한 버전을 다운로드한다. ( 마우스 우클릭 -> 다른이름으로 링크 저장 ) - 다운받은 링크를 내 현재 프로젝트 폴더에 넣는다. - 설치한 파일 경로를 head .. 2021. 7. 5.
JavaScript 개발자 수업 60일차 - JavaScript, Data Type, Function 1. JavaScript 2. Data Type 3. Function 1. JavaScript [ 정의 ] - 브라우저에서 동작하는 프로그래밍 언어이다. - 웹페이지에 생동감을 불어넣기 위해 만들어진 프로그래밍 언어이다. [ 적용 방법 ] 1) 이벤트 핸들러 방식 : 해당 태그에 직접 기재하는 방법 2) 임베디드 방식 : 3) 외부 방식 : [ console.log(); ] - 디버그 전용 함수이다. - 개발자가 값을 콘솔창에서 확인 할 수 있으며, 보편적으로 많이 쓰인다. ( 사용자에게는 출력되지 않는다. ) - Node 환경에서도 출력이 가능하다. 2. Data Type [ Java & JavaScript 변수 차이점 ] - Java는 정적 할당 언어이기 때문에, 변수를 선언할 때 자료형이 정해진다... 2021. 6. 24.
CSS 개발자 수업 59일차 - animation, flex 1. animation 2. flex 1. animation [ 정의 ] - 애니메이션은 요소에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 전환 시켜준다. - 애니메이션을 나타내는 CSS 스타일과 애니메이션의 중간 상태를 나타내는 키프레임(@keyframe)들로 구성되어있다. - 트랜지션(transition)과 유사하지만, 훨씬 더 규모가 크고 복잡하며 다양한 기능을 가지고 있기 때문에 좀 더 정밀한 효과를 구현할 수 있다. [ 속성 ] 속성명 설명 animation-name 애니메이션의 중간상태를 지정하기 위한 이름을 정의한다. animation-duration 애니메이션의 적용 시간을 지정한다. animation-direction 애니메이션이 종료되고 진행 방향을 지정한다. animati.. 2021. 6. 21.
728x90
반응형