세연아빠의 개발과 일상의 모습

html5 video audio taghtml5 video audio tag html5 의 새로운 기술중 눈의 띄는 중요한 것중 하나가 video 와 audio 요소이다. 멀티미디어적 요소로 html5 에서는 멀티미디어 요소의 tag 가 강화되었다. 단어에서 알 수 있듯 비디오와 오디오를 구동시 킬수 있는 태그로 html5 이전에는 adobe flash 나 microsoft silverlight 등 외부 플러그인을 통해서 구동할 수 있었던 기능들이다 1 video 사용하기 사용법은 간단하다. 태그를 사용하고 html 태그안에 넣기만 하면 된다. 예제를 보자 1 cs 위 코드만으로 브라우저에서 동영상을 재생할 수 있습니다. 이렇게 재생할 수 있을뿐 아니라 javascript 통해 여러가지 조작도 가능합니다..

html5 canvas api 사용html5 canvas api 사용 html5의 canvas 요소는 그래픽을 자유롭게 그릴 수 있는 영역을 말한다, 캔버스는 고정된 넓이와 높이를 갖고 있어 그 영역 내라면 원이나 사각형등의 도형이나 선, 이미지 등의2D 또는 3D 그래픽을 자유롭게 그릴 수 있습니다. 1 CASVAS 사용방법 canvas( 캔버스)를 사용하는데 다른 특별한 준비를 필요가 없습니다. 다만 canvas 태그를 html 안에 기술하여 주면 됩니다. 캔버스의 길이와 높이는 고정되어 있으므로 width 와 height 를 지정하고 추후 javascript 로 값을 변경할 수도 있습니다. canvas 태그 예제 1 cs 위 코드를 이용하면 넓이 800 높이 500 픽셀의 투명한 캔버스를 지정할 수..

html5 태그 중 생략가능한 종료태그html5 태그 중 생략가능한 종료태그 기존의 태그중 html5 에서 종료태그를 기술해서는 안 되는 요소가 있다. 아래 요소들은 종료태그를 기술해서는 안 됩니다. area, base, br, col, command, embed, hr, img, input, keygen, link, meta, param, source 1 예제 예를들어 아래처럼 사용되면 안 됩니다. 1234 cs 다만, 이러한 태그들 XML 처럼 /> 사용하여 태그 끝을 표시할 수 있습니다. 1 cs 2 상황에 따라 생략 가능한 요소 html5 에서는 어떠한 태그는 특별한 상황에서 생략될 수 있는가에 대하여 알아보겠습니다. 요소 시작태그 종료태그 html ○ ○ head ○ ○ body ○ ○ li ○..

html5 태그 figure, figcaptionhtml5 태그 figure, figcaption html5 에서는 html4 에서는 없던 새로운 태그들이 추가 되었습니다. 그중에서 이미지 관련 태그인 태그와 태그에 대하여 알아보도록 하겠습니다. 1 그림이나 미디어등을 대상으로 하는 태그로 는 설명글을 붙이 대상을 정의하는 태그이고 은 대상에 설명글을 붙이는 태그이다. 다만 를 정의했다고 해서 꼭 을 설정해야 하는건 아니지만 사용할때는 꼭 태그안에서 사용되어야 한다. 2 예제 위 설명대로 예제로 html5 문서를 작성해 보았다. 1234567891011121314151617181920212223242526272829303132333435363738394041html5 테스트 html5는 쉬워요 html5..

