마치영화처럼

jQuery 사이트

webug — Thu, 03 May 2012 14:43:57 +0900

jQuery Site

http://www.ericmmartin.com/projects/simplemodal/ // modal 샘플 페이지

jQuery Menu

http://itbruce.tistory.com/149
http://zzomen.tistory.com/200
http://blog.naver.com/jjs9006?Redirect=Log&logNo=120126786361

http://apycom.com/ //제이쿼리를 이용한 메뉴가 잘 정리되어있음.

'자료실 > 즐겨찾기' 카테고리의 다른 글

jQuery 사이트 (0)	14:43:57
즐겨찾기 (0)	2011/06/24
즐겨찾기 (0)	2011/05/16

html 플래시 삽입

webug — Mon, 30 Apr 2012 23:18:24 +0900

플래시 삽입시

사이즈 / 경로 수정후 사용 한다.

'웹표준 > HTML' 카테고리의 다른 글

html 플래시 삽입 (0)	2012/04/30
Viewport (0)	2012/02/06

블록과 인라인의 속성

webug — Tue, 14 Feb 2012 14:43:05 +0900

블록 : 앞 뒤에 틈을 만든다, 즉 단락처럼 보인다. margin 과 padding, width, height등 다 적용 된다.
<div> <table> <p> 테그등

인라인 : 앞 뒤가 같은 줄에 위치한다, 좌우 margin, padding는 줄수 잇으나 상하 margin, padding, widht, height 등을
사용할수없다
이럴때는 인라인 속성을 : 나는 블록이다: 라고 착각을 주어 상하 margin, padding 을 줄 수 있다.
<span><strong><img> 등

테그의 모양은 박스 모양을 가지고 있는 것이 대부분이다. 그래서 박스처럼 취급하는 경우가 있다.
img는 인라인 속성을 가지고 있지만 상하 margin, padding을 줄 수 있는 오브젝트에 속하기도 한다.

다음카페 : 웹표준 세계에 듬뿍 빠지다 동영상 강좌 중.

'웹표준 > CSS' 카테고리의 다른 글

블록과 인라인의 속성 (0)	2012/02/14
css 속성 (0)	2012/01/31
CSS 속성 (0)	2012/01/31
Position 속성을 이용한 센터 정렬 (0)	2012/01/25

firefox 부가기능 설치

webug — Tue, 14 Feb 2012 11:37:00 +0900

firefox 브라우저 설치후 부가기능 추가

1. Firebug
2. Html Validator
3. IE Tab
4. JSView
5. WEB Developer

를 설치한후 재 시동을 한다.

'웹표준 > 정보/기타' 카테고리의 다른 글

firefox 부가기능 설치 (0)	2012/02/14

Viewport

webug — Mon, 06 Feb 2012 13:36:54 +0900

viewport 속성

viewport 비활성화

크기지정

initial-scale : 초기 확대/축소 배율
minimum-scale : 최소 축소 배율 N(0~10, default 0.25)
maximum-scale : 최대 확대 배율 N(0~10, default 1.6)
user-scalable : 확대/축소 가능 여부 yes / no(default yes)

화면의 DPI
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width" />

device-dpi : 대상 DPI로 장치의 기본 DPI를 사용하십시오. 기본 스케일링이 발생하지 마십시오.
high-dpi : 대상 DPI로 hdpi를 사용합니다. 중간과 낮은 밀도 화면 적절한 다운 스케일
medium-dpi : 대상 DPI로 mdpi를 사용합니다. 고밀도 스크린 최대 규모 저밀도 화면 아래로 확장. 이것이 기본 대상 밀도이다.
low-dpi : 대상 DPI로 ldpi를 사용합니다. 중간 및 높은 밀도 화면 적절한 최대 규모.
<value> : 대상 DPI로 사용하는 DPI 값을 지정합니다. 값 범위 70-400 내에 있어야합니다.

CSS타겟팅
<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.5)" href="hdpi.css" />
<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.0)" href="mdpi.css" />
<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 0.75)" href="ldpi.css" />

또는

#header {
background:url(medium-density-image.png);
}

@media screen and (-webkit-device-pixel-ratio: 1.5) {
    // CSS for high-density screens
    #header {
        background:url(high-density-image.png);
    }
}

@media screen and (-webkit-device-pixel-ratio: 0.75) {
    // CSS for low-density screens
    #header {
        background:url(low-density-image.png);
    }
}

자바스크립트 타겟팅

if (window.devicePixelRatio == 1.5) {
alert("This is a high-density screen");
} else if (window.devicePixelRation == 0.75) {
alert("This is a low-density screen");
}

