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..
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) 객체..
- Total
- Today
- Yesterday
- 우분투
- mysql 백업
- 트위터 url 공유
- SQL 함수
- APM 설치
- yum
- ubuntu
- crontab
- CentOS
- 카카오스토리 공유소스
- CentOS 설치
- 카카오스토리 url 공유
- SQL 정렬
- MYSQL 명령어
- 미디어쿼리
- centos 7
- 카카오스토리 sns 공유
- 리눅스 명령어
- 페이스북 공유소스
- 부트스트랩
- 우분투 usb 설치
- 트위터 공유소스
- 우분투 다운로드
- 트위터 sns 공유
- 에디트플러스
- 트위터 공유방법 및 소스
- Q6600
- mariadb 백업
- 반응형 웹
- MySQL
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |