카테고리 없음2014. 1. 24. 09:01

'전체선택' 소스

버튼클릭시전체선택소스.htm



<script>
<!--
var copytoclip=1
function HighlightAll(theField) {

var tempval=eval("document."+theField)

tempval.focus()

tempval.select()

if (document.all&&copytoclip==1){

therange=tempval.createTextRange()

therange.execCommand("Copy")

window.status="문장을 선택하셨나요? 복사해가세요!"

setTimeout("window.status=''",1800)

}

}

//-->
</script>

<form name="test">
<a href="deny_javascript:HighlightAll('test.select1')">소스 선택</a><br>
<textarea name="select1" rows=8 cols=70 >http://bankcgi.co.kr</textarea>
</form>


저작자표시 비영리 (새창열림)
Posted by 갓리버리
카테고리 없음2014. 1. 24. 08:59

특수문자넣기 소스


특수문자입력소스.htm


<html> 

<head>
<title>특수문자 입력하기</title>

<script language="Javascript">


function Add(str)
{
document.letter.mailcontent.focus();
document.letter.mailcontent.value+=str;
return;
}

</script>

</head>
<body>
<form action="/" method="post" name="letter">
<font color="#000000" size="2" face="돋움"><a href="deny_deny_javascript:Add('※')">※</a>
<A href=deny_deny_javascript:Add('☆')>☆</a> <a href=deny_deny_javascript:Add('★')>★</a>
<A href=deny_deny_javascript:Add('○')>○</a> <A href=deny_deny_javascript:Add('●')>●</a>
<A href=deny_deny_javascript:Add('◑')>◑</a> <a href=deny_deny_javascript:Add('◐')>◐</a>
<a href=deny_deny_javascript:Add('⊙')>⊙</a> <a href=deny_deny_javascript:Add('◎')>◎</a>
<A href=deny_deny_javascript:Add('◇')>◇</a> <a href=deny_deny_javascript:Add('◆')>◆</a>
<A href=deny_deny_javascript:Add('◈')>◈</a> <A href=deny_deny_javascript:Add('△')>△</a>
<a href=deny_deny_javascript:Add('▲')>▲</a> <a href=deny_deny_javascript:Add('▽')>▽</a>
<a href=deny_deny_javascript:Add('▼')>▼</a> <A href=deny_deny_javascript:Add('▷')>▷</a>
<a href=deny_deny_javascript:Add('▶')>▶</a> <a href=deny_deny_javascript:Add('◁')>◁</a>
<a href=deny_deny_javascript:Add('◀')><br>
◀</a> <A href=deny_deny_javascript:Add('♤')>♤</a> <a href=deny_deny_javascript:Add('♠')>♠</a>
<a href=deny_deny_javascript:Add('♡')>♡</a> <a href=deny_deny_javascript:Add('♥')>♥</a>
<A href=deny_deny_javascript:Add('♧')>♧</a> <a href=deny_deny_javascript:Add('♣')>♣</a>
<A href=deny_deny_javascript:Add('☏')>☏</a> <a href=deny_deny_javascript:Add('☎')>☎</a>
<a href=deny_deny_javascript:Add('♨')>♨</a> <a href=deny_deny_javascript:Add('☜')>☜</a>
<a href=deny_deny_javascript:Add('☞')>☞</a> <A href=deny_deny_javascript:Add('▣')>▣</a>
<A href=deny_deny_javascript:Add('□')>□</a> <a href=deny_deny_javascript:Add('■')>■</a>
<A href=deny_deny_javascript:Add('▤')>▤</a> <a href=deny_deny_javascript:Add('▥')>▥</a>
<A href=deny_deny_javascript:Add('▨')>▨</a> <a href=deny_deny_javascript:Add('▧')>▧</a>
<a href=deny_deny_javascript:Add('▦')>▦</a> <a href=deny_deny_javascript:Add('▩')>▩</a>
<A href=deny_deny_javascript:Add('♭')>♭</a> <a href=deny_deny_javascript:Add('♪')>♪</a><br>
<textarea name="mailcontent" rows=12 cols=55 class="unnamed4" wrap="hard"></textarea>
</font><p>
<input type="submit" value="확인" name="submit" ="alert('특수문자 입력하기 예제임을 재 확인해 드림다.');return false;">

<input type="button" value="취 소" ="alert('취소버튼을 클릭하시었음다.');deny_deny_javascript:history.back();" name="button">

</form>

</body>
</html>


저작자표시 비영리 (새창열림)
Posted by 갓리버리
html/html_css2014. 1. 22. 18:05

웹 접근성 이미지 테스트_표준코딩


웹접근성자료.docx



널리

http://html.nhncorp.com/markup_tools/imgoptimizer

저작자표시 비영리 (새창열림)
Posted by 갓리버리
html/html_css2014. 1. 22. 18:04

라벨태그의 활용_label

<label><input type="radio" value="1" name="ex" />IE에서는 지원안되는 예제</label>


<input type="radio" value="2" name="ex" id="radio1" /><label for="radio1">IE, FF 둘 다 지원하는 예제</label>

 

 

http://cowboyjs.blog.me/120045839450

