프로그래밍/HTML 11

[HTML] html canvas 사용하기

canvas 사용하기 html 기본 element인 canvas를 사용하여 서명하고 api로 보내주는 코드를 작성해봄 html 코드 저장 지우기 닫기 javascript 코드 const signatureButton = document.getElementById('signatureButton'); const canvasModal = document.getElementById('canvasModal'); const canvas = document.getElementById('canvas'); const context = canvas.getContext('2d'); let isDrawing = false; // Handle button click event function handleSignatureClick..

Java, Html, Jsp에서의 주석처리 방법

의 방식으로 사용 html문서 안에서 사용됨 특징으로는 일반 클라이언트들도 '소스보기'를 통해 주석을 볼 수 있으므로 보안에 관련된 주석은 하지 않는 것이 좋음 는 스크립트릿 태그인데, 이 태그 안에서 java 및 jsp 언어를 사용할 수 있음 따라서 java의 주석 또한 스크립트릿 태그 안에서 //(한줄주석)주석문구, /*주석문구*/(블럭주석)을 기입 html주석보다는 보안에 강하지만, java파일로 저장되기 때문에 java파일 안에서 주석을 찾으려면 찾을 수 있음 jsp파일안에서 주로 사용되는 주석 보안성이 가장 우수함 참고자료 👇 https://knocktonote.tistory.com/56

07.02(semantic tags)

semantic tags 자신의 의미를 브라우저와 개발자 모두에게 명확히 나타내는 요소 시맨틱태그를 사용하여 코드의 가독성을 높이고 명확하게 함 non-semantic 요소 - , 자신의 컨텐츠에 대해 아무것도 설명해주지 않음 semantic 요소 - , , 자신의 컨텐츠를 명확하게 정의 semantic tags 태그 설명 내용을 정의 페이지 콘텐츠를 제외한 콘텐츠를 정의 링크, 광고, 사이드바 표시 등 사용자가 보거나 숨길 수있는 추가 세부 정보를 정의 요소에 대한 캡션을 정의 일러스트레이션, 다이어그램, 사진, 코드 목록 등과 같은 자체 포함 된 콘텐츠를 지정 문서 또는 섹션의 바닥글을 지정 주로 저작권, 연락처 정보 등 내용이 삽입되며 , , 등 다른 레이아웃 사용가능 문서나 섹션의 머릿글을 지정 ..

09.11(form)

form 사용자로부터 입력 받을 수 있는 HTML 입력 폼(form)을 정의할 때 사용 요소는 다음과 같은 요소들을 하나 이상 포함할 수 있음 이름 : 학번 : 학과 : 의 속성 속성 속성값 설명 action URL 폼 데이터가 서버로 제출될 때 해당 데이터가 도착할 URL명시 autocomplete on off 요소에서 자동 완성 기능을 사용할지 여부를 명시함 enctype application/x-www-form-urlencoded multipart/form-data text/plain 폼 데이터가 서버로 제출될 때 해당 데이터가 인코딩되는 방법을 명시함 (단, 요소의 method 속성값이 “post”인 경우에만 사용할 수 있음) method get post 폼 데이터가 서버로 제출될 때 사용되는 H..

09.10(link, 미디어 관련 태그)

link 태그 주로 외부 스타일 시트를 연결 할때 사용 요소는 빈 태그이며, 속성만을 포함 audio 태그 음악이나 오디오 스트림과 같은 사운드 정의할 때 사용 요소는 현재 MP3, WAV, Ogg의 세 가지 포맷 파일을 지원 당신의 브라우져는 음원재생을 지원하지 않습니다. 브라우져를 업데이트 해주세요 video 태그 무비클립이나 비디오 스트림과 같은 비디오를 정의할 때 사용 요소는 현재 MP4, WebM, Ogg의 세 가지 포맷 파일을 지원 당신의 브라우져는 비디오를 재생할 수 없습니다. audio태그와 video태그의 공통속성 속성 속성값 설명 autoplay autoplay 실행될 준비가 끝나는 대로 자동으로 실행됨을 명시함 controls controls 플레이 버튼이나 정지 버튼과 같이 오디오 ..

06.09(div와 span, iframe)

block요소 한 줄에 한 개 div, p, pre, hx 태그 block요소 첫번째 영역 두번째 영역 Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eos repudiandae aperiam earum alias neque ab debitis incidunt illo! Beatae itaque aliquid non, voluptates officia blanditiis cumque animi excepturi asperiores omnis. inline요소 한 줄에 여러개 나열 span, 각 phrase Tag inline요소 첫번째 영역 두번째 영역 Lorem ipsum dolor sit amet, consectetur adipisicing e..

06.08(table)

table 구성요소 태그 설명 테이블을 만드는 태그(테이블 관련 최상위태그) 테이블의 헤더부분을 만드는 태그 테이블의 행을 만드는 태그 테이블의 열을 만드는 태그 작성예시 브라우져 제조사 홈페이지 IE MS http://www.microsoft.com Chorme Google https://www.google.com Safari Apple https://www.apple.com FireFox Mozilla https://www.mozilla.com 테이블 디자인 속성 설명 border 테이블의 테두리 bordercolor 테이블의 테두리 색상 width 테이블 가로 크기 height 테이블 세로 크기 align 정렬 bgcolor 배경색 colspan 가로 합병(열 합병) rowspan 세로 합병(행 합..

06.05(목록관련 태그와 표관련 태그)

목록태그 순서가 필요하지 않은 목록 만들때 사용 리스트 앞에 특정모양이 출력( default : • ) 해당 모양은 CSS를 이용하여 수정할 수 있음. 순서가 있는 목록 만들때 사용 속성으로 문자(abc… / ABC), 숫자(123…), 로마자(ⅠⅡⅢ..ⅰⅱⅲ..) 설정 CSS로 순서를 설정 가능 (작성방법) 내용1 내용2 내용3 용어나 문장에 대한 정의(definition) 리스트 설정 자동으로 들여쓰기가 됨 (작성방법) 정의제목 정의내용 정의내용 목록태그 사용 예시 목록 관련 html5 css3 javascript:ecmascript6 jquery html5 css3 javascript:ecmascript6 jquery 한국어 안녕하세요 잘가 영어 일본어 html5 hyper text markup l..