코딩 일지

최종 프로젝트 때 왠지 VIEW를 맡게 될 것 같아서 하는 스크립트 공부... 웹 문서 안에 태그는 웹 문서 어디에나 존재할 수 있고, 몇 개든 존재할 수 있다. 다만, JS는 웹 문서에서 이미지나 텍스트 등의 요소를 제어하는 경우가 많기 때문에 되도록이면 이미지나 텍스트 등을 다 표시한 후에 실행하는 것이 좋아서 태그 직전에 자바스크립트 소스를 삽입한다. 다만, 웹 문서 안에 삽입하는 것보다 외부 문서에 작성하고 파일을 연결하는 것이 훨씬 깔끔하고 유지보수성이 좋다. ※ 자바스크립트는 HTML, CSS와 달리 대소문자를 구별한다.[ 스크립트 해석 ] 자바스크립트 위 텍스트를 클릭해 보세요h1 태그로 감싸져있는 자바스크립트 텍스트를 클릭하면 클릭 이벤트가 발생한다. 클릭하는 순간 글자의 색상이 빨간색..

SECTION 02 캔버스를 사용한 애니메이션 와 상호작용하는 애니메이션도 자바스크립트를 사용해서 쉽게 만들 수 있음. [캔버스에 애니메이션 구현하기 순서]1. 캔버스 클리어 : ClearRect()어떤 모양을 그리든지 그리기 전 캔버스 클리어 필요 2. 캔버스 저장 : save() 3. 애니메이션으로 만들 형태 그리기 : 애니메이션에 필요한 작업을 메서드로 그림: drawImage() 등등.. 4. 캔버스 상태 재저장 : 새 형태를 그리기 전 기존 상태 저장. restore()5. 애니메이션 제어 : 메서드를 사용해서 원하는 형태 그리기.: window.setInterval(), window.setTimeout(), window.requestAnimationFrame() 과 같은 애니메이션 동작(실행)..

캔버스 : 각종 도형, 문자열 및 그림을 그릴 수 있는 메서드 제공자바스크립트에서 제어하기 위해 id 속성 필수구역을 지정하는 태그와 같이 쓰이면 좋다. HTML5의 태그는 그래픽을 그릴 영역만 제공하고, 실제로는 그래픽을 그리기 위해 자바스크립트를 사용한다.만들어진 캠버스에 도형이나 그림을 그리고, 그려진 것들을 움직이게 만드는 등의 제어는 JS에서 담당JS는 HTML 페이지가 모두 로드된 후에 사용. 캔버스를 제어하는 코드는 $(document).ready(function() { } 안에 작성! 자바스크립트에서 캔버스를 제어하기 위해서는 그림이 그려질 캔버스 영역을 var cvs = $("#canvas1")[0];와 같이 사용해서 얻어낸 후 그리기 작업을 위한 그래픽 2D 콘텍스트를 cvs, ge..

■ 프로그램 코드는 함수에 넣어서 사용하며 함수에는 시스템이 제공하는 내장 함수와 사용자가 만드는 사용자 정의함수가 있다. ■ 함수는 특정 작업을 기술하는 곳으로 함수명(인수리스트){ } 로 구성되며 실행결과는 return문을 사용해서 리턴한다. ■ 익명함수 function () { } 는 이름이 없는 함수로 필요한 곳에서 이름을 정의하거나 이름을 굳이 줄 필요가 없는 경우에 사용한다. ■ 즉시 실행함수 함수 정의와 동시에 실행하는 함수로, 함수 호출 없이 자동으로 실행된다. ■  클로저는 즉시 실행 내부함수로, 함수의 캡슐화, 런타임 실행 시 인자 값을 넘겨서 자동 동작되는 작업에 사용한다.

프로그램의 실행 순서를 제어하는 제어문에는 조건문, 반복문, 기타 제어문이 있다. if문, if~else문, for문, switch문, while문, do-while문은 자바와 동일하다. 1. for-in문 : 객체 내 프로퍼티 반복for(var 변수 in 객체명) { // 처리할 문장} 2. for-of문 : 객체 반복for(let 변수 of 컬렉션) { // 처리할 문장}□ for of문 : 컬렉션 내 객체 반복□ let문 : 객체 저장 변수에 값 할당

[ 자바스크립트 ] : 웹 문서의 각 요소를 가져와서 필요에 따라 스타일을 변경하거나 움직임. UI에 많이 활용 - 웹 애플리케이션을 만들고, 다양한 라이브러리를 활용할 수 있다. Node,js를 이용하면 서버 개발 또한 가능하다.자바스크립트는 웹 문서 어디든 위치할 수 있고 하나의 문서에서 여러 개 쓰일 수도 있다.HTML, CSS와 달리 영어 대소문자를 구별하므로 주의1) querySelector(): css선택자(id, name)를 사용하여 요소를 찾는다.2) 외부 스크립트 연결하기3) 알림 창 띄우기alert('메시지');: 알림의 기능 (메시지 표시)4)  확인 창 띄우기confrim(메시지): 사용자가 확인 이나 취소 버튼을 선택함. 선택한 결과에 따라 프로그램 동작5) 프롬프트 창으로 입력받..

