본문 바로가기

전체 글

(224)
html 캔버스 기능 정리하기 - 태그로 요소 추가 ex) ​ - 캔버스에 내용을 채우기 위한 객체 (그림 그리기) - getContext("2d") 메소드 stroke() : 선을 그리는 메소드 (초기값은 검정색) moveTo(x,y) : 선의 시작 지점의 좌표를 (x,y)로 이동 lineTo(x,y) : 시작지점에서 (x,y)까지 선을 그림 ​ rect(x,y,width,height) : (x,y)지점을 왼쪽 위 모서리, width,height 길이의 사각형을 그린다. arc(x,y,r,startAngle, endAngle, antiClockwise) : (x,y)시작점으로 하고 r을 반지름으로 하는 원을 그림 , 시작 각도와 끝 각도를 지정할 수 있으며, antiClockwise 값을 설정하면 반시계방향으로 원호가 그려진다. ​..
javascript 이벤트 정리 '이벤트'란 웹 브라우저 사용 중 발생하는 키보드, 마우스 등의 입력으로 이벤트가 발생될 때 작성된 자바스크립트 코드를 실행시키는 것을 '이벤트 처리'라고 한다. ​ ​ *태그 속성은 이벤트 이름 앞에 on을 붙이면 된다. ​ click : html 문서의 요소를 클릭 시 발생 dblclick : html 문서의 요소를 더블 클릭 시 발생 mousedown : 마우스 커서를 html 문서 내의 요소에 위치시키고 마우스 버튼을 누를 시 발생 mousemove : 마우스 커서를 html 문서 내의 요소 위에서 이동시킬 시 발생 mouseup : 마우스 커서를 html 문서 내의 요소 위에 위치시키고 버튼을 땔 시 발생 mouseover : 마우스 커서가 해당 요소 위에 위치할 경우 발생 (연속x) mouse..
[내가 보려고 만든] javascript 문법 정리 기본적인 javascript 문법에 대한 정리이다. ​ - document.write() : html 문서에 콘텐츠를 추가하는 명령어로 화면 출력 명령어이다. html 태그를 추가할 시 태그가 해석되어 출력된다. ​ - 대부분의 자바스크립트 변수는 사용 전에 선언할 필요가 없고, 타입 또한 지정할 필요가 없다. 기본 변수 타입은 다음과 같다. ​ Number, String, Boolean, Undefined, Null ​ *Number는 모든 숫자를 실수로 저장한다. *숫자와 문자열 타입 간의 비교 시에는 숫자에서 문자열로 자동 형변환을 제공한다. *typeof()연산자로 변수 타입 확인이 가능하다. ​ ​ - 변수 이름은 대소문자를 구분한다. ​ ex) var 변수명; var 변수명 = 변수값; - 전..
javascript를 이용한 실습 - canvas로 그림판 제작하기 이번 실습은 javascript의 canvas를 이용한 그림판 제작이다. 설정된 조건은 다음과 같다. ​ 1. 캔버스 크기는 480 x 320 으로 지정한다. 2. 5가지 색상을 선택 가능하게 한다. 3. 색상 글자 클릭 시에도 컬러 선택이 가능하게 한다. 4. 펜 굵기를 선택할 수 있도록 하며 범위는 1~30으로 한다. 5. 선 스타일을 지정한다. 6. [캔버스 초기화]버튼을 만들어 클릭 시 캔버스를 초기화한다. 7. [캔버스 저장]버튼을 누르면 캔버스를 이미지로 변환하여 아래쪽에 보여주고, 크기는 120 x 80으로 한다. ​ ​ 우선 1번 조건의 '캔버스 크기는 480 x 320으로 지정하기'를 만족시키기 위해 크기를 지정한 캔버스를 만들어준다. 요소에 3개의 이벤트들이 지정되어있는데 다음과 같다...
html,Javascript를 이용한 실습 - toggle 문서 제작 이번 실습은 세 편의 시를 선택적으로 보여주는 html 문서 제작이다. 시를 선택적으로 보여주기 위해 javascript를 이용하여 toggle 기능을 사용할 것이다. toggle이란 하나의 설정 값에서 다른 설정 값으로 변경하는 것을 의미하며, 이번 실습에서 시를 선택적으로 보여주는 핵심 기능이다. ​ 우선, 이번 실습에서의 조건은 다음과 같다. 1. 시 제목과 시인이 적힌 박스를 나타낸다. 2. 박스의 모양에 스타일을 적용한다. 3. 박스를 클릭하면 박스의 색이 바뀌면서, 제목에 해당하는 시가 박스 아래쪽에 나타난다. 4. 세 개의 박스는 각각 독립적 선택이 가능하다. 5. 선택 순서에 따라 시가 차례대로 나타난다. (밑으로 나열) ​ 다음은 css 속성을 적용한 것이다. 우선 button 클래스의 ..
Html,Java script를 이용한 컬러 테이블 제작하기 이번에는 html과 Js를 이용하여 컬러 테이블을 제작하는 실습을 진행해볼 것이다. 컬러 테이블은 동적 웹 문서로 입력 값에 따라 테이블 셀의 색상이 바뀌게끔 할 것이다. 이번 실습의 조건은 다음과 같다. ​ 1. 3행 5열 테이블을 제작하여 인덱스를 표시한다. 2. 세로, 가로 값을 입력받는다. (x행 x열 인덱스를 가리키기 위함이다.) 3. 컬러 값을 입력받는다. 4. 적용 버튼을 생성하여 버튼 클릭 시 입력한 인덱스 값의 위치를 원하는 색으로 바뀌게끔 한다. ​ 우선 1번 조건의 '3행 5열 테이블을 제작하고 인덱스 표시'를 만족시키기 위해 html을 사용하여 인덱스가 표시된 테이블을 작성하였다. 1-1부터 3-5까지의 인덱스를 각 셀에 표시해주었다. table 생성에 대한 예시는 이전 포스팅에 있..
html,Js를 이용한 비만도 판정 페이지 만들기(BMI 지수) 이번에는 html과 자바 스크립트 (js)를 이용하여 이름, 키, 몸무게를 입력받아 비만도를 판정하는 페이지를 만들어보려고 한다. 이번 실습에서 만족시킬 조건은 다음과 같다. ​ 1. 이름, 키, 몸무게를 차례대로 입력받는다. 2. BMI 지수를 계산하여 소수점 첫째 자리까지 출력하여 나타낸다. 3. 비만도를 판정하여 '저체중, 정상, 과체중, 비만'을 나타내며, 각 글씨에 효과를 준다. (ex. 색상, 굵기) 4. 표 형식으로 나타낸다. ​ 우선 BMI 지수의 공식은 (몸무게/키*키)이며, 판정 기준은 다음과 같다. -저체중 : 18.5 미만​ -정상 : 18.5 ~ 25.0 미만 -과체중 : 25.0 ~ 30.0 미만 -비만 : 30.0 이상 이를 참고하여 진행하도록 한다. ​ ​ 상당히 간단하고 짧..
[html,css] <form> 요소 정리 요소는 사용자로부터 정보를 입력받을 때 사용하는 매우 유용한 양식이다. 이번 포스팅에서는 요소의 다양한 속성과 활용에 대해 정리해 보려고 한다. ​ (전에 포스팅 했던 요소를 사용한 실습 예제 '식당 예약 페이지 만들기'를 참고하면 좋을 듯 하다!) ​ ​ ​ - > name : form 요소 이름 > method : 데이터 전송 방식 지정 (get : 데이터를 url 주소 뒤에 포함 , post: 프로그램 입출력 방식) > action : 데이터 처리를 위한 애플리케이션 주소 ​ ​ ​ - --(단독 태그) > type 속성 : text, password, radio, checkbox, submit, reset, button, image > name : 변수명 > value : 사용자 입력 값 1) 텍..

728x90