본문 바로가기

제가 쓴 책175

전체 공개된 HTML5, CSS3 and JavaScript 자료에 대한 목차 안녕하세요, 현재 성공회대학교 소프트웨어공학과 외래교수로 재직하며 C#, 데이터베이스, HTML5 등을 강의하고 있는 원철연입니다. 얼마 전 HTML5, CSS and Javascript 책 한 권 분량(500 페이지, A4 기준)을 모두 본 블로그에 공개했습니다. 전체 목차가 일목요연하게 정리된 게 없어서 스스로 학습하는데 조금 어려움이 있을 것 같아서 엑셀 파일에 전체 리스트를 다음과 같이 만들었습니다. 필요하신 분들은 보시고 학습에 조금이라도 도움이 되시기 바랍니다. 그리고 본 내용을 가지고 비상업적인 목적으로 활용하시고자 하시는 단체나 선생님은 소속,성명(담당자),이메일, 전화번호를 비밀로 남겨주시면 추후 HTML5 관련하여 업데이트가 있거나 강의시에 도움될 내용이 있을 경우 연락드리겠습니다. 감.. 2013. 8. 20.
파이 차트(Pie Chart) 만들기 파이 차트(Pie Chart) 만들기 canvas에 파이 차트를 그리기 위해서는 기본적으로 canvas 부분에서 설명했었던 arc() 메서드에 대해서 다시 한 번 생각해볼 필요가 있습니다. arc(x, y, radius, startAngle, endAngle [, anticlockwise]) 위에서 x, y는 원의 중심좌표를 radius는 반경을 나타내고 startAngle은 시작 각도를 나타내고 endAngle은 끝 각도를 명시하는데 사용합니다. 각도는 보통 0부터 2 사이값으로 설정하고 실제 코드에서는 자바스크립트의 Math 객체(Object)의 PI 속성을 이용하여 그 각을 표시하게 됩니다. 다시 말해서 45도의 경우 인데 이를 45도는 0.25*Math.PI 형태로 코드를 작성할 수 있다는 것입니.. 2013. 8. 8.
차트(Chart) 만들기 - 막대 그래프 차트(Chart) 만들기 차트(Chart)는 다양한 분야에서 사용되고 있고 특히 다수의 데이터를 간의 관계를 나타내는데 특별히 효과적이라서 실적이나 장래 성장 가능성 및 목표 매출등과 같은 것을 시각화하는데 효과적입니다. 이러한 차트를 만드는데 있어 HTML5 요소(Element) 중 Canvas 요소는 여러분들에게 다양한 형태의 차트(Chart)를 만들 수 있도록 합니다. 여기서는 Canvas를 이용하여 다양한 형태의 챠트 중에서 막대(bar), 파이(pie) 차트(chart) 만드는 방법에 대해서 알아봅니다. 막대 차트(bar chart) 만들기 먼저 막대(bar) 형태의 차트를 만들기 위해서는 이미 canvas 부분에서 다루었지만 다시 설명하면 기본적으로 직사각형(Rectangle)을 만드는 방법을.. 2013. 8. 8.
칼라 이미지를 Grayscale 이미지로 나타내기 칼라 이미지를 Grayscale 이미지로 나타내기 Grayscale이란 검은색(black)과 흰색(White)의 중간색인 회색(Gray)의 색상으로 이미지를 표현하는 것으로 빛의 강도(Intensity)를 기준으로 하며 0부터 255까지 즉, 256 단계로 검정색(0)과 흰색(255)을 표현하고 중간 단계인 128은 회색으로 표현합니다. 그래서 RGB 칼라 이미지를 Grayscale 형태의 이미지로 나타내기 위해서는 jQuery 같은 편리한 JavaScript 라이브러리를 이용하면 grayscale() 함수를 이용하여 처리하면 되겠지만 여기서는 순수 javascript를 이용하여 그 기능을 구현하는 방법에 대해서 소개합니다. RGB 색상값을 Gray 색상으로 바꾸는 방법은 다양한 형태가 존재하는데 가장 .. 2013. 8. 8.

티스토리툴바