원문 : http://docs.androidside.com/guide/webapps/targeting.html#ViewportSize

출저 : http://eyesi.me/110121678379

'웹표준 > HTML' 카테고리의 다른 글

html 플래시 삽입 (0)	2012/04/30
Viewport (0)	2012/02/06

css 속성

webug — Tue, 31 Jan 2012 13:08:08 +0900

css 속성 모음

CSS 속성 모음 1편 입니다. 우리가 사용하고 있는 CSS를 속성을 모아서 정리했습니다.

Border (테두리 관련 속성)

속 성	설 명	값
border	border의 여러 가지 속성을 간단하게 한번에 선언하여 사용할 수 있다.	border-width border-style border-color border-bottom
border-bottom	border-bottom(아래쪽 테두리)의 여러가지 속성을 간단하게 한번에 선언할 수 있다.	border-bottom-width border-style border-color
border-bottom-color	border-bottom의 색상을 설정할 수 있다.	border-color
border-bottom-style	border-bottom의 스타일을 설정할 수 있다.	border-style
border-bottom-width	border-bottom의 너비를 설정할 수 있다.	thin medium thick length
border-color	상하좌우 모든 테두리의 색상을 1개에서 4개까지 한번에 설정할 수 있다.	color
border-left	border-left(왼쪽테두리)의 여러가지 속성을 간단하게 한번에 선언하여 사용할 수 있다.	border-left-width border-style border-color
border-left-color	border-left의 색상을 설정할 수 있다,	border-color
border-left-style	border-left의 스타일은 설정할 수 있다.	border-style
border-left-width	border-left의 너비를 설정할 수 있다.	thin medium trick lenght
border-right	border-right(오른쪽테두리)의 여러가지 속성을 간단하게 한번에 선언하여 사용할 수 있다.	border-bottom-width bordrt-style border-color
border-right-color	border-right의 색상을 설정할 수 있다.	border-color
border-right-style	border-right의 스타일을 설정할 수 있다.	border-style
border-right-width	border-right의 너비를 설정할 수 있다.	thin medium thick length
border-style	상하좌우 모든 테두리의 모양을 1개에서 4개까지 스타일을 한번에 설정할 수 있다.	none hidden dotted dashed solid double groove ridge inset outset
border-top	border-top(위쪽테두리)의 여러가지 속성을 간단하게 한번에 선언하여 사용할 수 있다.	berder-top-width border-style border-color
border-top-color	border-top의 색상을 설정할 수 있다.	border-color
border-top-style	border-top의 스타일을 설정할 수 있다.	border-style
border-top-width	border-top의 너비를 설정할 수 있다.	thin medium thick length
border-width	상하좌우 모든 테두리의 너비를 한번에 설정할 수 있다.	thin medium thick length

Background (배경 이미지 관련 속성)

속 성	설 명	값
background	background의 여러 가지 속성을 간단하게 한번에 선언하여 사용할수 있다.	background-color background-images background-repeat background-attachment background-position
background-attachment	페이지 스크롤을 할 때, 페이지와 함께 스크롤 되게 할 것인지 아니면 배경 이미지는 고정되게 할 것인지를 설정할 수 있다.	scroll fixed
background-color	특정 요소의 배경 색상을 지정할 수 있다.	color-rgb color-hex color-name transparent
background-images	배경 이미지를 지정할 수 있다.	url(URL) none
background-position	배경 이미지가 시작되는 위치를 조정할 수 있다.	top left top center top right center left center center center right bottom left bottom center bottom right x% y% xpos ypos
background-repeat	배경이미지를 반복할 것인지 하나만 보여줄 것인지 설정할 수 있다. 배경 이미지 반복 시 어느 방향으로 반복할 것인지도 설정할 수 있다.	repeat repeat-x repeat-y no-repeat

CLASSIFICATION 분류

속 성	설 명	값
clear	바로 이전의 요소에서 선언된 float 속성을 해제한다.	left right both none
cursor	마우스 포인터의 모양을 지정할 수 있다.	url auto crosshair default pointer move e-resize ne-resize nw-resize n-resize se-resize s-resize w-resize text wait help
display	요소를 보일 것인지, 감출 것인지를 지정할 수 있다. 요소를 보이게 할 경우 어떤 방식으로 보이게 할 것 인지 설정할 수 있다.	none inline block list-item run-in compact marker table inline-table table-row-group table-header-group table-footer-group table-row table-column-group table-column table-cell table-caption
float	텍스트나 이미지 등의 요소를 흐르게 만들어, 인접해 있는 다른 요소와 함께 흐르게 만들수 있다.	left right none
position	요소를 어떤 방식으로 위치시킬 것인지 지정할 수 있다.	static relative absolute fixed
visibility	요소를 보이거나 감출 수 있다.	visible hidden collapse

