본문 바로가기

공부/HTML518

Canvas2 사각형 그리기 그전에 해 놓은 준비된 캔버스에 ctx.fillStyle = "rgb(0,0,255)"; //어떤 색을 채울 것인지 RGB값 설정 ctx.fillRect(10, 10, 100, 100); //사각형 그리기 시작점, 끝점 좌표 설정 추가하면 되는데 여기서 ctx.fillStyle에 rgba가 들어가도 되는데 그렇게 되면 앞에 숫자 세곳은 rgb가 되고 네번째 숫자는 a(투명도)가 된다. 그래서 0은 완전투명, 1은 불투명, 0.5는 반투명이 된다. 그리고 rgb는 '#FFFFFF'와 같이 16진수 코드를 사용할수도 있다. Canvas에 사각형을 그릴 때 사용되는 함수의 속성에는 fillRect - 가득 찬 사각형을 그릴 때 사용 strokeRect - 사각형의 테두리만 그릴 때 사용 clearRect - .. 2011. 11. 4.
Canvas1 그림 그리기 준비 1. 페이지가 로드되면 캔버스에 그림이 그려지도록 준비 완료 결과 화면 : 아직은 본격적으로 그림을 그리지 않은 상태라서 검정색 박스 하나만 나타난다. 그리고 canvas 요소는 기본적으로 테두리나 배경선을 가지고 있지 않기 때문에 스타일시트를 이용해서 테두리 경계선을 넣어주었습니다. 2011. 11. 4.
시멘틱 웹 [semantic web] 요약 - 컴퓨터가 정보자원의 뜻을 이해하고, 논리적 추론까지 할 수 있는 차세대 지능형 웹. 본문 - 현재의 컴퓨터처럼 사람이 마우스나 키보드를 이용해 원하는 정보를 찾아 눈으로 보고 이해하는 웹이 아니라, 컴퓨터가 이해할 수 있는 웹을 말한다. 즉 사람이 읽고 해석하기에 편리하게 설계되어 있는 현재의 웹 대신에 컴퓨터가 이해할 수 있는 형태의 새로운 언어로 표현해 기계들끼리 서로 의사소통을 할 수 있는 지능형 웹이다. 원리는 사람들이 이해할 수 있도록 자연어 위주로 되어 있는 현재의 웹 문서와 달리, 정보자원들 사이에 연결되어 있는 의미를 컴퓨터가 이해할 수 있는 형태의 언어로 바꾸는 것이다. 이렇게 되면 컴퓨터가 정보자원의 뜻을 해석하고, 기계들끼리 서로 정보를 주고받으면서 자체적으로 필요한 일을 처.. 2011. 11. 4.
블록레벨 요소와 인라인 요소 HTML 문서에는 블록레벨(black level) 요소와 인라인(inline)요소라고 하는 두 개의 큰 흐름의 줄기가 있다. 블록레벨 요소 나 , 과 같은 요소들은 블록레벨 요소이다. 블록레벨 요소의 특징은 줄 바꿈 태그인 과 같은 요소를 쓰지 않아도 스스로 줄 바꿈이 된다는 데 있다. 이 요소들은 기본적으로 문서 내에서 가로로 흐르지 않고 세로로 흐른다. 그리고 주변에 일정량의 공간을 만든다. 또한 너비를 지정해 주지 않으면 풀사이즈가 되어 가로로 가득 찬다. CSS를 적용하지 않고 이 요소들을 보면 세로로 쭉 나열되는 것을 볼 수 있다. 블록레벨 요소는 가로, 세로 일정량의 여백을 가지고 있는데 이것은 브라우저마다 조금씩 다르다. 인라인 요소 , , 과 같은 요소들은 인라인 요소이다. 이 요소들의 특.. 2011. 11. 4.
HTML5 HTML5 = HTML markup(+new elements) + Javascript APIs 기존 HTML은 단순 마크업으로서 그 한계가 명확했지만 HTML5는 마크업에서의 기능 향상, 자바스크립트 API와의 공고한 결합을 통해서 마크업 이상의 의미를 가지를 마크업 언어가 되었다. 예를 들어 우리나라 은행 사이트 하나를 접속하는 데 평균 5개 정도의 액티브엑스를 설치해야 했다. HTML 자체적으로 동적인 애니메이션이나 UI를 처리할 수 없기 때문에 플래시와 같은 외부 기술을 이용해야 하고 이에 수반해 플러그인을 설치해야 하는 등 웹이 프론트단에서마저도 너무나 많은 외부 기술에 의존하고 있었다. 그래서 액티브엑스를 설치하지 못하는 컴퓨터를 사용하거나 시각장애인들이 액티브엑스로 도배되어 있는 사이트를 정상.. 2011. 10. 29.
HTML5 TEST 닷컴 브라우저의 HTML5 지원 정도를 체크해 주는 홈페이지이다. HTML5 TEST 닷컴. 인데, 450점이 만점이다. http://html5test.com 에 접속하자마자 내 브라우저의 점수가 자동으로 뜬다. 파이어폭스 같은 경우 298점이 나왔다. 익스플로러는 41점이 나왔다. HTML5와 CSS3 공부를 할 때 익스플로러는 쓰지 말아야겠다. 인터넷 익스플로러의 경우 버전9부터 HTML5를 본격적으로 지원한다(익스플로러8 이전의 브라우저에서는 HTML5를 지원하지 않는다). 그리고 파이어폭스나 오페라, 사파리와 같은 브라우저도 가장 최신 버전을 설치해야 이전 버전보다 나은 HTML5 지원 결과를 얻을 수 있을 것이다. 2011. 10. 28.