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

html5 input tag autofocushtml5 input tag autofocus html5 에서 input 태그중 새롭게 추가된 기능중에 지금까지는 자바스크립트로 처리하여야 했던 기능을 간단한 속성추가로 그 기능을 대신하게 할 수 있도록 추가되었다. 그중에 autofocus 속성을 알아보자. 1 input 태그의 autofocus 속성 페이지가 오픈되자마자 입력필드중 원하는 필드에 마우스 커서가 바로위치하여 사용하기 편리하도록 처리 할 수 있다. 기존엔 이렇게 처리하려면 자바스크립트 처리 하여야 하였으나 지금은 간단한 autofocus 속성하나만 추가하여 쉽게 해결 할 수 있다. 1234567891011121314151617181920212223242526272829303132333435363..

html5 input 태그html5 input 태그 지금까지 폼 태그를 사용하기 위하여 input 태그를 사용하였을 것이다. 기존의 html4에서 input 태그는 텍스트 필드나 단추 같은 폼을 만들고 자바스크립트를 이용하여 입력내용을 확인하는 프로그램을 실행하여야 하였으나 이제 html5 에서는 입력하려는 값에 따라 해당 태그를 사용하면 쉽게 처리할 수 있도록 추가되었다. 1 input 태그 사용 기존 html4 에서 사용하던 폼 태그들이다 유형 설명 코드 텍스트 텍스트입력 패스워드 비밀번호 입력 입력되는값은 *로 표시 체크박스 클릭시 활성 / 비활성 라이도버튼 구룹중 선택 파일 파일업로드 파일선택버튼 전송 폼값을 전송 html5 에서 추가된 input 태그 유형 설명 코드 이메일주소 이메일 주소 입력..

html5 time 태그 & 마이크로포맷html5 time 태그 & 마이크로포맷 전화번호나 소속, 메일주소, 날짜등과 같은 별도의 정보를 마이크로 포맷(micorformats) 이라고 합니다. html4 에서는 마이크로 포맷을 표현할 수 있는 기능이 없었지만 html5 에서는 날짜와 시간 정보를 표현 할 수 있는 마이크로 포맷 태그인 태그를 제공한다. 1 태그 html4 에서는 날짜를 웹 문서에 삽입하려면 다음과 같이 태그를 이용해서 클래스 이름을 따로 지정해 주어야 했다. 1234 2017년 11월 29일 작성일Colored by Color Scriptercs 하지만 html5 에서는 태그를 사용하면 이를 대신할 수 있다. 태그를 지정하면 브라우저에서 바로 날짜를 인식할 수 있 습니다. 12017년 1..

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..

DOCTYPE HTML 선언 & 사용 DOCTYPE HTML 선언 & 사용 1.html4,html5,xhtml의 관계 이 부분은 이론적인 부분이므로 위키를 참고하겠습니다 http://ko.wikipedia.org/wiki/HTML 2.DOCTYPE이란? 웹페이지를 올바르게 처리하게 위해 선언하는 문서 유형 정의(Document Type Definition)를 사용해야하는데 이 부분을 브라우저가 알 수 있어야만 원하는 모습이 제대로 표현된다 DOCTYPE은 문서 유형을 정의하는 구문이라 할 수 있으며 HTML4,XHTML,HTML5에 따라 달라진다 3.HTML4.01 DOCTYPE 이전 버전으로 제작된 HTML문서와의 호환성을 유지 정확한 표준모드를 유지 프레임셋을 사용하는 웹사이트에 사용 4.XHTML1..