저작자표시 비영리 (새창열림)
Posted by 갓리버리
html/html_css2014. 1. 22. 18:03

반응형웹 media쿼리_해상도에따른 css구분


반응형웹_media쿼리.html


0px-480px(아이폰용)

 

481px-720px(안드로이드 스마트폰 세로모드)

 

721px-1024px(테블릿 PC가로모드)

 

그리고 1024px이상(일반 PC 와이드 모니터)

의 가로 해상도를 가질 경우의 4가지 경우의 스타일을 가집니다. 이건 원하시는데로 설정하시면 됩니다.

--------------소스-----------------------

@media screen and (max-width: 480px) {
body { background-color: red; }
h1 { color: white; }
}


@media screen and (min-width: 481px) and (max-width: 720px) {
body { background-color: green; }
h1 { color: red; }
}


@media screen and (min-width: 721px) and (max-width: 1024px) {
body { background-color: blue; }
h1 { color: yellow; }
}

 

@media screen and (min-width: 1025px) {
body { background-color: orange; }
h1 { color: black; }
}

 

[출처] 반응형 웹사이트, 모바일웹을 위한 CSS, @media쿼리를 살펴봐요.|작성자 Think 4U


저작자표시 비영리 (새창열림)
Posted by 갓리버리
html/html_css2014. 1. 22. 18:03

뷰포트_반응형웹_viewport

뷰포트

 

※ 확대를 할수 있게하려면

content="user-scalable=no / maximum-scale=1.0

→content="user-scalable=yes / maximum-scale=5.0

으로 하면 되지만 텍스트 입력할때 자동확대가 되기때문에

불편완성도가 떨어지므로 최종완성을 사이즈조절불가로 하는게 좋은듯 하다.

 

 

<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width" />

 

meta name="viewport"

뷰포트 선언

 

user-scalable=no
사용자 단말의 확대기능을 사용 유무 선언. 현재는 no 즉 확대 불가능 선언

 

intial-scale=1
초기의 크기를 설정해줍니다. 1배수인 1이라고 명명해줬습니다.

 

minimum-scale=1
최소 크기를 설정해줍니다. 1배수인 1이라고 명명해줬습니다.


maximum-scale=1
최대 크기를 설정해줍니다. 1배수인 1이라고 명명해줬습니다.


 

content="width=device-width"

콘텐츠를 표현할 넓이를 명명 해줍니다. 현재는 "width=device-width" 즉 크기=디바이스의 크기에 맞추겠다고 선언해주었습니다.

 

 

http://blog.naver.com/clxm300?Redirect=Log&logNo=10152423403

저작자표시 비영리 (새창열림)
Posted by 갓리버리
html/html_css2014. 1. 22. 18:02

색각이상자_웹표준_장애인을위한 컬러구분적정성확인링크

장애인을위한 컬러구분적정성확인링크

http://www.fujitsu.com/global/accessibility/assistance/cs

 

파이어폭스에도 juicy studio accessibility toolbar를 통해서 컬러 기준을 통과하는지 안내함

저작자표시 비영리 (새창열림)
Posted by 갓리버리
html/html_css2014. 1. 22. 18:01

css 관련메모2


Sec03.zip



css 임포트 소스

 

예시1)헤더에서 불러오기

<link rel="stylesheet" type="text/css" href="mycss" />

 

예시1)스타일내에서 불러오기

 

<style type="text/css">
         @im★port url(style/base.css);
 </style>

 

 

css내 문자셋팅 선언(charset)

@charset "euc-kr";

@charset "utf-8";

 

 

css의 선택자 유형

 

타입선택자

p{}

h1{}

table{}

 

전체선택자(유니버셜선택자)

* { color : blue ; font-size : 24px ; }

 

class & id 선택자

p .note { }

ul #gnb { }

 

속성선택자(ie6에서 적용안됨)

 

img 요소증에 title속성이 있는 요소만 적용됨