html5 문서의 구조html5 문서의 구조 가장 중요한 변화임에도 쉽게 놓치는 부분이 html5 의 시멘틱한 문서구조입니다. 여기에[서 html5 문서구조가 html4의 문서 구조와 어떻게 다른지를 먼저 살펴보도록 하자 1 html4 vs html5 html5 에서 두드러진 차이점은 시멘틱한 문서 구조입니다. 시멘틱 테그를 사용했을때와 사용하지 않았을대 어떻게 다른지 확인해보자 html4 에선 문서의 레이아웃을 구성할때 를 이용해 텍스트나 이미지를 담아놓고 CSS 를 사용해서 각 를 원하는 형태로 배 치합니다. 이때 요소를 구분하기 위해 id="header" 등 식별자를 붙여서 표현하게 됩니다. 제작자가 임의로 붙이는 것이기 때문에 소스만 보아서는 문서 구조나 내용을 알기가 쉽지 않게 됩니다. 의미없는..

html5 의 등장html5 의 등장 누구나 미래의 웹표준으로 html5를 이야기 하고 있다. 아직 표준규약이 만들어지지 않은 상황인데도 html5 버전은 많은 사람들에게 관심을 받고 있다. html5 가 왜 만들어진 것인지 그리고 왜 우리가 지금 주목을 해야 하는지 대해 알아보자 1 웹과 웹 어플리케이션 요즘 웹은 진화하여 단순히 정보를 보여주는 웹에서 스스로 특정 기능을 수행하기 위해 실행되는 프로그램이 되어 가고 있다. 예로 구굴 문서도구나 MS 의 웹 오피스를 이용하여 자신의 컴퓨터에 편집프로그램이 설치되어 있지 않더라도 웹상에서 스 프레드 시트나 프레젠테이션 문서를 작성할 수 있습니다. 이와같이 웹 자체가 하나의 어플리케이션처럼 동작하는것을 웹 어 플리케이션 이라고 합니다. 2 WHATWG ht..

CSS 외각선 형식CSS 외각선 형식 CSS 의 외각선 형식을 설정합니다. 외각선 형식은 모든 요소에 설정할 수 있으며 border-style을 이용하면 상하좌우의 외각선 형식을 한꺼번에 설정할 수도 있습니다. 이 경우, 값을 스페이스로 구분해서 지정하면 주어진 값의 갯수에 따라 다음과 같이 외각선 형식이 설정됩니다. 1 형식 ▶값이 한 개인 경우 - 상하좌우 ▶값이 두 개인 경우 - 값1(상하값) 값2(좌우) ▶값이 세 개인 경우 - 값1(상) 값2(좌우) 값3(하) ▶값이 네 개인 경우 - 값1(상) 값2(우) 값3(하) 값4(좌) none 과 hidden 은 상하좌우 외각선을 모두 나타내지 않고 외각선 굵기도 0으로 설정합니다. 단, 표의 셀 외각선과 겹쳐질 경우, none 은 다른값이 우선되고 h..

jquery 예제로 배우기jquery 예제로 배우기 jquery 는 html DOM(DCOUMENT OBJECT MODEL: 문서개체모델)과 자바스크립트 사이의 상호작용을 간단하게 해주는 오픈소스 자바스크립트 라이브러리이다. jquery 는 도큐먼트 엘리먼트에 접근하기 위해 셀렉터(selector) 메커니즘을 제공한다. 도큐먼트 구조로 명료하면서 읽기 쉬운 형식으로 표현하는 css 셀렉터로 페이지의 엘이먼트를 찾을 수 있다. 1 tr:even / tr:odd html 내에 가독성을 높이기 위해 테이블의 행단위를 짝수와 홀수로 배경색을 지정하여 보기좋게 만들여고 한다면 jquery 로 간단하게 표현 할 수 있다. 12345678910111213141516171819202122232425 New Docume..

자바스크립트 [javascript]자바스크립트 [javascript] 자바스크립트 언어는 클라이언트 측(client side)과 서버측(server side) 으로 나우어져 있으며, 우리가 주로 사용하는 것은 사용자 컴퓨터의 웹브라우저에서 동작하는 클라이언트측 즉 자바스크립트이다. 이 자바스크립트는 기존의 적정인 html 에 인터렉티브한 구성요소들을 만들거나 컨트로 할 수 있는 기능이다. 1 자바스크립트란 ? 자바스크립트는 html 문서에 독특한 효과를 만들어내기 위한 스크립트 언어이며 html 태그만으로 원하는 기능의 html 문서를 만들 수 없기 때문에 보조적인 역활로 자바스크립트 언어가 필요하다. 2 특징 1) 웹브라우저의 기능을 지원하는 언어 2) 브라우저에서 실행 가능한 스크립트 언어 3) 객체..

Mysql Workbench 설치Mysql Workbench 설치 데이터 베이스 사용자라면 설치된 데이터베이스의 특성에 맞는 데이터베이스 툴들을 하나이상 사용하고 있을것이다. 이번엔 mysql 사용자들에게 인기있는 관리툴인 workbench 의 설치법에 대하여 포스팅을 해보겠다. 1 다운로드 사이트 우선 workbench 을 다운로드 받을 수 있는 사이트에 적속을 해보자 url 은 아리와 같다. https://www.mysql.com/downloads/ 사이트 중간부분에 다운로드 부분을 클릭하면 아래와 같은 페이지로 이동을 하게 된다. 2 설치하기 다운로드된 파일을 다운로드된 폴더에서 실행을 클릭한다 next 버튼클릭 물론 next 설치버전 선택화면 complete 버젼 선택 최종 install 버튼 클..