'html'에 해당되는 글 100건
- 2014.01.22 웹 접근성 이미지 테스트_표준코딩
- 2014.01.22 라벨태그의 활용_label
- 2014.01.22 반응형웹 media쿼리_해상도에따른 css구분
- 2014.01.22 뷰포트_반응형웹_viewport
- 2014.01.22 색각이상자_웹표준_장애인을위한 컬러구분적정성확인링크
- 2014.01.22 css 관련메모2
- 2014.01.22 브라우저 구분소스_크로스브라우징
- 2014.01.22 인라인 요소와 블럭요소_웹표준 핵심가이드북
- 2014.01.22 xhtml 상단설명(웹표준핵심가이드북)
- 2014.01.22 버티컬센터정렬_세로센터_표준코딩
웹접근성자료.docx<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>
반응형웹_media쿼리.html0px-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; }
}
뷰포트
※ 확대를 할수 있게하려면
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
장애인을위한 컬러구분적정성확인링크
http://www.fujitsu.com/global/accessibility/assistance/cs
파이어폭스에도 juicy studio accessibility toolbar를 통해서 컬러 기준을 통과하는지 안내함
Sec03.zipcss 임포트 소스
예시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}
자세한건 모르겠고 올레에서 이거 적용가능함
/- 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§ion=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§ion=kin&rank=1&search_sort=0&spq=0&pid=RMgVrc5Y7uCsstwpX3Rsssssstd-056961&sid=UOTrInJvLDIAAE6dqgk
문서형 정의선언(DTD)
문서형 정의선언에는 크게
strict - 엄격형(strict.dtd)
w3c가 의도했던 문서타입
center, font, iframe, strike, u 제한
Transitional - 호환형(loose.dtd)
스트릭트형이 되기위한 중간단계의 대비책
Frameset-프레임형
이건뭐지 ㅋ
이있다.
문서선언 위에는 공백을 포함해 어떤 요소도 있어선 안된다.
ex)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
선언참고링크
http://www.webstandards.org/learn/reference/templates/
네임 스페이스
html이 xml의 요소를 가지게되면서 xhtml에서 선언해줘야하는 소스
<html xmlns=http://www.w3.org/1999/xhtml">
휴먼랭귀지
웹브라우저나 화면낭독기등이 웹문서에 쓰여진 언어를 올바로 해석하도록 문서에 하는 선언
한국어-ko
영어-en
일어-ja
중국어-zh
프랑스어-fr
독일어-de
ex)
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko" >
메타태그
문서정보지정을 위한 빈요소
문자코드세트(인코딩)
<meta http-equiv="content-type" content="text/html; charset=euc-kr" />
키워드
<meta name="Keywords" content="html,tag,mata,메타,태그">
문서제목정보
<meta name="subject" content="웹 접근성 전문가 소개" />
웹페이지 요약정보
<meta name="Description" content="META 태그에 관한 정보">
제작자정보
<meta name="Author" content="RANGS">
검색로봇제어
<meta name="robots" content="index,follow" />
저작권정보
<meta name="Copyright" content="2003 RANGS">
