스크롤 고정 메뉴
작성일 13-12-16 15:59
페이지 정보
작성자서방님 조회 105회 댓글 0건본문
http://ofdream.com/code/fixed_scroll.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
<head>
<title>스크롤 고정메뉴</title>
<meta http-equiv="Content-Type" content="text/html; chaRset=euc-kr">
<style type="text/css">
html { _overflow:hidden;}
body {margin:0;padding:0;}
body{ _height:100%; _width:100%; _overflow:auto;}
.bodya { width:900px; height:100%; margin:0 auto; }
.top { width:900px; height:100px; position:fixed; background-color:#ff0000; _position:absolute; }
.sub { position:fixed; top:100px; width:200px; height:400px; background-color:#00ff00; _position:absolute; }
.main{ padding-top:100px; padding-left:200px; background-color:#ffff00; }
</style>
</head>
<body>
<div class="bodya">
<div class="top">탑메뉴 영역</div>
<div class="sub">왼쪽메뉴 영역</div>
<div class="main">
top유니버설 디자인을 위한 실전 UI(HTML/CSS)개발 가이드<br><br>
목차<br>
1. 문서형(DTD)을 꼭 선언해야 하나요?<br>
2. 문서형(DTD)의 종류가 많던데 권장하는 것은 무엇입니까?<br>
3. XHTML의 문법은 HTML과 비교해서 무엇이 다른가요?<br>
4. HTML과 XHTML 가운데 어떤 문서형(DTD)을 사용하는 것이 좋을까요?<br>
5. 문자셋(charset)으로 UTF-8을 권장하는 이유는 무엇인가요?<br>
6. 휴먼 랭귀지(human language)가 무엇인가요?<br>
7. 문서의 제목 을 어떻게 작성하는것이 가장 좋을까요?<br>
8. 의미론적 마크업(semantic markup)이란 무엇입니까?<br>
9. 제목 요소 <hx>...</hx>는 어떻게 작성하는 것이 가장 좋을까요?<br>
10. 의미론적 마크업을 잘 하는 방법이 있을까요?<br>
11. 논리적인 순서란 어떤 것입니까?<br>
12. 논리적 마크업을 위해서 화면 배치를 위한 <table>...</table>을 사용하지 않기로 했습니다. 이제 무엇으로 마크업 하나요?<br>
13. 논리적인 마크업 예제를 한번 볼 수 있을까요?<br>
14. 컬럼 구조 레이아웃을 위한 CSS 기법이 궁금합니다.<br>
15. 'id/class' 선택자 사용 기준은 무엇이고 어떻게 네이밍 하는것이 좋을까요?<br>
16. 이미지 대체 텍스트 속성 alt="*" 어떻게 작성하는 것이 가장 좋은가요? title="*" 속성과는 어떻게 다르죠?<br>
17. 이미지에 포함된 텍스트의 양이 너무 많습니다. 어떻게 처리하죠?<br>
18. 모두가 이용할 수 있는 longdesc 텍스트를 제공하고 싶습니다.<br>
19. 웹 브라우저 호환성을 유지하기 위한 CSS 기법은 무엇이 있나요?<br>
20. IR(Image Replacement) 기법이란 무엇입니까?<br>
21. Image Sprite 기법이란 무엇입니까?<br>
22. 동영상 대체 콘텐츠는 무엇이고 어떻게 처리해야 합니까?<br>
23. 프레임셋 의 문제는 무엇인가요?<br>
24. 프레임셋 을 사용한다면 무엇을 주의해야 하나요?<br>
25. 내용 없는 빈 을 사용하고 있습니다. 이런 빈 프레임에도 title="*" 속성을 이용해서 설명해야 하나요?<br>
26. 모든 기능을 키보드로 이용할 수 있도록 하려면 무엇을 주의해야 하나요?<br>
27. onclick과 onkeypress, onkeydown, onkeyup 이벤트 헨들러를 함께 사용하면 안되는 이유가 무엇입니까?<br>
28. <a>...</a> 요소를 마크업 할 때 href 속성의 값으로 "#"을 사용하면 안되나요?<br>
29. 요소의 의미와 사용법을 알려주세요.<br>
30. 요소의 디자인을 CSS로 제어할 수 없나요?<br>
31. CSS 기반의 가변폭 텍스트 버튼을 만들고 싶습니다.<br>
32. 키보드의 논리적인 접근 순서를 위해 tabindex="*" 속성을 사용해도 될까요?<br>
33. 건너뛰기 링크는 어떻게 구현하는 것이 가장 좋을까요?<br>
34. 자바스크립트를 이용한 팝업 띄우기는 무엇이 문제인가요? 어떻게 하면 되죠?<br>
35. 데이터 테이블 <table>...</table>을 의미있고 논리적으로 작성하는 방법은 무엇인가요?<br>
36. 탭 메뉴 형태의 네비게이션은 무엇으로 어떻게 마크업 해야 합니까?<br>
37. <label>...</label> 요소는 어떻게 사용하나요?<br>
38. 플래시 네비게이션의 문제는 무엇인가요?<br>
39. 겸손한 자바스크립트(Unobtrusive JavaScript)란 무엇입니까?<br>
40. Ajax의 접근성 문제는 무엇입니까?<br>
41. 시각 장애인을 위하여 CSS { display:none } 처리된 콘텐츠를 제공하는 것이 왜 나쁜가요?<br>
42. CSS Framework이란 무엇 입니까?<br>
43. 드림위버와 같은 위지윅(WYSIWYG) 도구는 웹 표준이나 접근성을 지원 하나요?<br>
44. 드림위버는 너무 무거운 프로그램 아닌가요?<br>
45. CSS 파일을 부를 때 <link />와 @import의 차이는 뭔가요? 어떤 방법이 더 좋죠?<br>
46. 인쇄용 CSS를 어떻게 작성하는 것이 좋을까요?<br>
47. IE 6 브라우저는 #id.class 다중 선택자 조합을 지원하지 않습니다.<br>
48. IE 6 브라우저는 .class.class 다중 선택자 조합 일부를 지원하지 않습니다.<br>
49. IE 6 브라우저는 float 처리된 요소의 margin을 두 배로 처리하는 버그가 있습니다.<br>
50. IE 6~7 브라우저는 float된 요소의 문자를 복사하는 버그가 있습니다.<br>
51. IE 6~7 브라우저는 float된 요소 주변에 등장하는 absolute 요소를 표시하지 않는 버그가 있습니다.<br>
52. 도움 주신 분들.<br><br>
문서형(DTD)을 꼭 선언해야 하나요?<br><br>
대부분의 웹 브라우저들은 문서형(DTD:Document Type Definition)이 선언되지 않은 웹 문서를 낡은 웹 문서로 간주하고 아주 오래된 웹 브라우저(IE4)의 렌더링을 흉내 냅니다. 이런 상태를 쿽스모드(Quirks Mode)라고 부르는데 웹 브라우저들마다 쿽스모드일 때 화면을 표시하는 방법이 달라서 문서형을 선언하지 않으면 브라우저 호환성을 확보하기 어렵습니다. 문서형을 선언하는 것은 다양한 환경에서 상호 운용성을 보장하기 위한 첫 걸음 입니다.<br><br>
문서형(DTD)의 종류가 많던데 권장하는 것은 무엇입니까?<br><br>
HTML의 버전에 따라서 크게 HTML과 XHTML로 나눌 수 있고 각 DTD별로 또 다시 호환형(transitional)와 엄격형(strict)으로 나뉩니다. 호환형은 더 이상 권장하지 않는 요소와 속성까지 지원하기 때문에 오래된 콘텐츠를 다룰 때 호환성이 좋고 사용자들의 오랜 습관(비록 나쁜 습관이라 할지라도)을 배려할 수 있기 때문에 보다 권장 합니다. 엄격형은 호환형보다 뛰어난 품질의 코드를 작성할 수 있지만 더 이상 낡은 요소와 속성을 지원하지 않기 때문에 오래된 콘텐츠와의 호환성이 떨어지고 새 창(새 탭) 띄우기와 같은 익숙한 기능을 제한하기 때문에 권장하지 않습니다.<br><br>
새 창 띄우기 속성을 엄격형에서 지원하지 않는 이유는 브라우저 타겟의 선택권을 사용자에게 돌려주기 위함이나 최근에 이르러 대부분의 웹 브라우저들이 보다 나은 성능의 탭 브라우징을 지원(모바일 브라우저 포함)하고 문맥에 따라 웹 콘텐츠 제작자가 사용자 편의를 배려하는 측면에서 새 창 띄우기를 채택할 수 있기 때문에 새 창 띄우기를 제한하는 것이 항상 올바른 선택이라고 보기도 어렵습니다.<br><br>
결국 HTML을 선택하든 XHTML을 선택하든 엄격한(strict) 문서형보다 호환형(transitional) 문서형을 권장합니다. DTD는 HTML 문서의 첫 번째 라인에 공백 없이 작성해야 합니다.<br><br>
HTML 4.01
Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Transitional (권장)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
XHTML 1.0
Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Transitional (권장)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML의 문법은 HTML과 비교해서 무엇이 다른가요?
엄격한 문법
HTML은 잘못된 중첩을 느슨하게 허용했으나 XHTML은 잘못된 중첩이 허용되지 않습니다. W3C 문법 검사기나 웹 개발자 도구의 지원을 받아 문법의 유효성을 확보하지 않으면 호환성(오류, 깨짐) 문제가 발생합니다.
<div><p>...</div></p> (X)
<div><p>...</p></div> (O)
소문자 작성
HTML 태그는 대소문자를 구분하지 않고 혼용하여 사용했었지만 XHTML은 이 둘을 구분하며 모든 '요소'와 '속성'을 소문자로 작성해야 합니다.
<DIV CLASS="value"> (X)
<div class="value"> (O)
태그의 종료
HTML은 <td>, <p>, <img> 와 같은 태그들을 종료하지 않아도 허용했지만 XHTML은 반드시 종료해야 합니다. 내용을 포함하지 않는 태그도 반드시 종료 <img /> 합니다.
<img src="..." alt="..."> (X)
<img src="..." alt="..." /> (O)
생략 금지
HTML은 속성의 값에 대한 단축 표기를 허용했지만 XHTML은 단축 표기를 허용하지 않습니다.
<input type="radio" checked> (X)
<input type="radio" checked="checked" /> (O)
따옴표 사용
HTML은 속성의 값에 대한 따옴표 생략이 가능했지만 XHTML은 따옴표 생략을 허용하지 않습니다.
<p class=value> (X)
<p class="value"> (O)
HTML과 XHTML 가운데 어떤 문서형(DTD)을 사용하는 것이 좋을까요?
HTML이든 XHTML이든 모두 괜찮지만 HTML보다 XHTML 문법이 더 엄격하고 확장 가능성이 높기 때문에 개발 편의 및 상위 호환성 측면에서 보다 권장 합니다. 어떤 이들은 이 선택을 선호의 문제라고 보는 반면 어떤 이들은 어느 한쪽이 더 우월한 기술이라고 이야기 합니다. 그러나 둘 중 어떤 형식을 선택하더라도 현재의 사용자에게 불리하게 작용하지는 않으므로 결국 개발자 조직 내부에서 선택의 문제로 귀결 됩니다.
문자셋(charset)으로 UTF-8을 권장하는 이유는 무엇인가요?
전세계 모든 문자를 컴퓨터에서 일관되고 풍부하게 표현할 수 있기 때문에 다국어 환경에 적합합니다. 뿐만 아니라 EUC-KR 보다 표현할 수 있는 한글 표현이 더 많아서 온라인 사전 콘텐츠는 반드시 UTF-8 문자셋을 사용합니다.
HTML 문서에서 UTF-8 문자셋을 사용하려면 <head>...</head> 안쪽에 다음과 같이 선언 합니다. 파일 저장시 선언한 문자셋과 동일한 인코딩 형식으로 저장해야 문자가 깨지지 않습니다.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
휴먼 랭귀지(human language)가 무엇인가요?
말 그대로 인간이 사용하는 언어를 말합니다. HTML 문서에 휴먼 랭귀지를 선언하면 HTML을 해석할 수 있는 소프트웨어들이 올바르게 동작하는 것을 돕습니다. 예를 들면 화면낭독 프로그램이나 점자 출력기 같은 보조 도구들이 이 선언을 이용할 수 있고 검색 엔진은 사용자의 주 사용 언어와 일치하는 검색결과를 제시할 수 있습니다. 주된 휴먼 랭귀지 속성은 <html> 요소에 한번 선언하고 콘텐츠 안에서 다양한 휴먼 랭귀지가 사용되는 경우 특정 요소마다 각각 다시 선언할 수 있습니다. 최소한 주된 휴먼 랭귀지는 반드시 선언하는 것이 좋고 각각의 콘텐츠 요소에 대한 휴먼 랭귀지는 가능하다면 선언하는 것이 좋습니다.
랭귀지 코드는 주 사용 언어에 따라 '한국어(ko), 영어(en), 일어(ja), 중국어(zh) ...' 형식으로 지정할 수 있고 선언하는 방법은 다음과 같습니다.
HTML
<html lang="ko">
<p lang="en">
XHTML
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">
<p lang="en">
문서의 제목 <title>...</title>을 어떻게 작성하는것이 가장 좋을까요?
<title>...</title> 요소는 문서의 제목을 선언하는 요소로써 다음과 같은 세 가지 측면에서 중요합니다.
1. 첫째, 검색엔진 최적화 관점에서 가장 적은 비용으로 가장 큰 효과를 거둘 수 있습니다. 검색엔진은 본문의 콘텐츠보다 문서의 제목에 가중치를 둡니다.
2. 둘째, 웹 브라우저의 탭에 표시되기 때문에 다른 탭으로부터 현재의 문서를 빠르게 인지할 수 있도록 돕습니다. 즐겨찾기 아이콘(Favicon)과 함께 사용하면 더욱 효과적입니다.
3. 셋째, 화면 낭독 프로그램 사용자는 웹 문서가 열리는 순간 문서 제목을 음성으로 전달받기 때문에 시각 장애인의 탐색을 돕습니다.
가장 좋은 제목은 현재 문서의 핵심 키워드를 사용한 짧은 제목 입니다. 하나의 웹 사이트에서 동일한 키워드가 반복해서 제목으로 등장하는 것은 검색엔진의 정확도를 떨어뜨리고 시각 장애인의 접근성에도 좋지 않은 영향을 미칩니다. 현재 문서에 이르는 문서의 계층 구조를 제목으로써 모두 나열하는 것도 동일한 제목을 반복해서 사용하기 때문에 권장할만한 방법은 아닙니다.
의미론적 마크업(semantic markup)이란 무엇입니까?
의미론적 마크업이란 웹 콘텐츠 요소에 가장 적합한 의미의 HTML 코드를 부여해서 데이터가 정보로써의 가치를 갖게된 형태를 말합니다. 의미론적 마크업은 기계적으로도 해석이 가능하기 때문에 사람의 인지 작용을 돕습니다. 제목을 제목 요소 <hx>...</hx> 으로 마크업 하면 제목 정렬 기능을 갖춘 소프트웨어는 보다 빠르게 원하는 콘텐츠로 이동하는 것을 돕습니다. 이런 기능은 현존하는 화면낭독 프로그램이 대부분 지원하고 있기 때문에 웹 접근성을 높여주고 검색엔진 최적화 관점에서 <title>...</title> 다음으로 중요 합니다. 웹 콘텐츠의 구조와 순서를 바로잡기 위한 논리적 마크업(logical markup)과 맥을 같이 합니다.
제목 요소 <hx>...</hx>는 어떻게 작성하는 것이 가장 좋을까요?
<hx>...</hx> 제목 요소는 '섹션, 블럭' 콘텐츠에 대한 제목을 마크업 하는 요소로써 문서의 계층 구조를 여섯 단계로 표현 합니다. 작은 숫자일수록 큰 제목으로써 웹 브라우저들은 흔히 좀 더 크고 굵은 글꼴로 표시하시만 CSS를 이용해서 초기화 하거나 원하는 스타일로 변경할 수 있습니다. 제목의 단계는 건너뛰지 않는 것이 좋고 단지 굵은 글꼴을 표현하기 위해 사용하는 경우 논리적인 마크업을 해치게 됩니다. <h1>...</h1> 요소는 한 문서에 반드시 한 번 이상 선언이 되어야 하고 한 문서에서 여러번 선언할 수 있는데 사이트 제목과 본문 제목에 동시에 선언함으로써 검색엔진으로부터 더 높은 점수를 받을 수 있습니다. <h2> ~ <h6> 요소 또한 문서의 계층 구조에 따라 여러번 선언할 수 있습니다.
웹 사이트의 로고(조직의 이름, 브랜드 이름)를 <h1>...</h1>으로 작성해야 한다고 주장하는 사람도 있고 콘텐츠 본문의 제목을 <h1>...</h1>으로 작성해야 한다고 주장하는 사람들이 있는데 두 가지 방법 모두 통용되는 방법이며 사이트 제목과 본문 제목을 모두 <h1>...</h1>으로 마크업 하는 것도 가능 합니다.
의미론적 마크업을 잘 하는 방법이 있을까요?
네, 있습니다. '제목(keyword)'과 '내용(content)'의 의미를 판독해서 구분하는 것이 가장 중요 하고 '내용'으로부터 '제목'을 분리해 냈다면 가장 적절한 의미의 '제목 요소 마크업'을 사용 합니다. 제목 요소 마크업은 다음과 같이 구분할 수 있습니다.
<th>...</th> 요소와 <label>...</label> 요소는 제목 요소로 분류하기에 애매하고 논란의 여지가 있지만 짝이 맞는 내용 요소를 갖는다는 점에서 제목 요소로 포함시켰습니다.
논리적인 순서란 어떤 것입니까?
논리적인 순서는 사용자에게 내용이 전달되는 형태에 따라 크게 세 가지로 구분할 수 있고 각각의 순서는 '선형화 순서'를 중심으로 되도록 일치시키는 것이 좋습니다.
논리적인 화면 배치 순서
모니터와 같은 비주얼 장치에서 보이는 흐름이나 순서를 말합니다. 왼쪽에서 오른쪽으로 글을 쓰고 읽는 문화권에서는 중요한 제목이나 내용을 화면의 좌측 상단으로부터 배치하고 덜 중요한 내용은 우측 하단으로 순차적으로 배치 합니다. 이 순서를 지키지 않으면 읽고 이해하는데 어려움을 격지만 시각이 있는 사람들은 불필요한 내용을 빠르게 건너 뛸 수 있기 때문에 치명적이지는 않습니다. 화면 배치를 위해 HTML 구조(예:table)에 지나치게 의존하면 의미론적 마크업을 포기해야 하는 경우가 발생하기 때문에 CSS를 이용해야 합니다. 요소를 의미와 무관하게 화면 배치를 위해 사용하는 경우 논리적인 순서를 해칠 가능성이 높습니다.
논리적인 선형화 순서(가장 중요)
시각적인 흐름과 무관하게 작성된 HTML 마크업 순서로써 '웹 브라우저, 화면 낭독기'와 같은 도구들은 이 순서에 따라 문서를 해석 합니다. 가장 많이 발생하는 실수는 여러 단계의 노드를 갖는 내용을 작성할 때 '부모A>자식a-부모B>자식b' 순서로 마크업 하지 않고 '부모A-부모B-자식a-자식b' 순서로 마크업 하는 것입니다. 이렇게 노드 관계를 무시하는 마크업은 화면 낭독기 사용자에게 치명적 입니다. HTML 마크업의 논리적인 순서는 키보드의 접근 순서에도 직접 영향을 미치기 때문에 중요 합니다.
논리적인 키보드 접근 순서
키보드 접근 순서는 기본적으로 HTML 마크업 순서에 따릅니다. 웹에 매우 익숙하거나 또는 마우스를 사용할 수 없는 장애인들이 키보드를 사용합니다. 화면에 보이지 않는다고 해서 HTML의 논리적인 순서를 충분히 고려하지 않으면 키보드의 접근 순서가 엉망이 되기 때문에 키보드의 논리적인 접근 순서를 바로잡는 문제는 전적으로 HTML의 논리적인 순서에 종속 됩니다. 잘못된 HTML의 논리적인 순서를 바로잡지 않고 tabindex 라는 속성을 이용해서 키보드 접근 순서만 바르게 교정하는 경우 마크업 순서와 키보드 접근 순서가 일치하지 않기 때문에 바람직하지 않습니다. CSS를 제거하는 기능이 포함된 브라우저에서 키보드로 접근하기에 혼란스럽게 됩니다.
논리적 마크업을 위해서 화면 배치를 위한 을 사용하지 않기로 했습니다. 이제 무엇으로 마크업 하나요?
</P>
</div><!--#main-->
</div><!--#body-->
</body>
</html>
댓글목록
등록된 댓글이 없습니다.