본문 바로가기

컴퓨터/HTML,CSS,JS,JQUERY

(21)

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) 텍..

[내가 보려고 만든] css 속성 정리 2 지난 포스팅에 이어 css 속성 정리에 대한 내용이다. 이번에는 더 활용적인 속성들을 정리해 볼 예정이다. html 요소들은 박스 모양의 공간을 차지하기 때문에 박스 모양의 영역을 구분할 수 있다. - 콘텐츠 (element/ content) :문서 내용 - 테두리/경계선 (border) : 콘텐츠를 둘러 싼 경계 > 테두리/경계선 두께 : border-width, border-top-width,... > 테두리 모양 : border-style (soid, dotted, double,...) > 테두리 색 : border-color * border로 줄여쓰기 가능 border(두께, 모양, 색상, 값) - 내부 여백 (padding) : 테두리와 내용 사이 여백 > padding, pa..

[내가 보려고 만든] css 속성 정리 html에 이어 css 스타일 시트의 속성을 정리해 보려고 한다. - 내부 스타일 시트 선언 : 의 태그에서 선언 ex) - 외부 스타일 시트 선언 : 에서 태그를 이용 ex) -인라인 삽입 : 모든 태그에 style 속성을 지정하여 삽입 가능 (해당 태그에 특정 스타일 적용 시 사용) - 기본 문법 : 선택자 { 속성: 값; ...} > 선택자(selector) : css 적용 대상 태그 > 속성, 속성 값 : ':' 으로 속성, 속성값 구분, ';' 으로 속성 선언 구분 1. 태그 선택자 - 다중 태그는 ' , '로 구분 - 태그 나열 -> 태그 중첩 - 다중 속성은 ' ; '로 구분 - 다중 속성값은 ' , '로 나열 (순서대로 나열) 2. ID 선택자 - ... - 각..

[내가 보려고 만든] html 요소 2 이번 html 요소들은 링크와 하이퍼텍스트, 하이퍼미디어와 관련된 것들이다. - 하이퍼텍스트 : 서로 연관된 문서, 텍스트들을 연결하는 것 - 하이퍼미디어 : 텍스트를 비롯하여 이미지, 오디오 등의 멀티미디어 정보의 연결 - 노드 : html 문서, 멀티미디어 정보를 표현하는 기본 단위 - 링크 : 노드 연결 요소 - 앵커 : html 문서 내에서 링크의 출발점/도착점 의미 - : 링크의 시작점 앵커 표현 > href : 이동 목적지 문서의 URL을 지정하는 속성 (위치 지정) - 절대 주소 : URL 형식(인터넷 주소) -외부 링크 사용 시 - 상대 주소 : 현재의 문서와 같은 폴더의 위치에서부터 상대 주소 - 내부 링크 사용 시 > title : 말풍선 창에 나올 설명 지정 속성..

이전 1 2 3 다음

728x90

티스토리툴바