Category: 수업내용
-
2/15-2
파비콘(favicon) : 웹 페이지 제목 왼쪽의 아이콘. head에서 수정가능제목도 바꿀 수 있음. <title></title> git사용방법(github가입은 생략) 최초 설정업로드 하고 싶은 파일이 있다면 그 폴더에 들어가서 빈 곳에 우클릭 후 Git Bash Here 클릭git config –global user.name “git에 설정한 이름”git config –global user.email git에 가입한 이메일확인은 git config –list로 확인가능창이 작을 경우 : 가 뜨는데 enter키를 누르면… Read more
-
2/15-1
canvas:그래픽을 위한 컨테이너 역할[div 같은것]테두리,콘텐츠가 없는 단순 사각형 형태이고 style을 이용하여 크기 설정을 할 수 있으며 id 속성을 쓴다.캔버스 요소의 id 들고오기let 변수명(공간명) = document.getElementByID(“id이름”);그릴 개체 만들기let 변수명2(공간명2) = (위의 변수명).getContext(“개체명”);스크립트 작성변수명2.~ 자바스크립트 내용들사각형 : fillStyle=”원하는색”;-색 지정 / fillRect(x시작값,y시작값,가로길이,세로길이); 출력선 : strokeStyle=”원하는색”; / moveTo(x시작값,y시작값); / lineTo(x끝값,y끝값); / stroke(); 선 생성해줌글자 : font=”글자크기 글꼴스타일”; / fillText(“입력문자”,x위치,y위치);… Read more
-
2/14
<a href=”링크 걸고 싶은 페이지”><img sre=”이미지 주소”></a>기본적인 이미지로 링크 걸어주는 양식a 태그에 target=”_blank”를 걸면 새 텝이나 새 창에서 열기img 태그에 width나 height를 지정하지 안으면 그림의 원래 크기로 나옴 Read more
-
2/10-3
-
2/13-4
멀티미디어HTML5 전까지는 각자 다른 방식으로 처리했지만 HTML5 이후로는 외부플러그인 덕분에 처리방식이 같음 비디오(video)속성 : autoplay(로드 시 자동실행), loop(반복), controls(컨트롤러 생성),mute(음소거) 등공식지원은 mp4, webm, ogv 오디오(audio)속성은 video랑 동일공식지원은 mp3, wav, ogg 플러그인 : 웹브러우저의 표준기능을 확장해주는 프로그램대표플로그인으로는 Java Apple, PDF Reader 가 있다.object 요소나 embed 요소로 HTML 문서에 추가 object요소 : HTML 문서에 삽입할 객체를 명시<object… Read more
-
2/13-3
추가된 form 속성:autocomplete,novalidateautocomplete : 입력된 정보를 저장할지 안할지 명시. 기본값은 자동저장novalidate : 입력된 정보를 전송할 때 그 정보가 유효한지 아닌지 검사하지 않는다는 것을 명시 추가된 input 요소 타입number,range,color,date,time,datetime-local,month,week,email,url,tel,searchnumber(숫자입력),range(가로바),color(색,속성 입력 시 #000000~#FFFFFF 여야함)date(날짜입력,속성 입력 시 연(4자리)-월(2자리)-일(2자리) 입력)time(시간입력,속성 입력 시 시(2자리,24계):분(2자리) 입력)datetime-local(date+time, 입력은 둘 합침)month(연도&월),week(연도&주,연-W주차(2자리) 형식,월~일 로 묶임)email(이메일,제출 시에 메일인지 아닌지 유효성 검사함)url(주소,제출 시 유효성 검사함)tel(전화번호)search(검색) 추가된… Read more
-
2/13-2
HTML5선언 : !DOCTYPE html , 문자셋선언 : meta charset=”UTF-8″의미요소,멀티미디어요소,그래픽요소,input요소의타입 추가 의미요소 : 그 자체로 의미를 가짐. div,span,table등header,nav(navigation),main,section,article,figure,figcaption,footerheader:도입부, 여러개 존재 가능nav:문서 사이를 탐색 할 수 있는 링크,모든 링크가 nav요소인건 아님section:제목이 있고 html 문서의 전체적인 내용과 관련이 있는 콘텐츠들의 집합-main에 묶임article:section과 기능은 비슷하다. 다만, 내용과는 별도의 독립적인 내용들이 대부분이다[광고]figure,figcaption:그래픽이나 비디오 등의 독립전인 컨텐츠, figcaption는 figure 요소를 설명하기… Read more
-
2/13-1
HTML 확장CSS : Cascading Style Sheets인라인 스타일,내부 스타일 시트,외부 스타일 시트내부 : head태그 안에 style 적용할 태그{적용할 스타일} /style 모양우선순위 : 인라인>내부or외부 스타일 시트>웹브라우저 기본 스타일 선택자HTML 요소 선택자, 아이디(ID)선택자, 클래스(CLASS)선택자-앞의 HTML 제외하고는 내부 스타일이다.아이디 선택자 : 앞에 #[#abc{}]을 붙인다. JS에 쓰인다.클래스 선택자 : 앞에 .[.abc{}]을 붙인다. CSS에 쓰인다. Read more
-
2/10-2
입력(input)Form요소 : 사용자로부터 입력 받고 입력한 데이터를 서버로 보낼 때 사용 get방식 : 주소에 데이터를 추가하여 전달. 크기가 작고 중요도가 낮은 정보 전달 시 적절post방식 : 데이터를 별도로 첨부하여 전달. 외부로 데이터가 드러나지 않으며 크기가 크거나 중요도가 높은 정보 전달 시 적절input 요소(type) : 텍스트입력(text),비밀번호입력(password),라디오버튼(radio-name으로 그룹이 묶여야 하나의 버튼에만 불이 들어옴,value를 정해놓으면 선택 시 그… Read more
-
2/10
table 태그<table>:표를 지정해줌<tr>(table row):열을 생성해줌<th>(table header):기존 헤더처럼 굵게+중앙정렬 자동으로 맞춰줌<td>(table data):표의 데이터 입력/th와 td순서는 상관없다테이블 스타일의 기본값은 선의 색이 흰색이다. 그러므로<table style=”border: 선굵기 선 종류 선 색”>을 지정해줘야 한다.<caption> : 캡션. 표 위에 설명이나 제목을 넣을 때 쓰임스타일 관련colspan : 열 합치기(무조건 오른쪽으로만 합침)rowspan : 행 합치기(무조건 아래로만 합침)특이 스타일<border=”두께(정수)” bordercolor=”원하는색” width=”가로길이” height=”세로길이” align=”정렬방법”>여기서 border값… Read more