HTML 18

css javascript html 에 연결

head태그안 css href 는 css경로를 넣어준다 javascript defer는 html에 먼저 나오게하고 그 다음 jvavascript를 나오게한다 src에 js경로를 넣어준다 asyn boolean타입의 속성 true로 자동으로 설정한다 웹페이지동작법은 html파일위에서부터아래로 실행된다 asyn(async) 브라우저가 html 다운로드받아서 파싱하다가 js파일 만나면 다운받으라고 명령하고 다시 파싱하다가 js파일이 다운이 다 되었으면 그때 파싱하는 것을 멈추고 다운로드된 js파일을 실행하게된다 장점은 파싱하는동안 다운받아서 다운받는시간 줄일수있다 단점은 js파일이 html 파싱 전에 실행되어서 만약 js파일에서 querySelector 이용해 DOM요소를 조작하려고하면 조작시점에 html의 ..

HTML 2022.03.13

meta

head태그안에 사용 웹페이지의 저자 웹페이지의 내용 요약 검색할때 사용할수있는 키워드 검색분류할수있음 웹페이지에 직접적으로 나오는것은 아니지만 웹페이지에 설명하는역할이다 char - character 문자 set - 집합 charset = 문자의 규칙 utf- 8은 현재 웹페이지를 컴퓨터에 저장할때 utf-8이라는 방식으로 저장 생략시 화면깨짐 인코딩 : 컴퓨터에 저장하는것 디코딩 : 저장되어있는 정보를 꺼내서 화면에 표시하는 과정

HTML 2022.03.13

svg

svg 확장가능한 벡터그래픽 웹용 벡터기반 그래픽을 정의하는데 사용 /벡터: ctrl+scroll해도 깨짐현상없음 모양기반 스크립트및 css통해 수정가능 선(line) : 두 점을 연결하는 선을 만드는 데 사용된다. 원 : 중심점과 반지름을 기준으로 원을 그리는 데 사용된다. cx 원의 중심에서 x축 좌표 cy 원의 중심에서 y축 좌표 r 원의 반지름.0보다 작거나 같은 값은 원의 렌더링을 비활성화한다 rect : 직사각형의 위치, 폭, 높이를 지정한다 또한, 모서리를 둥글게 할 수 있다. x x좌표 -> y y좌표 -> width 넓이 height 높이 rect으로 모서리둥글게하기 x x좌표 -> y y좌표 -> width 넓이 height 높이 rx 수평 모서리 반지름.기본값: auto ry 수직 모..

HTML 2022.02.13

Canvas

canvas 웹페이지 그래픽을 위한 컨테이너역할 그래픽위해 스크립트언어사용해야함 픽셀기반 / 스크립트를 통해서만 수정가능 /그래픽 주작업인 게임에 적합 script 안에서 함수를 이어가겠다 //원호그리기 context.beginPath(); // 위의 사각형 다음으로 새로운경로를 시작한다 context.arc(50, 100, 10, 0, 2*Math.PI); //(x,y,radius,startAngle,endAngle,counterclockwise) x-호 중심부의 수평좌표 y-호 중심부의 수직좌표 radius - 반지름 startAngle,endangle -호의 시작점과 끝 점 counterclockwise- 시작점끝점의반대방향 (기본값:false) 0PI와 2PI사이 시 작점끝점나타낸다 context..

HTML 2022.02.13

html5 video /audio

비디오(video) - 비디오 출력된다 3가지 포맷지원 - MP4 (MIME 타입: video/mp4) - WebM (MIME 타입: video/webm) - Ogg (MIME 타입: video/ogg) video속성 autoplay : 자동 재생 controls : 컨트롤러 표시 재생마음대로 돌릴수있음/ 소리도조절가능 loop : 반복 재생 muted : 음소거 poster : 비디오 다운로드하는 동안이나 사용자가 재생버튼 누르기 전까지 나오는 비디오이미지 오디오 오디오속성 autoplay : 오디오의 자동 재생 여부 controls : 오디오의 기본동작조절가능 /소리 줄였다 재생부분선택가능 loop : 오디오반복재생 preload : 페이지가 로드될때 오디오 파일이 같이 로드되어야하는지의 여부 pre..

HTML 2022.02.12

html5 form

Form 사용자로부터 입력받고 입력한 데이터서버로 보낼때 사용 get : 주소입력창이 그대로보임 중요도가 낮은 정보를 보낼때 주로사용한다 post : 데이터가 외부에 드러나지 않고 보안이 좋다 input 요소 text : text입력 text가 보이게된다 password : 비밀번호 text를 눌렀을때 text는 보이지 않고 ● 나온다 file : 파일선택 내파일을 들고올수있다 *accept = "image/*"하면 파일선택누르면 image파일이 먼저나온다 checkbox : 체크박스 radio : 라디오버튼 *checked 하면 F5를 눌러도 그곳은 체크가되어져있다 textarea : 문장입력 여러줄의 텍스트를 입력할수있다 button : 버튼입력 사용자가 누를수있는버튼 버튼을 눌러주세요 submit ..

HTML 2022.02.10