웹표준화 썸네일형 리스트형 구문표현 엘리먼트_문구 엘리먼트 cite : 인용문이나 참조한 문서의 출력 dfn : 용어 묶음에 대한 정의 code : 컴퓨터 프로그래밍 코드, 코드 예제를 표시하기위해 사용 samp : 프로그램이나 스크립트의 결과 샘플 var : 프로그램의 변수(variable)나 인수(argument) kbd : 사용자가 입력할 텍스트를 알려주기 위한 태그 abbr : 약자 ex)WWW, HTTP, URL, Mass acronym : 두문자어 ex)WAC, rader 더보기 구문표현 엘리먼트_strong과 em이 b와 i보다 나은 이유 문서모양을 위한 명령을 사용하는 대신 의미와 구조를 전달하는 목적때문 : emphasis 강조 : strong emphasis 강한강조 문구 엘리먼트가 표시되는 모양은 사용자 에이전트에 따라 다르다. 시각적 사용자 에이전트는 일반적으로 em 텍스트를 이탤릭체로표시하고 strong 텍스트를 굵은체로 표시한다. 음성합성기 사용자 에이전트는 볼륨, 높이, 속도, 둥의 음성합성 파라메터를 다르게 적용한다. 더보기 form_fildset 속성 폼안의 여러요소들을 그룹핑한다. legend 태그를 같이 사용하여 그룹핑한 요소들 주변에 테두리를 줄수 있다. ----------------------------------------------------------- 이름 이름: 이름 이름: ----------------------------------------------------------- 더보기 form_accesskey 속성 사용자가 해당 키를 누르면 해당 레이블과 연결된 필드로 포커스를 이동 시킨다 ----------------------------------------------------------- 이름: 이름: ----------------------------------------------------------- ctrl+9 를 누르면 필드로 이동 더보기 form_tabindex 속성 tabundex를 추가하고 숫자 값을 지정하면 사용자가 탭 키를 이용해 컨트롤을 이동할 수 있다. 탭 키를 칠때 마다 지정한 순서대로 다음 폼 컨트롤로 포커스가 이동하게 된다. 기본적으로 모든 컨트롤은 탭 순서를 가지고 있지만 tabindex를 쓰개되면 웹브라우저가 그 순서를 지정하지않고 우리가 지정한 순서대로 움직인다. 웹브라우징 시 양손을 사용할 수 없는 사용자들에게 도움이된다. ----------------------------------------------------------- 이름: 이름: ----------------------------------------------------------- 더보기 form_정의리스트활용 dl:definition list dt:definition term dd:definition description ----------------------------------------------------------- 이름: 이름: ----------------------------------------------------------- dd태그는 기본적으로 들여쓰기 한다. 더보기 form_<lavel>속성 ------------------------------------------- 이름: ------------------------------------------- 레이블/ID 관계을 사용하면 레이아웃 내의 위체에 관계없이 스크린 리더 프로그램이 각 폼 컨트롤에 해당하는 레이블을 올바로 읽어 준다. 폼의 레이블을 마크업하기 위한 목적으로 만든것이기에 이 태그를 활용하는 것은 의미를 부여함과 동시에 폼의 구조를 잡게되는것이다. 라디오버튼이나 체크박스의 경우 lavel내의 텍스트를 사용자가 클릭할때 컨트롤의 선택을 토글해준다. 따라서 컨트롤의 클릭할 수 있는 영역이 넓어져서 사용자가 좀더 쉽게 폼의 값을 지정할 수 있게된다. 더보기 인용문_짧은 인용문이나 문장 중간에 나오는 인용문의 처리 태그를 사용한다. 단 안되는 브라우져도 있다. 해당 언어 선택을 해줄 수 있으며 겹쳐 쓰기도 할수 있다. 겹쳐쓰면 작은 큰따옴표와 작은 따옴표가가 구분이 된다. ------------------------------------------------------------------------ 장군님이 네이놈하니 모두 도망치며 걸음아 날 살려라 ------------------------------------------------------------------------ 더보기 인용문_cite 속성 인용문의 원본 출처를 명기할 수 있다. -------------------------------------------------- "내 죽음을 아무에게도 알리지마라" — 이순신 -------------------------------------------------- 더보기 인용문_<blockquote>속성 사용 -------------------------------------------------- "내 죽음을 아무에게도 알리지마라" — 이순신 -------------------------------------------------- blockquote은 인용문 사용을 목적으로 W3C에서 고안한 태그이며, 내용의 의미와 구조를 모두 살릴 수 있다. css를 사용하지 않더라도 모든 브라우져에서 다른 일반 텍스트와 구분할 수 있는 충분한 근거가 된다. 더보기 테이블_<thead><tfoot><tbody> 테이블의 행은 테이블 헤더, 테이블 푸터, 테이블 본문으로 구성되며 이때 각각 thead, tfoot, tbody 태그를 사용한다. 이런 구문을 통해 웹 브라우져는 테이블 헤드와 풋과는 관계없이 테이블 본문만을 스크롤 하는 기능을 지원할 수 있다. 내용이 긴 테이블을 인쇄할 경우 각 페이지마다 헤더와 푸터 정보가 반복 인쇄된다. tbody 섹션만 독립적으로 스크롤링할 수 있는 기능을 제공하는 프로그램에서 활용할 수 있다. 테이블의 내용이 길 경우에 유용하다. thead, tfoot은 tbody보다 반드시 먼저나와 웹 브라우져나 기기들이 이 내용을 먼저 읽을 수 있게 해야한다. ------------------------------------------- ---테이블 헤더 내용--- ---테이블 푸터 내용.. 더보기 테이블_abbr속성 육식동물 음성변환기에서 "육식"이라고 짧게 읽어준다 더보기 테이블_헤더와 데이터 정보간의 관계 맺어주기 ------------------------------------------------------------------ 동물 종류 사는곳 사자 육식동물 초원지대 ------------------------------------------------------------------ 적용시 스크린리더는 "동물:사자, 종류:욱식동물, 사는곳:초원지대" 이런식으로 읽어 내려간다. 더보기 테이블 을 사용하여 좀 더 의미에 맞게 한다. 사용된 데이터에 대한 설명을 빠르게 전달한다. summury 속성을 사용하여 좀 더 자세하게 데이블의 목적과 내용을 설명한다. (장애인에게 도움) 의 장점 굵은 글꼴로 표시해준다 에 담긴 테이블 데이터들과 구분할 수 있다. 청각적 브라우져 사용에 용이하다. 헤더 칸과 일반 칸을 다른게 보이게 하기 위해 별도의 마크업을 할 필요가 없다 헤더와 데이터를 쉽게 구분해 볼수 있다. 스타일 적용이 용이하다. 더보기 머릿글_문서제목 마크업 방법 ~ 태그를 써라 각각에 스타일을 주면서 사용한다. 더보기 머릿글_블릿 감추기 ul {list-style:none; padding-left:0;} 블릿의 위치는 브라우져마다 조금씩 표현 방식이 틀리다. 다음과 같이 하면 브라우져마다 같은 형태를 보여준다. ul {list-style-image: none;} li {background: url(li_bull.guf) no-repeat 0 50%; padding-left: 17px;} 더보기 웹표준의 장점 마크업 용량이 줄어든다. 코드량이 줄어든다는것은 페이지 로딩 시간이 빨라진다는 것을 의미합니다. 또 서버가 성능을 더 발휘할 수 있게 되므로 서버공간이나 처리능력에 들어가는 비용을 줄일 수 있습니다. 컨텐트와 문서모양을 분리할 수 있다. css를 사용해 사이트를 디자인할 수 있으므로 디자인수정이나 리뉴얼을 쉽게 할 수 있습니다. 스차일 시트 내용만 수정하면 사이트 전체에 디자인 수정사항이 그 즉시 반영됩니다. 웹 접근성이 높아진다. 최대한 많은 웹 브라우져와 장치에서 읽을 수 있습니다. 대부분의 브라우져, 휴대폰, PDA, 장애인 지원용 스프트웨어 에서도 컨텐츠를 쉽게 읽을 수 있습니다. 향후 호환성을 보장받는다. 웹 표준으로 페이지를 작성하게되면 향후에도 그 문서를 확실히 읽을 수 있습니다. 더보기 이전 1 2 다음