■ 부트스트랩(Bootstrap): HTML, CSS, JavaScript 반응형 웹 사이트, 모바일 우선 웹 사이트를 쉽게 작성할 수 있도록 해주는 무료 프레임워크.>> CSS, JS에 사용 ■ 특징1. 반응형 디자인 (Responsive Design) □  PC, 태블릿, 스마트폰에서도 자동으로 화면 크기 조정□ 미디어 쿼리를 직접 작성하지 않아도 된다.2. 다양한 UI 컴포넌트 제공 □  부트스트랩은 이미 디자인된 다양한 요소들을 제공□  버튼, 네비게이션 바, 모달 창, 카드, 폼 요소 등등을 바로 사용할 수 있음3. 그리드 시스템(Grid System) □  12개의 컬럼을 활용해 레이아웃을 손쉽게 구성할 수 있음4. 스타일이 깔끔하고 직관적□  추가적인 CSS 작업 없이도 예쁜 디자인 가능 1..

자바 스크립트 문법보다 AJAX를 사용하면 코드를 더 간략하게 사용할 수 있다.  jQuery 라이브러리에 있는 $.ajax() 메서드 사용하기. □ $.ajax() == 비동기 처리를 구현할수있게하는 메서드 ■ AJAX : 비동기적으로 데이터를 주고받는 기술. 즉, 페이지를 새로고침하지 않고도 서버와 데이터를 주고 받을 수 있음. □ AJAX는 jQuery가 만든 것이 아니고, 자바스크립트의 원래 기능이다. jQuery는 AJAX를 더 쉽게 사용할 수 있도록 도와주는 라이브러리일 뿐이다. >> AJAX는 자바스크립트의 기본 기능이며, jQuery에 의존하지 않음. $.ajax()를 사용하면 XMLHttpRequest보다 쉽게 AJAX를 사용할 수 있다! 최근에는 JQuery대신 fetch API를 많이..

1. Advanced CSS(CSS3)공식적으로 CSS3 모듈의 표준 규격이 존재하지 않아, 브라우저 벤더들이 독자적으로 자신들의 브라우저에 맞게 기능 구현 -> 벤더 프리픽스(vendor prefix)가 포함된 브라우저별 코드를 모두 나열해야 한다는 불편함 존재브라우저별 벤더 프리픽스를 알고 있어야 하고, 표준 규약은 브라우저별로 나열한 코드 마지막에 작성해 주어야 한다.모두 나열하기 힘들기 때문에 가장 많이 쓰는 브라우저 위주로 쓰도록 하자※ 대표적 벤더 프리픽스-ms-인터넷 익스플로러-o-오페라-moz-파이어폭스-webkit-크롬, 사파리 2. 테두리와 배경에는 border-radius, box-shadow, border-image, background-size 속성, 배경 이미지 중첩 기능 등이 ..

1. 미디어 쿼리 : 미디어 및 화면의 크기에 따라 다른 스타일시트가 적용되도록 지원화면의 크기가 다르면 보이는 내용도 화면 크기에 맞게 보여야 함웹 사이트를 1개만 만들고 화면 크기에 따라 알맞게 자동으로 배치되거나 글자크기나 콘텐츠 크기 등을 자동으로 변환시킬 수 있도록 함 ==> "N스크린 대응"※ 반응형 웹 사이트 : 미디어 쿼리를 이용해 유동형 레이아웃을 구현한 것 사이트.2. 미디어 쿼리 사용법미디어 쿼리는 CSS로 구현된다.작성 순서는 태그에 공통적으로 적용할 내용, 특정 태그에만 적용할 내용, 그리고 마지막으로 미디어 쿼리를 기술함1) 작성 위치 : HTML 파일 속에 태그로 기술하거나, CSS 파일에 추가한다. 외부/내부 모두 여러 화면 크기에 대응해서 여러 개의 미디어 쿼리를 설정해준..