'Web'에 해당되는 글 77건

[css3]보더에 이미지 넣기::border-image

2013. 2. 4. 17:36 Web/CSS

border-style: solid;
border-width: 20px 22px;
-moz-border-image: url(btn_login.gif) 20 22 round stretch;
-webkit-border-image: url(btn_login.gif) 20 22 round stretch;
-o-border-image: url(btn_login.gif) 20 22 round stretch;
border-image: url(btn_login.gif) 20 22 round stretch;


http://border-image.com
저작자표시 비영리 동일조건 (새창열림)

'Web > CSS' 카테고리의 다른 글

[CSS3] border, box  (0) 2013.03.16
css3로 아코디언효과 만들기  (0) 2013.02.07
font-face 웹폰트 변환/사용  (0) 2013.02.01
[CSS3]figure 고해상도 이미지 조절하기  (0) 2013.01.29
[CSS3]포토샵에서 Drop-shadow로 나타내는 그림자 효과 css로 표현하기  (0) 2013.01.29

Trackbacks / Comments

접근성을 높이는 html5 태그

2013. 2. 2. 15:14 Web/Html

태그
- 구조적 : Div
- 내용 : section(제목포함)
- 구분 : hr
- 독립가능한 글 : article
- 메인메뉴: nav
- 메뉴: menu, command (아직...)
- 서브메뉴: section
- address: 주소, 연락처 정도만
- small : 본문 내용에 대한 저작권 표시
- iframe: sandbox(스크립트방지), seamless(테두리지우지), 보안을 위한 방법

폼태그 생략가능
- formaction, formmethod 지정해주기
<fieldset>     
     <textarea cols="50" rows="6"></textarea>
     <input type="submit" value="update" formaction="#" formmethod="post">
</fieldset>


접근성 - WAI ARIA
- role =""

참고사이트
http://www.webstandards.org/
저작자표시 비영리 동일조건 (새창열림)

'Web > Html' 카테고리의 다른 글

[html5]Content models 정리  (0) 2013.05.06
[html5]Form 정리  (0) 2013.02.23
사운드 지원 audio 태그 사용방법  (0) 2013.01.30
동영상 재생 video태그  (0) 2013.01.30
html5 기본문서형식  (0) 2013.01.29

Trackbacks / Comments

font-face 웹폰트 변환/사용

2013. 2. 1. 21:17 Web/CSS


1. TTF폰트를 받아 변환하기
: 아래 프로그램을 다운받은 후 ttf파일과 같은 폴더에 넣고 드래그하면 됨

- eot변환프로그램:
EOTFAST.EXE
- woff변환프로그램:
sfnt2woff.exe

@font-face{
 font-family:  seoulNSEB;
 src: url(font/SeoulNamsanEB.eot);/* ie6~8 */
 src: local(※), url(font/SeoulNamsanEB.woff) format('woff');/* ie9, Chrom, safari, opera, firefox */
  }
  body{
 font-family: seoulNSEB;
 }

  • IE 6~8 브라우저는 EOT 형식만 지원한다.
  • 크롬, 사파리, 파이어폭스, 오페라 브라우저는 WOFF 형식만 지원한다.
  • IE 9 브라우저는 EOT, WOFF 형식을 모두 지원한다.

    • 2. 외부링크걸기
     <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=폰트명">
        <style>
          body { font-family: '폰트명', serif; }
        </style>

    3. 내부스타일
    @import url(http://fonts.googleapis.com/css?family=Kavoon);
     <style>
       body { font-family: '폰트명', serif; }
    </style>


    ※ 폰트다운받기
    - 모빌리언스
    http://api.mobilis.co.kr/webfonts/
    http://api.mobilis.co.kr/webfonts/css/?fontface=

    - 구글 영문폰트
    http://www.google.com/webfonts
    http://fonts.googleapis.com/css?family=

    저작자표시 비영리 동일조건 (새창열림)

    'Web > CSS' 카테고리의 다른 글

    css3로 아코디언효과 만들기  (0) 2013.02.07
    [css3]보더에 이미지 넣기::border-image  (0) 2013.02.04
    [CSS3]figure 고해상도 이미지 조절하기  (0) 2013.01.29
    [CSS3]포토샵에서 Drop-shadow로 나타내는 그림자 효과 css로 표현하기  (0) 2013.01.29
    [CSS3]새로 생성된 태그/속성  (0) 2013.01.29

    Trackbacks / Comments

    사운드 지원 audio 태그 사용방법

    2013. 1. 30. 19:46 Web/Html


     <audio controls autoplay>
       <source src="" type="audio/ogg" /><!-- firefox, opera, Chrom -->
       <source src="" type="audio/mpeg" /><!-- ie9, Chrom, safari-->
     </audio>

    <!--
    ※ 문제해결
    1. firefox source 태그 버그로 자기가 지원하지 않는 파일 형식은 제대로 처리하지 못함.
       반드시 ogg를 먼저 선언해야 함 
    2. 모바일에서 audio태그가 지원되지 않을경우 type속성 제거
    -->
    저작자표시 비영리 동일조건 (새창열림)

    'Web > Html' 카테고리의 다른 글

    [html5]Form 정리  (0) 2013.02.23
    접근성을 높이는 html5 태그  (0) 2013.02.02
    동영상 재생 video태그  (0) 2013.01.30
    html5 기본문서형식  (0) 2013.01.29
    IE 6-8 해결방법 html5shiv  (0) 2012.12.03

    Trackbacks / Comments

    동영상 재생 video태그

    2013. 1. 30. 19:40 Web/Html

    플래시 플레이어 없이도 H.264코덱을 지원하는 웹 브라우저와
    테오라 코덱을 지원하는 웹 브라우저 모두 동영상을 볼수 있다.


    <video width="" height="" autoplay controls poster="">
       <source src="media/chrome.mp4" type="video/mp4" /><!-- 모바일 ie9, Chrom, safari-->
       <source src="media/chrome.ogv" type='video/ogg; codecs="theora, vorbis"' /><!-- firefox, opera, Chrom -->
    </video>


     ※ 'video/ogg; codecs="theora, vorbis"' 작은따옴표안에 큰따옴표 넣기:반대 파이어폭스 재생 안됨
      
     ==속성설명==
     ▶ IE8 이상
     ▶ src 동영상 파일 경로
     ▶ poster 동영상이 화면에 나타나지 않을 경우 대신 표시할 그림
     ▶ preload 미리 다운로드 받아 재생단추를 눌렀을때 재생되게 함
     ▶ autoplay 자동 재생
     ▶ loop 반복 재생 지정
     ▶ controls 화면에 콘트롤 막대 추가
     ▶ width 화면의 너비
     ▶ height 화면의 높이
      
    저작자표시 비영리 동일조건 (새창열림)

    'Web > Html' 카테고리의 다른 글

    접근성을 높이는 html5 태그  (0) 2013.02.02
    사운드 지원 audio 태그 사용방법  (0) 2013.01.30
    html5 기본문서형식  (0) 2013.01.29
    IE 6-8 해결방법 html5shiv  (0) 2012.12.03
    [그누보드]php 조건문 형식  (0) 2012.08.22

    Trackbacks / Comments

    Copyright © HuckleberryM All Rights Reserved | JB All In One Designed by CMSFactory.NET

    티스토리툴바