비전공자 개발일기

checkbox 연습 선택된 box의 value 확인 h.w.1) All select 선택 시 모든 checkbox 선택 h.w.2) checkbox의 선택이 바뀌면 선택된 항목 출력(check 된것만 출력) check1 : check2 : check3 : All select : 선택된 항목 :

HTML CANVAS CANVAS는 웹 페이제 그래픽을 그려주는 컨테이너 CANVAS는 JAVASCRIPT로 그래픽을 그림 strokeRect(x1,y1,x2,y2) 사각형 그리기 fillStyle: 사각형 색 지정 fillRect: 색이 있는 사각형 그리기 strokeRect: 사각형 테두리 그리기 clearRect: 사각형 모양의 지우개 웹 브라우저가 canvas를 지원하지 않습니다(라는 문장만 출력) lineTo 선그리기 moveTo: 선이 시작되는 좌표 lineTo: 선이 끝나는 좌표(연속으로 지정 가능) ex)let c2 = document.getElementById("canvas2").getContext("2d") c2.moveTo(0,0); c2.lineTo(300,100); c2.lineT..

html SVG(Scalable Vector Graphics) xml 형식의 벡터 기반 그래픽을 정의하는 요소 svg는 확장 가능한 웹용 벡터 그래픽을 나타냄 svg는 xml 형식으로 그래픽을 정의 svg는 모든 요소와 속성에 에니메이션 정의 가능 ex) 경과 시간에 따른 스타일이 변화는 것 svg는 W3C(html을 표준화하는 곳)에서 권장하는 태그(요소) SVG 사각형 그리기 rect width: 도형의 너비 height: 도형의 높이 stroke: 테두리 색 stroke-width: 테두리 두께 fill: 도형의 배경색 opacity: 도형의 투명도 x: 사각형의 왼쪽 상단 x좌표 y: 사각형의 왼쪽 상단 y좌표 rx: 사각형 모서리 굴곡의 x축 반지름 ry: 사각형 모서리 굴곡의 y축 반지름 SV..

HTML Iframe(Inline frame) iframe은 다른 웹 페이지를 추가할 수 있음 src: 출력될 url, width: 넓이, height: 높이(모든 요소의 스타일 속성은 동일하게 적용 가능) 출력되지 않을 때.... iframe은 스타일이 적용되고 border 바꿀 수 있음(border: none -> 테두리 없음) iframe name: 은 a 요소의 target으로 지정할 수 있음(_self, _blank, iframeName-iframe으로 이동) target="targetTest" : 이동할 페이지는 L04_html_style.html 이동 target="_self" : 이동할 페이지는 L04_html_style.html 이동 target="_blank" : 이동할 페이지는 L04..

중첩 연산자 1. > div>ul>li 2. + div>p+bq 3. ^ div+div>p>span+em^bq div+div>p>span+em^^^bq 4. * ul>li*5 5. ( ) (div+dl>(dt+dd)*3)>footer>p 속성 연산자 1. 아이디와 클래스 div#header+div.page+div#footer.class1.class2.class3 2. 사용자 정의 속성 td[title="Hello world!" colspan=3] 3. 항목 번호 매기기: $ ul>li.item$5 ul>li.item$$$*5 $ 한 개당 자릿수 의미 ul>li.item$@-* 역방향 출력 ul>li.item$@3*5 기본값 변경시, $옆에 @n(n: 숫자) ul>li.item$@-3*5 4. 텍스트: {..

블록(BLOCK) 요소 블록 요소는 항상 새 줄에서 시작 블록 수준 요소는 항상 사용 가능한 전체 너비를 차지합니다(가능한 한 왼쪽과 오른쪽으로 늘어남) 블록 수준 요소에는 위쪽 여백과 아래쪽 여백이 있지만 인라인 요소에는 없음 ※ : 브라우저가 사용자에게 표시 할 수있는 대체 콘텐츠를 정의 인라인(INLINE) 요소 인라인 요소는 새 줄에서 시작하지 않음 인라인 요소는 필요한 만큼만 너비를 차지 ※ : 약어를 정의 ※ : 텍스트 양방향 재정의 ※ : 특정 단어 기울이면서 강조(미술 작품, 책, 노래 등) ※ : 콘텐츠 내에서 정의를 하기 위해 사용, 기울임으로 표시됨 ※ : 키보드 입력을 정의 Press Ctrl + C to copy text (Windows). Press Cmd + C to copy ..

Image Maps Click on the computer, the phone, or the cup of coffee to go to a new page and read more about the topic: 이미지 맵을 정의, 이미지 맵은 클릭 가능한 영역이 있는 이미지 이미지 맵 내부의 영역을 정의 반응형 디자인의 아트 디렉션

FORM EVENTS 속성 설명 onblur 포커스가 사라졌을 때 발생 onchange 폼 컨트롤의 값이 변경 되었을 때 발생 oncontextmenu 우클릭 시 나오는 메뉴 컨트롤 onfocus 입력 필드가 포커스를 취득했을 때 발생 oninput 사용자가 필드에 무언가를 쓸 때 oninvalid 입력 필드가 유효하지 않은 경우 발생 onreset 양식에서 재설정 버튼을 클릭 시 발생 onsearch 검색을 제출할 때 발생 onselect 요소에서 일부 텍스트를 선택한 후 onsubmit 폼의 정보를 서버로 전송하는 명령인 submit 시에 발생 MOUSE EVENTS 속성 설명 onclick 버튼 클릭 시 발생 ondblclick 버튼 더블 클릭 시 발생 onmousedown 단락 위에서 마우스 버튼..