This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
CSS& XHTML
웹표준가이드
2010.04.05 박 성곤
웹표준/웹접근성의 정의
웹 접근성은 장애인들도 웹을 사용할 수 있도록 하는 것입니다. 장애인들도 웹 사이트와 페이지를 이동하고, 웹의 정보를 확인/이해하며, 웹 페이지를 작성할 수 있도록 하는 것입니다. 웹 접근성이 확보되면, 장애인 뿐만 아니라, 우리 자신도 언제가 될 노인에게 많은 도움을 줍니다.
웹에 접근하는 데 영향을 미치는 요인은 시각, 청각, 지각, 신체, 신경질환, 언어 장애와 같은 신체적 장애뿐 아니라, 고사양 하드웨어, 고비용 소프트웨어를 사용하지 못하는 사회 경제적 여건까지를 포함합니다.
수 많은 사람들이 웹을 사용하는데 장애를 겪고 있습니다. 대부분의 웹 사이트와 웹 어플리케이션은 접근성을 저해하는 요소를 갖고 있으며, 이로 인해 많은 장애인들이 웹에 접근하지 못하고 있습니다. 웹 사이트와 웹 어플리케이션의 접근성이 향상될수록, 장애인들도 보다 쉽게 웹에 접속하고 정보를 생산할 수 있습니다.
인터넷을 이용하는 모든 분들이 최신 사양의 고성능 컴퓨터를 사용하는 것은 아닙니다. 경제적 여건이 어려워 낡은, 저사양 컴퓨터를 이용하시는 분들도 큰 불편없이 정보를 접하고 서비스를 받을 수 있도록 하는 것도 웹 접근성의 문제입니다. 그리고 마우스를 민첩하게 다루기 어려운 어르신들께서도 이용에 불편이 없도록 해드리는 것도 접근성의 문제입니다.
웹 접근성은 장애인이 아닌 일반인에게도 이익을 줍니다. 예를 들어, 웹 접근성의 핵심은 웹 사이트와 어플리케이션이 다양한 사용자의 요구와 기호, 환경에 유연하게 대처할 수 있도록 디자인하는 것입니다.이러한 유연함은 느린 인터넷 회선 속도, 팔이나 손가락이 다친 환자 등 특정 환경에 처한 일반인에게도 이익을 줍니다.
웹표준이 왜 중요한가요?웹은 교육, 고용, 정부, 경제, 건강, 오락 등 삶의 여러 측면에서 더욱 중요한 수단이 되고 있습니다. 이 점이 바로 웹이 장애인에게 동일한 접근과 동일한 기회을 제공해야 하는 본질적인 이유입니다. 접근 가능한 웹은 장애인의 활발한 사회 참여를 가능하게 하기 때문입니다.
웹접근성 준수하기
웹은 교육, 고용, 정부, 경제, 건강, 오락 등 삶의 여러 측면에서 더욱 중요한 수단이 되고 있습니다. 이 점이 바로 웹이 장애인에게 동일한 접근과 동일한 기회을 제공해야 하는 본질적인 이유입니다. 접근 가능한 웹은 장애인의 활발한 사회 참여를 가능하게 하기 때문입니다.CSS 적용사례
caption :표의 제목 요소. table 요소 바로 뒤에만 허용되며 한 번만 표시할 수 있습니다.summary :
표의 요약 속성. table 요소에 동반되는 속성으로서 표의 제목이 존재하지 않는 경우나 표에 요약설명이 필요한 경우 사용할 수 있습니다.thead, tbody, tfoot :표의 행 tr을 그룹핑하는 요소로서 표의 머리글, 본문, 풋터를 지정합니다. tfoot 요소의 경우 보통 이에 해당하는 데이터가 없어서 생략되는 경우가 많습니다. th :표의 머리글 셀을 지정합니다. 표의 머리글 셀은 scope, abbr 과 같은 속성을 동반합니다. scope 속성은 사용이 강력하게 권장되며 abbr 속성은 필요에 따라 사용할 수 있습니다.scope :th 요소에 동반되는 속성으로서 현재의 셀이 어느 셀의 제목인지 그 범위를 명시합니다. scope 속성의 값으로는 col, colgroup, row, rowgroup 이 있습니다.
abbr :th 요소에 동반되는 속성으로서 포함하고 있는 콘텐츠에 대한 약식표기가 가능한 경우 약어를 표기하는데 사용합니다. th 셀의 내용을 반복해서 음성으로 출력하는 도구들은 abbr 속성에 표기된 약어를 읽게 됩니다.
table 의 자식요소인 caption, thead, tbody, tfoot, tr, th, td 는 들여쓰기 하지 않습니다.<table><caption>...</caption><thead><tr><th>...</th><th>...</th></tr></thead><tbody><tr><td>...</td><td>...</td></tr></tbody></table>ul, ol, dl 의 자식요소인 li, dt, dd 요소는 들여쓰기 하지 않습니다.<ul><li>...</li><li>...</li></ul>
(list 의 스타일을 정의한다)list-style-image : [url(주소)/none] (list 마커로 사용할 이미지 선택)list-style-position : [outside/inside] (마커가 표시될 위치 지정)cursor : [hand/move/wait/ne-resize/nw-resize/sw-resize/se-resize] (커서의 형태를 지정한다)
속기법정리
padding-top:0px; padding-right:20px; padding-bottom:30px; padding-left:10px;padding:0px 20px 30px 10px;
---------- 결과 -----------------------------------------------------------------------------------------------------------------------------
머리말 타이틀 정의하기
<!-- 머릿말 타이틀 정의하기 --><style>h1,h2,h3,h4,h5,h6 {color:#009900;} /*머릿말 폰트의 크기를 정의합니다.*/</style><h1>머릿말 h1 입니다</h1><h2>머릿말 h2 입니다</h2><h3>머릿말 h3 입니다</h3><h4>머릿말 h4 입니다</h4><h5>머릿말 h5 입니다</h5> <!-- //머릿말 타이틀 정의하기 -->
---------- 결과 -----------------------------------------------------------------------------------------------------------------------------
글씨에 스타일주기
<!-- 글씨에 스타일주기 --><style>#plop {font:17px "나눔고딕",arial; color:red;}#line-h {line-height:150%;letter-spacing:-1px;width:300px;}/* line-height 는 글씨 높이를 150%간격으로 늘려줍니다. letter-spacing 은 글씨 자간을 줄여줍니다.*/#line-h a{font-size:20px;color:#060;text-decoration:underline;}/* line-h 에 링크가 있다면 밑줄을 나오게 합니다.*/</style>
<p>바로 이런것이 <span id=abc>전문성</span>입니다.</p><span id=plop>바로 이런것이 전문성 입니다.</span><p id=line-h>부활한 '코리안 특급' 박찬호와 필라델피아의 결별이 기정사실로 알려졌다. 이에 따라 향후 박찬호의 행보에 국내 팬들은 물론 현지 언론도 높은 관심을 보이고 있다. 외신은 15 일(이후 한국시간) "박찬호는 (구단이 제시한) 300 만 달러보다 훨씬 높은 몸값과 선발투수 보직을 바라고 있지만 <a href="">필라델피아는</a> 이 조건들을 받아들이지 않았다."고 보도했다. 사실상 결별이 확정된 것으로 보인다.</p> <!-- //글씨에 스타일주기 -->
---------- 결과 -----------------------------------------------------------------------------------------------------------------------------
---------- 결과 -----------------------------------------------------------------------------------------------------------------------------
서브메뉴_02
<!-- 서브메뉴 02 --><style>#menu_over {width:200px;background:#ccc;padding:5px;}/*margin:0pt auto 는 가운데로 붙는 명령어 입니다.*/#menu_over a, #menu_over a:visited {display:block;width:184px;background:#ffff99;padding:3px 3px 3px 10px;margin:1px;text-decoration:none;border-right:3px solid #7f7f7f;color:#555;}/*display:block 처리를 하면 아래로 줄바꿈을 합니다. padding:3px;margin:1px 은 블록안에서 이루어 집니다*/#menu_over a:hover {border-right:3px solid #000;color:#000;background:#ffffff;}/*마우스를 올렸을때 반응입니다.*/</style><div id="menu_over"> <a href="#">menu 1</a> <a href="#">menu 2</a> <a href="#">menu 3</a> <a href="#">menu 4</a> <a href="#">menu 5</a></div> <!-- //서브메뉴 02 -->
---------- 결과 -----------------------------------------------------------------------------------------------------------------------------
서브메뉴_03<style>#alzio_mh {width:208px;font:12px"나눔고딕",arial;font-weight:bold;padding:2px; background:#90bade;margin-top:30px}/**/#alzio_mh ul {margin:0;padding:0;list-style: none;}/**/#alzio_mh ul li {border-bottom:1px solid #90bade;}/**/#alzio_mh ul li a {display:block;padding:2px 2px 2px 10px;border-left:5px solid #1958b7;border-right:5px solid #508fc4;background:#2175bc;color:#fff;text-decoration:none;}/*li 를 따로 선언해주면 display:block 에 width값이 없어도 적용이 됩니다.*/#alzio_mh ul li a:hover {border-left:5px solid #1c64d1; border-right:5px solid #5ba3e0; background:#2586d7;}/**/#alzio_mh ul li a.on {border-left:5px solid red; border-right:5px solid green; background:yellow;color:red;}/**/</style><div id="alzio_mh"><ul>
---------- 결과 -----------------------------------------------------------------------------------------------------------------------------
서브메뉴_04
<!-- 서브메뉴 04 --> <style> #alzio_mh2 {width:120px;margin-top:30px}/**/#alzio_mh2 ul {margin:0;padding:0;}#alzio_mh2 li {list-style:none}/**/#alzio_mh2 ul li a {display:block;width:120px;padding:5px;color:#fff; background:#e6e6e6;border-bottom:1px solid #eee;text-decoration: none;}/*width:120px 를 써주면 링크영역이 잡힙니다. li 를 따로 선언해주지 않으면 display:block 에 width값이 반드시 있어야 됩니다. */#alzio_mh2 li.on a {background:#000;color:#fff;}#alzio_mh2 li a:hover {background:#000;color:#fff;}
---------- 결과 -----------------------------------------------------------------------------------------------------------------------------
제 1 강 블록과 인라인HTML 이나 XHTML 의 Tag 들은 Block level element 와 Inline level element 으로 나누어 진다.눈에 보이는 특징으로 구분한다면, Block형 tag 는 줄바꿈이 되고 Inline형 tag 는 줄바꿈이 되지 않는 다는 것이다
블록 엘리먼트들은 <p>엘리먼트 밖에 두어야 합니다.문단은 텍스트를 위한 것입니다. 따라서 문단 밖에 블록 엘리먼트들을 위치시켜야 합니다.물론 모든 인라인 엘리먼트들을 두는 것은 괜찮습니다.<em>, <a>, <strong>, <img>, <q>
일반적으로, block 은 다른 block 과 inline 를 포함합니다.block 은 inline 의 상위구조입니다.일반적인 속성의 block 은 새로운 줄을 만듭니다.(줄단위의 공간값을 가집니다.)div, form, ul, ol, li, dl, dt, dd 등이 block 그루핑에 사용되는 엘리먼트들이다.block 태그들은 성격에 따라 Physical, Logical, Group, User-input 로 분류가 됩니다.
<address>태그역시 block태그가 위치하지 못합니다.즉, <p>, <li>, <address> 태그안에는 오로지 inline태그들만이 위치할 수 있습니다.또한, inline태그를 display:block 으로 바꾸어 사용할 수도 없습니다.이럴때 쓰는 것이 display: inline 입니다.
<참조>보통 제목은 <h1>-<h6>으로 element 를 지정하고 글의 단락은 <p></p>로 지정한다.자동으로 줄 바꿈이 되며 이것은 block level element 이기 때문에 독립적이게 취급된다.
<참조>Double side element 와 Single side elementDouble side element<p>여기처럼 처음과 끝이 쌍으로 있는 형태의 element 를 말합니다</p>Inline level element<img src=”주소표시” /> 처럼 시작과 끝이 없이 하나의 element(구성요소)만 써주는 형태의 element 를 말한다.
제 2 강 list순서형 리스트<ol><li>순서가 나타나는 리스트 입니다.</li></ol>ol : ordered list (숫자붙은 목록, li 앞에 '1.'이 붙음) li : list item (목록 항목)
비순서형 리스트<ul><li>순서가 나타나는 리스트 입니다.</li></ul>ul : unordered list (일반 목록, li 앞에 기호가 붙음) li : list item (목록 항목)
정의형 리스트 용어의 정의를 첨부해 놓은 리스트<body><p>정의형 리스트 만들기</p><dl><dt>여기에 제목이 들어갑니다.</dt><dd>여기에 내용이 들어갑니다.</dd></dl></body>.dl : definition list ('용어'와 그 '설명'으로 구성된 목록) dt : definition term (용어) dd : definition description (설명)
제 3 강 div (division:분할, 분배) 와 span elementdivdivision 의 약자로 시작태그 <div 속성=”요소”>와 종료태그 </div>로 구성태그내에 속성을 적지 않아도 시작태그와 종료태그 사이에 들어가는 내용에 따라 그 공간의 크기도 달라진다.줄바꿈태그
span시작태그 <span 속성=”요소”>와 종료태그 </span>으로 구성span태그는 연속 사용시 이웃하는 성질을 가지고 있어 글씨에 관한 style 을 적용할 때 적합한 태그이다.
width, height, background, border, padding, margin, overflow, font, color 등의 style 을 사용할 수 있다.
제 4 강 class 속성class 는 웹문서에 스타일 속성을 정의할 때 id 속성과 함께 흔히 잘 쓰인다.일종의 디자인된 옷이라고 생각하면 된다.style 영역에서 클래스 속성을 정의하고 body 에 있는 element 에서 불러서 정의되어 있는 스타일을 적용시키는 것이다.
Class 를 사용하는 방법은 style 영역이나 CSS 파일 내에서
.클래스명{스타일 속성 정의} 이렇게 클래스 스타일 속성을 정의해 놓고 body 에 가서<element 명 class=”클래스명”></element 명>식으로 활용하면 된다
제 5 강 box dimension (content, border, padding, margin)
보통 Block level 의 element 들은 그 영역을 box dimension 이라는 박스형의 영역을 가지게 된다.(혹은 Inline element 라도 display:block 으로 스타일 속성을 지정하면, box형 dimension 을 가지게 된다.)그 영역은 또 여러 영역으로 나누게 되는데 content, border, padding, margin 이다
marginmargin 이라는 스타일 속성은 테두리인 border 와 다른 element 의 box 들과의 사이의 영역을 말한다.Padding 과 마찬가지로 그 사이의 너비를 지정해 주면 되는데,Margin 은 특이한 점 하나가 있는데 만약 margin 영역을 지정해준 box element 가 역시 margin 을 지정한 또 다른 Box element 와 접해 있을 때 서로의 margin 영역이 겹쳐질 수 있다는 것이다.
<div class=box>박스에 들어가는 내용입니다</div><div class=box>박스에 들어가는 내용입니다</div>
floatblock level 의 element 는 자동으로 줄 바꿈이 된다.하지만 레이아웃을 구성할 때 block level element옆에 다른 컨텐츠들이 배치되게 하고 싶어지기도 할 것이다.block level element 의 영역을 유지하면서 옆에 자연스럽게 다른 컨텐츠들이 오게 하고 싶을 때 float 스타일 속성을 쓴다.
float 의 속성으로는 left 와 right 가 있습니다. float 해제 방법으로는..
뒤에오는 요소에 대해 clear:both;를 적용하는 방법.부모요소에 float 을 적용하는 방법부모요소에 overflow:hidden; zoom:1;(익스 6~7 에서만)을 적용하는 방법:after 속성으로 가상요소를 생성하여 clear:both 시키는 방법
<style type="text/css">body { font:13px "나눔고딕",Arial;}.box_a { float:left;width:100px; height:50px; border:1px solid #ccc; background:#FFFFCC; padding:5px 7px; margin-left:100px;} /*float 는 넓이와 높이가 반드시 정해져 있어야 합니다.*/.box_b { float:right;width:100px; height:50px; border:1px solid #ccc; background:#FFFFCC; padding:5px 7px; } /*float 는 같은 위치에서 박스 이동이 가능합니다.*/.box_c { margin:0px auto;width:100px; height:50px; border:1px solid #ccc; background:#FFFFCC; text-align:right; } /*margin:0px auto;는 박스를 무조건 가운데로 정렬합니다.*/</style>
<div class=box_a>박스에 들어가는 내용입니다</div><div class=box_b>박스에 들어가는 내용입니다 2</div><div class=box_c>박스에 들어가는 내용입니다 3</div>
position:absoluteposition 의 속성으로는 relative(상대값)와 absolute(절대값)이 있습니다. position 과 같이 쓸수있는 css 로는 위치값을 지정할수 있는 top/bottom, left/right 와 z-index(레이어 순서)가 있습니다.
position:relativeposition 의 속성으로는 relative(상대값)와 absolute(절대값)이 있습니다. position 과 같이 쓸수있는 css 로는 위치값을 지정할수 있는 top/bottom, left/right 와 z-index(레이어 순서)가 있습니다.
display:inline, display:block, display:nonedisplay 스타일 속성은 block element 를 inline element 로 또는 inline element 를 block element 로 변환시켜 준다.또한 display:none 을 지정해주면 그 element 는 화면에 출력이 되지 않는다.
<p >검색엔진 사이트 <span class="display">네이버로 연결됩니다.</span></p><div>첫번째 블럭</div><div>두번째 블럭</div>
overflowoverflow 는 block element 에 쓰이는 속성인데 레이어의 크기는 제한이 되어 있지만 들어갈 내용이 많을 때레이어의 크기 범위를 넘어가는 부분에 대한 스타일 속성을 정의해주는 것이다,overflow 에는 visible 과 hidden, scroll, auto 가 있다.
Visible : 내용이 범위를 넘어가도 그냥 보여줌Hidden : 내용이 번위를 넘어가면 넘어가는 부분은 감춤Scroll : 레이어에 스크롤바를 달아서 범위안에 내용이 모두 들어갈 수 있게 해줌Auto : 기본적으로는 scroll 방식인데 가로 세로의 스크롤바중 필요가 없는 스크롤바는 안보이게 하는 것이다.
<h1> 리버풀행 황당, 최소 1년은 잔류</h1><div><p> 국내 한 언론이 이청용(22·볼턴)이 잉글랜드 프리미어리그 리버풀로 이적할 가능성을 보도하자 이청용측은 황당하다는 반응을 보이고 있다.이청용의 에이전트인 김승태 TI 스포츠 대표는 26 일 “한마디로 황당하다. 그동안 리버풀과 (이적에 관련된)어떤 논의도 없었다”며 “볼턴이 챔피언십(2 부리그)으로 강등하지 않는 한 다음 시즌은 무조건 볼턴에서 1년을 더 뛴다”고 강조했다. </p></div>
<div><p> 국내 한 언론이 이청용(22·볼턴)이 잉글랜드 프리미어리그 리버풀로 이적할 가능성을 보도하자 이청용측은 황당하다는 반응을 보이고 있다.이청용의 에이전트인 김승태 TI 스포츠 대표는 26 일 “한마디로 황당하다. 그동안 리버풀과 (이적에 관련된)어떤 논의도 없었다”며 “볼턴이 챔피언십(2 부리그)으로 강등하지 않는 한 다음 시즌은 무조건 볼턴에서 1년을 더 뛴다”고 강조했다. </p></div>
<h1> 리버풀행 황당, 최소 1년은 잔류</h1><div><p> 국내 한 언론이 이청용(22·볼턴)이 잉글랜드 프리미어리그 리버풀로 이적할 가능성을 보도하자 이청용측은 황당하다는 반응을 보이고 있다.이청용의 에이전트인 김승태 TI 스포츠 대표는 26 일 “한마디로 황당하다. 그동안 리버풀과 (이적에 관련된)어떤 논의도 없었다”며 “볼턴이 챔피언십(2 부리그)으로 강등하지 않는 한 다음 시즌은 무조건 볼턴에서 1년을 더 뛴다”고 강조했다. </p></div>
.rankListArea_basic h3 a {position:relative;top:6px;left:0px;display:block;padding:1px 0 0 10px;font-size:13px;color:#000;letter-spacing:-1px;}.rankListArea_basic ol {background-color:#fff;margin:0 5px 5px 5px; padding:7px 0 5px 0;}.rankListArea_basic ol li {padding:3px 0 3px 24px;background-position:7px 5px;}.rankListArea_basic ol li a {color:#333;}
.rankListArea_diff h3 a {position:relative;top:9px;left:10px;_left:15px;display:block;font-size:13px;color:#000;letter-spacing:-1px;}.rankListArea_diff ol {padding: 10px;margin:0; overflow:hidden; *zoom:1;}.rankListArea_diff li {float:left;width:100%;height:16px;list-style:none;background-position:0 2px;}.rankListArea_diff li .rank {float:left;display:block;padding-left:10px;width:20px;font-size:9px;font-family:verdana;letter-spacing:-1px;}.rankListArea_diff li a {float:left;display:block;color:#333;padding-left:14px;}.rankListArea_diff li .hotall {float:right;font-size:90%;color:#666;}.rankListArea_diff li .hotwow {float:right;padding:2px 0 1px 19px;background:url(http://image.hanmail.net/hanmail/s_img/keron/i_best.gif) -1px top no-repeat;font-size:11px;color:#ff5f00;}.rankListArea_diff em {display:none;}
<!-- // list End --><br class="clb" /></div><a href="#" title="동영상 List 더보기" class="more">동영상 List 더보기</a>
</div></div>
용어사전
CSS Cascading Style Sheet 여러 단계로 구성된 폭포XHTML인터넷 표준기관인 W3C(www.w3c.org)는 XHTML 1.0 이란 새로운 표준을 내놓았습니다. 이는 웹페이지를 만드는 데 가장 많이 쓰이는 언어인 HTML 이 차세대 언어 XML 로 가기 위한 다리가 된다는 점에서 커다란 의미를 지닙니다.
XML 은 HTML 에 비해 여러가지 강점이 있습니다. 특히 XML 이 웹페이지에 담긴 내용인 `콘텐츠 정보'와 단말기 화면에 나타날 모양을 결정하는 `스타일 정보'를 분리시킬 수 있다는 점은 차세대 인터넷을 위한 결정적인 요소입니다. 핸드폰에 붙은 액정화면에서 텔레비전 화면에 이르기까지 다양한 단말장치에 비디오, 수학공식, 움직이는 2차원 글씨 등 변화무쌍한 내용을 자유롭게 보여줄 수 있기 때문입니다.
그러나 XML 이 아무리 강력하다 할지라도 현재 HTML 로 씌어있는 10억개가 넘는 웹페이지들을 하루아침에 모두 XML로 바꿀 수는 없습니다. HTML 과 XML 사이에는 적잖은 차이가 있기 때문입니다. 그렇다고 이미 축적된 방대한 HTML 문서들을 버릴 수 없다는 이유만으로 XML 로 가는 길에서 발목을 잡힐 수도 없습니다. 그래서 나오게 된 것이 XHTML입니다.
background 배경list 순서import 도입absolute 절대적인div division 경계선ol Orderd List 순서가 있는 리스트ul UnOrderd List 순서가 없는 리스트li 리스트dl Definition List 설명형 리스트dt Definition titledd