출저 :http://blog.naver.com/dmssla1211/145277046

'웹표준 > CSS' 카테고리의 다른 글

블록과 인라인의 속성 (0)	2012/02/14
css 속성 (0)	2012/01/31
CSS 속성 (0)	2012/01/31
Position 속성을 이용한 센터 정렬 (0)	2012/01/25

CSS 속성

webug — Tue, 31 Jan 2012 10:59:33 +0900

CSS 속성

font 속성

font-family - 글꼴을 설정합니다
font-size:- 글꼴의 크기
font-style - 글꼴의 스타일
font-weight -글꼴의 두꼐
font-variant - 글꼴의 소문자를 대문자로 지정
font-spacing - 글자사이의 간격을 지정
font-height - 줄간격을 지정
color - 글꼴의 색상 지정

font-size 속성

IN - 글자크기를 인지 단위로 표시
CM- 글자크기를 센티미터 표시
MM - 글자크기 밀리미터 단위로 표시
PT -글자크기를 포인트 단위로 표시 1포인트는 1/72인지이며 가장 많이 사용되는 단위
PC - 글자크기를 파이카 단위로 표시 1파이카는 12포인트
madium - 글자크기를 약12포인트정도의 크기로 표시
small - 글자크기를 madium로 1.5배 작은 크기로 표시
x-small - 글자크기를 madium로 3배 작은 크기로 표시
xx-small - 글자크기를 madium로 4.5배 작은 크기로 표시
larage - 글자크기를 madium로 1.5배큰 크기로 표시
x-larage - 글자크기를 madium로 3배큰 크기로 표시
xx-larage - 글자크기를 madium로 4.5배큰 크기로 표시

em - 기준 글꼴 문자의 높이를 기준으로 글꼴크기를 지정
ex - 기준 글꼴 문자의 영문 소문자 높이르 기준으로 글꼴 크기 지정
% - 기준 글꼴 문자의 크기에 대한 %단위로 글꼴 크기를 지정
px - 글꼴의 크기를 픽셀 단위로 표시
larger - 기준 글꼴보다 크게 표시
smaller - 기준 글꼴보다 작게 표시

font-style 속성
normal - 아무런 효과를 주지 않음
itailc - 글자를 이텔릭 체로 표시
oblique - 글자에 기울림 속성

font-variant 속성
normal - 아무런 효과를 주지않음
small-caps - 소문자를 대문자로 바꾸는 표시

font-weight속성
normal - 아무런 효과를 주지않음
bold - 글자에 html의 <b>태그를 준것과 같은 두꼐로 굵게표시
bolder - 글자를 조금 더 굵게 표시
lighter - 글자를 조금 더 얇게 표시
100-900 - 100(아주얇게)부터 900(아주두껍게)사이의 숫자를 100단위로 지정할수 있다

lettr-spacing 속성
글자와 글자사이의 간격을 조정
H2 {lettr-spacing:170%}

line-height속성
줄간격을 설정
body {line-height:170%}