img[title] { background-color : #ffccff ; }

 

a 요소증에 target="_blank"속성이 있는 요소만 적용됨

a[target="_blank"] { background-color : #ffccff ; }

 

a 요소중에서 class속성값이 공백문자로 구분하여 여러 개 있는경우

a[class~="new"] { background-color : #ffccff ; }

 

a 요소중에  class속성값에 하이픈(-)이 포함된경우

a[class|="new"]  { background-color : #ffccff ; }

 

a 요소중에 href 속성의 값에 http로 시작하는 경우

a[class|="new"] { background-color : #ffccff ; }

 

a 요소중에 href 속성의 값에 www가 포함되는 경우

a[class|="new"] { background-color : #ffccff ; }

 

 

가상 요소와 가상클래스 (첨부파일참조)

ex)

.note2 p:first-line { color:green; } 첫줄

.note3 p:first-letter { font-size:20px; color:green; font-weight:bold; }첫글자

 

p:before { content:"문단시작";} 문단 블릿위치

p:after { content:"문단종료";} 문단 끝위치

 

.child p:first-child { color:red; }첫번째 타입 전체

 

링크가상클래스 (순서틀리면 안됨 LoVe HAte)

  a { text-decoration : none ; }
  a:link { color : blue ; }
  a:visited { color : purple ; }
  a:hover{ color : orange ; }
  a:active{ color : red ; }
  a:focus { background-color : #ffc ; }

 

 

 

하위선택자

>공백을 통해 부자관계를 구분한다.

ex)#navigation li{color:blue;}

 

 

선택자 그룹화

> ","로 구분해서 넣어주면 된다.

ex)h1, #link{ color:red;}

 

자식선택자(ie6에서 적용안됨)

>부모의 직접적인 자식에게만 적용이 되고 > 로 구분한다.

ex) #navigation > li{border:1px solid red;}

 

인접형제선택자

h1 다음에 h2가 올경우에만 허용되는 선택자

※ 중간에 다른 요소가 껴있으면 적용안됨

h1 + h2 {  color : blue ;}

 

 

 

css의 색상

 

키워드 색상 종류

aqua #00FFFF

블랙

블루

fuchsia #FF00FF

gray

purple #800080

lime #00ff00

marroon #800000

navy #000080

olive #808000

그린

오렌지

레드

실버

teal #008080

화이트

옐로우

 

표현형식

1. red (카워드방식)

2. #342353 (16진수)

3. color:rgb(255,0,0); (rgb 형식-10진수)

4. color:rgb(0%,0%,100%); (백분율형식)

 

줌(zoom)

이미지나 각종요소들 정비율로 키우거나 줄이는기능

(익스와 사파리 크롬지원 / 사파리 오페라 지원안함)

 

ex)

img{zoom:1.5}

저작자표시 비영리 (새창열림)
Posted by 갓리버리
html/html_css2014. 1. 22. 18:01

브라우저 구분소스_크로스브라우징

자세한건 모르겠고 올레에서 이거 적용가능함

/- IE7*-
 *:first-child+html #termsPhone li {height:33px;}
 *:first-child+html #termsPhone .yy_nmanwoman {margin-top:0px;}
 *:first-child+html #termsPhone .yy_nation {margin-top:-17px;}
 *:first-child+html #termsPhone .yy_certi {margin-top:-10px;}
 *:first-child+html #termsCredit .yy_email {margin-top:-15px;}

 

 

-----------------------------------------------

 

<script language="javas-ript">

<!--//
window. = backgroundChange; // 윈도우가 로드되면 backgroundChange함수 실행


function backgroundChange(){ // backgroundChange함수 시작

var oDiv=document.getElementById("testDiv");

if( navigator.appName.indexOf("Microsoft") > -1 ){ // 마이크로소프트 익스플로러인지 확인
if( navigator.appVersion.indexOf("MSIE 6") > -1){ // 익스플로러이면 버전 6인지 확인
oDiv.style.backgroundImage = "url('a.gif')";

}else if(navigator.appVersion.indexOf("MSIE 7") > -1){ // 익스 플로러이면 버전 7인지 확인

oDiv.style.backgroundImage = "url('b.gif')";

}
}else{ // 익스플로러가 아닐 경우
oDiv.style.backgroundImage = "url('a.gif')";

}
}

//-->

</script>

<div id="testDiv" style="width:300px;height:300px"></div> // div에 폭과 너비를 준다.

 

 

appCodeName : 브라우저의 코드명을 반환

appName : 현재 사용중인 브라우저의 이름을 반환
appVersion : 현재 사용중인 브라우저의 버전을 반환
userAgent : 브라우저의 이름, 버전, 코드를 포함하는 문자열을 반환
minetype : mine 형식의 정보를 반환(오브젝트)
plugins : plugin 정보를 반환(오브젝트)
language : 현재 브라우저가 사용하는 언어를 반환. 익스플로러에서는 지원하지 않음
platform : 사용중인 시스템 코드를 반환. 윈도 95/98/NT는 Win32를 반환

 

 

출처

http://kin.naver.com/qna/detail.nhn?d1id=1&dirId=1040202&docId=65068083&qb=7J6Q67CU7Iqk7YGs66a97Yq4IOu4jOudvOyasOyguCDqtazrtoQ=&enc=utf8&section=kin&rank=1&search_sort=0&spq=0

 

추가출처

http://kin.naver.com/qna/detail.nhn?d1id=1&dirId=1040202&docId=130090776&qb=aWYgYnJvd3NlciBzYWZhcmk=&enc=utf8&section=kin&rank=1&search_sort=0&spq=0&pid=RMgVrc5Y7uCsstwpX3Rsssssstd-056961&sid=UOTrInJvLDIAAE6dqgk


저작자표시 비영리 (새창열림)
Posted by 갓리버리
html/html_css2014. 1. 22. 18:00

인라인 요소와 블럭요소_웹표준 핵심가이드북

블럭요소

블럭요소를 포함할 수 있는요소

블럭요소사이에는 기본적인 여백이 있는데 브라우저마다 다르다.

<h1>~<6>

<p>

<adress>

 

인라인요소

블럭요소를 포함할 수 없는요소

<a>

<br />

<img />

<em>

<strong>

저작자표시 비영리 (새창열림)
Posted by 갓리버리

티스토리툴바