웹코딩/HTML5 CSS3 검색 결과

해당 글 11건

CSS3 변형 속성 transition-delay | transition-timing-function

● transition-delay 속성 transition-delay 속성은 마우스를 올리거나 클릭을 하는 이벤트 후 몇 초 후에 애니메이션이 작동할지 지정하는 속성입니다. CSS3 변형 속성 마우스를 올려놓으면 차례대로 애니메이션이 실행됩니다. 주의깊게 보시면 애니메이션의 속도가 느렸다가 빠른 속도로 진행되는 것을 알 수 있습니다. 이는 수치 변형 함수의 기본이 ease로 되어있기 때문입니다. 이를 바꾸고 싶으면 transition-timing-function 속성을 사용합니다. ● transiton-timing-function 속성 .space:nth-child(1) { transition-delay: 0s; transition-timing-function: linear; } .space:nth-ch..
웹코딩/HTML5 CSS3 2016. 11. 4. 00:16

CSS3 변형 속성 transition-duration

CSS3에서는 변형속성을 사용해 움직임을 구현할 수 있습니다. 생성된 오렌지색 박스위에 마우스를 올리면 크기가 늘어나고 클릭하면 색상이 붉은색으로 변경됩니다. 이제 여기에 변형 속성을 사용해 부드러운 애니메이션을 만들 수 있습니다. 위처럼 변형속성에는 여러가지가 있습니다. 먼저 transition-duraition 속성을 입력합니다. 다음 붉은색 코드를 추가하면 됩니다. .space [ width : 200px; height: 200px; background : orange; transition-duration: 2s; } 코드를 실행하고 마우스를 올리거나 클릭한 상태로 있으면 2초동안 변형 속성이 적용됩니다. CSS3의 변형 속성은 다음 스타일 속성과 함께 적용할 수 있습니다. * 위치 속성 : top..
웹코딩/HTML5 CSS3 2016. 11. 3. 22:33

HTML5 입력양식 태그

HTML5에서는 기존의 input 타입외에 새로운 타입(type)이 추가 되었습니다. 속성 설명 datetime-local 지역 날짜 선택양식을 생성 email 이메일 입력양식 생성 month 월 선택양식 생성 number 숫자 생성양식을 생성 range 범위 생성양식을 생성 search 검색어 입력양식을 생성 tel 전화번호 입력양식을 생성 time 시간 선택양식을 생성 url URL 주소입력양식을 생성 week 주 선택 양식을 생성 아쉬운 점은 아직 인터넷 익스플로러에서는 지원이 되지 않고 있습니다. 크롬(chrome)으로 실행해보세요.
웹코딩/HTML5 CSS3 2016. 11. 3. 01:04

HTML5 video 태그 ie 에서 실행되지 않을때 video.js 플러그인

웹 브라우저마다 표시되는 video 태그의 형태가 일관되지 않으므로 웹 페이지를 디자인할 때 문제가 될 수 있습니다. 또하 인터넷 익스플로러에서는 video 태그가 잘 동작하지 않습니다. 이러한 문제를 해결할 수 있는 간단한 플러그인이 있습니다. 바로 video.js 플러그인입니다. ● video.js 플러그인 (http://videojs.com/) 플러그인을 다루는 것은 웹 클라이언트 개발에서 어려운 부분에 속하지만 video.js 플러그인은 굉장히 간편합니다 To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video 원문 : video.js 데모
웹코딩/HTML5 CSS3 2016. 11. 3. 00:41

HTML5 비디오 요소

동영상 플러그인이 필요 없는 HTML5 비디오 요소 지금까지 웹에서 음악을 듣거나 동영상을 보기 위해서는 플래시 플레이어를 설치하거나 퀵타임 또는 윈도우 미디어 플레이어 확장 기능을 설치해야 했습니다. 모바일 기기에서 플러그인 프로그램을 실행하고 웹 음악을 들어야 한다면 그만큼 비효율적인 것도 없습니다. 웹에서 이미지를 보듯이 자연스럽게 음악을 듣고 동영상을 보는 방법, HTML5에 있습니다. - 비디오 파일을 웹 문서에 넣는 태그 HTML4에서는 태그를 사용하거나 플래시 플레이어 또는 ActiveX 컨트롤을 사용해야 합니다만 HTML5에서는 태그 하나로 해결할 수 있습니다. 태그의 기본 구문 HTML5에서 추구하는 것은 태그를 이용해 이미지를 삽입하듯 동영상도 태그를 이용해 간단하게 삽입하자는 것입니다..
웹코딩/HTML5 CSS3 2016. 10. 12. 20:58

HTM5에 새로 추가된 주요 태그들

1) HTM5에 새로 추가된 주요 태그들앞에서 살펴본 태그 외에도 HTML5에는 여러 가지 새로운 태그들이 추가되었습니다. 이 태그들 역시 태그 이름만 보고도 어떤 태그인지 쉽게 알 수 있는 시멘틱 태그입니다. 웹 문서에 그림 설명이나 하이라이트 효과, 시간, 주소 등을 삽입할 수 있는 태그들을 살펴보도록 하겠습니다. 그림에 설명글 붙이기 - 태그와 태그지금까지는 웹 문서 안의 사진이나 그림에 설명글(caption)을 넣을 방법이 없었는데 HTML5에서는 손쉽게 설명글을 넣을 수 있습니다. 와 태그를 사용하면 됩니다. 는 설명글을 붙일 대상을 정의하는 태그이고, 무엇이든 그 대신이 될 수 있습니다. 은 로 정의한 대상에 실질적인 설명글을 붙이는 태그입니다. 다만, 로 정의했다고 해서 모든 대상에 을 붙여..
웹코딩/HTML5 CSS3 2016. 10. 12. 20:38

