'Web'에 해당되는 글 77건
- 2013.01.29 [CSS3]figure 고해상도 이미지 조절하기
- 2013.01.29 [CSS3]포토샵에서 Drop-shadow로 나타내는 그림자 효과 css로 표현하기
- 2013.01.29 [CSS3]새로 생성된 태그/속성
- 2013.01.29 html5 기본문서형식
- 2013.01.25 [JQuery UI]버튼 UI
[CSS3]figure 고해상도 이미지 조절하기
2013. 1. 29. 21:44 Web/CSS
이미지를 감싸고 있는 태그에 넓이값을 주고,
이미지에서 %로 넓이값 조절하기
figure{width:100%;}
figure img{width:50%;}
/* 이미지에 넓이 높이 준경우 height:auto; */
'Web > CSS' 카테고리의 다른 글
| [css3]보더에 이미지 넣기::border-image (0) | 2013.02.04 |
|---|---|
| font-face 웹폰트 변환/사용 (0) | 2013.02.01 |
| [CSS3]포토샵에서 Drop-shadow로 나타내는 그림자 효과 css로 표현하기 (0) | 2013.01.29 |
| [CSS3]새로 생성된 태그/속성 (0) | 2013.01.29 |
| [CSS3]미디어쿼리 작성 순서 (0) | 2012.12.03 |
[CSS3]포토샵에서 Drop-shadow로 나타내는 그림자 효과 css로 표현하기
2013. 1. 29. 21:42 Web/CSS
- 박스에 그림자 효과주기
box-shadow: 0px 2px 3px rgba(1, 1, 1, .5);
/* box-shadow: x축, y축, blur, 색상 */
box-shadow: 0px 2px 3px rgba(1, 1, 1, .5) inset;
: IE9.0 이상 가능
- 텍스트에 그림자 효과주기
text-shadow: 0px 2px 3px rgba(1, 1, 1, .5);
: IE10 이상 가능
'Web > CSS' 카테고리의 다른 글
| font-face 웹폰트 변환/사용 (0) | 2013.02.01 |
|---|---|
| [CSS3]figure 고해상도 이미지 조절하기 (0) | 2013.01.29 |
| [CSS3]새로 생성된 태그/속성 (0) | 2013.01.29 |
| [CSS3]미디어쿼리 작성 순서 (0) | 2012.12.03 |
| 브라우져별 웹폰트 적용방법 (0) | 2012.12.03 |
[CSS3]새로 생성된 태그/속성
2013. 1. 29. 20:41 Web/CSS
1. mark : 마크
2. figure, figcation :삽화, 사진, 도표 삽입
3. time
<time datetime="2013-01-29T20:35" pubdate>2013년 1월 29일</time>
pubdate
- article안에 작성된 경우 article이 작성된 날짜,
- 밖에 있는 경우 문서가 작성된 날짜
속성
1. background-size
- px : 이미지사이즈 fix
- % : 배경기준
- cover: content박스기준 full
- contain: 이미지 full
2. 아이폰 입력창 그림자 지우기, 둥근라인 방지
-webkit-appearance:none;
border-radius:0;
3. box-sizing
- content-box (height+padding+border)
- border-box (height)
4.css가상선택자
-태그 순서안에서 찾기 :nth-child(odd/even/3n)
-같은 태그중에서 찾기 :nth-of-type(odd/even/3n)
5. border-image : repeat,round,stretch
border-image: url(whitebutton.png) 11 / 11px repeat;
-webkit-border-image: url(whitebutton.png) 11 / 11px repeat;
-moz-border-image: url(whitebutton.png) 11 / 11px repeat;
-o-border-image: url(whitebutton.png) 11 / 11px repeat;
6. text-overflow:ellipsis
- 가로고정 width:;
- block요소 display:block;
- 줄바꿈억제 white-space:nowrap;
- 영역고정 overflow:hidden;
7. target
- id설정
- <a href="파일명.html#id">
'Web > CSS' 카테고리의 다른 글
| [CSS3]figure 고해상도 이미지 조절하기 (0) | 2013.01.29 |
|---|---|
| [CSS3]포토샵에서 Drop-shadow로 나타내는 그림자 효과 css로 표현하기 (0) | 2013.01.29 |
| [CSS3]미디어쿼리 작성 순서 (0) | 2012.12.03 |
| 브라우져별 웹폰트 적용방법 (0) | 2012.12.03 |
| 테이블 display:block 브라우져 출력이상 해결 (0) | 2012.09.26 |
html5 기본문서형식
2013. 1. 29. 19:31 Web/Html
Mobile
1. Doctype선언
2. 모바일 viewport
3. 지원하지 않는 브라우져 호환성 방지
4. 바로가기 아이콘 생성
5. 주소 감추기 js
Desktop
1. 새로 생성된 태그 사용을 위한 html5.js링크 연결
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title> new document </title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=medium-dpi" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<link rel="stylesheet" href="" />
<link rel="apple-touch-icon" href="" />
<link rel="shortcut icon" href="" />
</head>
<body>
<script>
window.addEventListener("load", function() {
setTimeout(scrollTo, 0, 0, 0, 1);
}, false);
window.addEventListener("orientationchange", function() {
setTimeout(scrollTo, 0, 0, 0, 1);
}, false);
</script>
</body>
</html>
CSS선언
1. 태그초기화
2. 모바일 가로, 세로 회전시 글씨크기 고정 css 추가 / -webkit-text-size-adjust:none;
: CSS3.0에 추가된 스타일은 현재 브라우져가 100% 지원하지 못하므로 브라우져별 접두사를 추가해줘야함
-webkit- :chrom, safari
-moz- : firefox
-ms- : ie
-o- : opera
3. 태그 블록으로 설정
'Web > Html' 카테고리의 다른 글
| 사운드 지원 audio 태그 사용방법 (0) | 2013.01.30 |
|---|---|
| 동영상 재생 video태그 (0) | 2013.01.30 |
| IE 6-8 해결방법 html5shiv (0) | 2012.12.03 |
| [그누보드]php 조건문 형식 (0) | 2012.08.22 |
| 마우스 오른쪽 금지 (0) | 2012.07.02 |
[JQuery UI]버튼 UI
2013. 1. 25. 12:07 Web/Mobile
1. 버튼에 아이콘 넣기
1.1 아이콘 설정: data-icon
<button data-icon="arrow-l">data-icon="arrow-l"</button> //왼쪽방향 화살표
<button data-icon="arrow-r">data-icon="arrow-r"</button> //오른쪽방향 화살표
<button data-icon="arrow-u">data-icon="arrow-u"</button> //위쪽방향 화살표
<button data-icon="arrow-d">data-icon="arrow-d"</button> //아리쪽방향 화살표
<button data-icon="delete">data-icon="delete"</button>// 삭제
<button data-icon="plus">data-icon="plus"</button>
<button data-icon="minus">data-icon="minus"</button>
<button data-icon="check">data-icon="check"</button>
<button data-icon="gear">data-icon="gear"</button>
<button data-icon="refresh">data-icon="refresh"</button>
<button data-icon="forward">data-icon="forward"</button>
<button data-icon="back">data-icon="back"</button>
<button data-icon="grid">data-icon="grid"</button>
<button data-icon="star">data-icon="star"</button>
<button data-icon="info">data-icon="info"</button>
<button data-icon="home">data-icon="home"</button>
<button data-icon="search">data-icon="search"</button> //돋보기
1.1 아이콘 위치변경 : data-iconpos="righr/left/top/bottom"
<button data-icon="star" data-iconpos="top"> data-iconpos="top"</button>
2. 링크를 버튼으로 사용하기
2.1 버튼으로 지정
<a href="index.html" data-role="button">button 1</a>
2.2 버튼 그룹화
: 수평상태로 나열 data-type="horizontal"
<div data-role="controlgroup" data-type="horizontal">
<a href="index.html" data-role="button">button 1</a>
<a href="index.html" data-role="button">button 2</a>
<a href="index.html" data-role="button">button 3</a>
</div>
참고: http://view.jquerymobile.com/1.3.2/dist/demos/widgets/icons/
http://view.jquerymobile.com/1.3.2/dist/demos/widgets/buttons/
'Web > Mobile' 카테고리의 다른 글
| 일정위치에서 상단으로 스크롤되는 스크립트 (0) | 2016.03.15 |
|---|---|
| 일정위치에서 부드럽게 스크롤되는 toTop 플러그인 (0) | 2016.03.15 |
| [JQuery UI]폼 UI (0) | 2013.01.25 |
| [JQuery UI]콘텐츠 영역 접이식 패널 (0) | 2013.01.25 |
| 간편한 header, footer (0) | 2013.01.25 |
by 허클베리밋