color속성
글자색상지정
body{ color:darkgray;}
h2 {color:#ffa500;}

문단모양 바꾸기
text-align - 문단의 정렬방식을 지정
text-decoration - 글꼴의 선을 긋습니다
text-indent - 문장의 들여쓰기
vertical-align - 문단의 수직 정렬 방식을 지정

CSS 테두리 제어하기
테두리종류
border-style 전체 테두리 모양지정
border-top-style - 위쪽 테두리 모양을 지정
border-bottom-style - 아래쪽의 테두리 모양을 지정
border-left-style 왼쪽의 테두리의 모양을 지정
border-right-style -오른쪽 테두리의 모양을 지정

none - 테두리를 보이지 않음
dotted - 테두리 점선 표시
dashed - 테두리를 좀 더 긴 점선으로 표시
solid - 테두리를 직선으로 표시
doubole - 테두리 이중 실선 표시
groove - 테두리를 오목한 실선으로 표시
ridge- 테두리 볼록한 실선으로 표시
inset - 테두리를 내용이 오목한 모양으로 표시
outset - 테두리를 내용이 볼록한 모양으로 표시

테두리 색상지정
border-color -전체 테두리의 색상지정
border-top-color -위쪽 테두리의 색상지정
border-bottom-color -아래쪽의 테두리 색상지정
border-left-color -왼쪽의 테두리 색상지정
border-right-color -오른쪽의 테두리 색상지정

테두리 두꼐 지정
border-width - 전체 테두리의 두꼐를 지정
border-top-width - 위쪽 테두리 두꼐 지정
border-bottom-width -아래쪽 테두리 두꼐지정
border-left-width - 왼쪽 테두리 두꼐 지정
border-right-width - 오른쪽의 테두리 두꼐를 지정

margin 속성
margin - 모든 방향의 여백을 지정
margin-top - 위쪽의 여백 지정
margin-bottom - 아래쪽 여백 지정
margin-left - 왼쪽여백 지정
margin-right - 오른쪽여백 지정

padding 속성
padding-top - 위쪽의 여백 지정
padding-bottom - 아래쪽 여백 지정
padding-left - 왼쪽여백 지정
padding-right - 오른쪽여백 지정

'웹표준 > CSS' 카테고리의 다른 글

블록과 인라인의 속성 (0)	2012/02/14
css 속성 (0)	2012/01/31
CSS 속성 (0)	2012/01/31
Position 속성을 이용한 센터 정렬 (0)	2012/01/25

Position 속성을 이용한 센터 정렬

webug — Wed, 25 Jan 2012 13:00:25 +0900

static : 텍스트나 주변 박스에 따라서 움직이는 보통의 박스. 기본값
relative : 처음 박스가 화면에 나오는 위치에서 지정된 오프셋(offset)만큼 위치가 변경됨. 화면에서 공간을 차지함.
absolute : 상위 엘리먼트의 좌측상단을 기준점으로 하여 지정된 오프셋 만큼 위치가 변경됨.지정.
화면에서 공간을 차지 하지 않음.보통 레이어라고 말하는 것은 이 절대위치 속성을 이용한 박스를 말함.
fixed :브라우저 화면을 기준으로 스크롤에 따라 움직이지 않는 위치를 지정. 인터넷 익스플로러에서는 지원되지 않음.

position: absolute; 속성을 이용한 센터 정렬방법 .

position: absolute;
top: 50%; /* 화면의 중앙에 위치 */
left: 50%; /* 화면의 중앙에 위치 */
margin: -100px 0 0 -100px; /* 높이의 절반과 너비의 절반 만큼 margin 을 이용하여 조절 해 줍니다. */

화면의 중앙에 블록을 위치 시키기 위해서는 약간의 제약사항이 있다. 일단, 중앙에 위치하게 되는 block의 크기가 유동적이면 안된다. 그리고 브라우져 화면의 크기가 block의 크기보다 작아지게 되면 일부 영역이 화면 밖으로 넘어가 되어서 보이지 않는 부분도 생기게 된다. 화면의 중앙에 정렬하겠다는 것은 사용자 환경을 고려하지 못한 포지셔닝이기 때문에 특별히 스펙에서 정의하지 않은 것으로 생각 된다. 좀 불편하기는 하다.

출저 : http://postmaster.hyeonseok.com/pmwiki/index.php/Css/Position

'웹표준 > CSS' 카테고리의 다른 글

블록과 인라인의 속성 (0)	2012/02/14
css 속성 (0)	2012/01/31
CSS 속성 (0)	2012/01/31
Position 속성을 이용한 센터 정렬 (0)	2012/01/25

Modal (모달 팝업)

webug — Tue, 17 Jan 2012 16:05:05 +0900

jQuery 모달 팝업

출저 http://www.ericmmartin.com/projects/simplemodal/

simplemodal-demo-basic-1.4.1.zip

'웹표준 > jQuery' 카테고리의 다른 글

Modal (모달 팝업) (0)	2012/01/17

액셀 파일 나이계산기

webug — Mon, 16 Jan 2012 16:11:48 +0900

나이를 년도별로 볼수있다
원하는 년도를 적으면 테이블이 변경된다.

출저 : http://blog.naver.com/iwooya/140072085869

'자료실 > 자료실' 카테고리의 다른 글

액셀 파일 나이계산기 (0)	2012/01/16
Exif Show 1.3 < 이미지메타정보 뷰어 > (0)	2011/08/16
익스플로러 테스터기 (0)	2011/08/02
포토샵[커브 보정] (0)	2009/10/24
포토샵 액션 이미지 다단계 리사이징 (0)	2009/10/07
괜찮은 색상표 하나 구하기가 이렇게 어려울 줄이야... (0)	2009/03/28