HTML5의 시멘틱 태그

1) HTML5의 시멘틱 태그들 HTML5에서 두드러지는 특징 중 하나는 시멘틱 태그들이 도입되었다는 것입니다. 이런 시멘틱 태그를 사용해 웹 문서 구조를 만들게 되면 문서를 이해하기도 쉽고, 유지 보수하기도 훨씬 쉬워집니다. 머리글 부분 지정 - Homepage nav tag 웹상의 실제 내용 - 태그 article이라는 단어의 사전적인 의미가 신문 또는 잡지의 '기사(記事)'인 것처럼 태그 역시 웹 상의 실제 내용을 말합니다. 그리고 신문기사가 여기저기에 인용될 수 있는 것처럼 태그를 사용한 콘텐츠는 웹에서 다른 곳으로 배포되거나 재사용될 수 있습니다. 보통 블로그의 포스트나 웹 사이트의 내용, 사용자가 등록한 코멘트, 웹 콘텐츠의 독립적인 항목 등이 모두 여기에 해당될 수 있습니다. 웹 콘텐츠를 자..
웹코딩/HTML5 CSS3 2016. 10. 12. 19:58

HTML5의 새 요소

1) HTML5의 문서 구조 가장 중요한 변화임에도 쉽게 간과할 수 있는 부분이 HTML5의 시멘틱한 문서 구조입니다. 여기에서는 HTML5의 문서 구조가 HTML 4.01의 문서 구조와 어떻게 다른지를 먼저 살펴보겠습니다. 2) HTML 4.01의 문서 구조 vs HTML5의 문서 구조 HTML 4.01에서는 웹 문서의 레이아웃을 구성할 때 를 이용해 텍스트나 이미지를 담아두고 CSS(Cascading Style Sheet)를 사용해서 각 를 원하는 형태로 배치하였습니다. 이때 요소를 서로 구분하기 위해 id="header"나 id="nav"와 같이 식별자를 붙입니다. 페이지 상단의 내용 부분을 라고 해도 되고 이라고 해도 아무 문제가 없는 것이죠. 라는 태그는 아무 의미도 없고 그 안에 들어 있는 내..
웹코딩/HTML5 CSS3 2016. 10. 12. 19:31

둥근 모서리

1 border-radius 속성 border-radius 를 적용하기전의 기본 html입니다 Rounded corners1! Rounded corners2! 실행화면 스타일에 border-radius를 적용해보겠습니다 Rounded corners1! Rounded corners2! 실행화면 첫번째 사각형은 border-radius와 background 색상을 같이 적용해 둥근모서리 효과를 내보았습니다 두번째 사각형은 border-radius와 border를 같이 적용해 둥근테두리 효과를 내보았습니다 2 모서리 위치 지정 border-radius 속성의 값에 대해 하나의 속성값을 지정하는 경우, 4 모서리에 적용됩니다. 별도로 각 모서리를 지정할 수 있습니다. 규칙은 다음과 같습니다. 4개의 값 : to..
웹코딩/HTML5 CSS3 2016. 9. 17. 15:22

텍스트 에디터

에디터 1) 에디트 프러스 - editPlus : https://www.editplus.com/kr/ HTML, PHP, 자바, C/C++, CSS, ASP, Perl, 자바스크립트, VB스크립트, Paython, Ruby on Rails 파일에서 구문 강조 기능을 지원합니다. 사용자가 작성한 구문 파일을 추가하여 다른 프로그래밍 언어도 지원할 수 있습니다. HTML 문서의 내용을 확인해 볼 수 있는 내장 브라우저와, 작성한 문서를 FTP 서버로 업로드할 수 있는 FTP(sftp, FTPS 포함) 기능을 지원합니다. 이 밖에 Hex 뷰어, HTML 도구모음, 사용자 도구, 줄 번호, 눈금자, URL 강조, 자동 완성, 클립텍스트, 칸 단위 선택, 강력한 찾기와 바꾸기, 다중 실행 취소 및 재실행, 사용자..
웹코딩/HTML5 CSS3 2016. 9. 16. 23:10