Web 100

[웹접근성] 사용자가 반복적인 링크를 무시할 수 있는 방법을 제공하십시오.

탐색 링크가 반복되는 경우 사용자가 반복적인 링크를 무시할 수 있는 방법을 제공하십시오. 종종, 웹 방문자가 HTML 문서에서 만나게 되는 첫 항목은 네비게이션 바 입니다. 이것은 일반적으로 시력 손상을 당했거나 화면낭독기(Screen Reader)에 의존해야만 하는 사람들이 페이지에 접근할 때마다 동일한 링크를 반복하여 읽어주는 소리를 듣게 된다는 것을 의미합니다. 하지만, 링크가 논리적인 그룹으로 묶여 있다면, 그들은 개개의 링크 대신에 하나의 단위로 처리하게 됩니다.그룹 앞에 스킵오버(skip over) 링크를 놓아두면 화면낭독기(Screen Reader) 사용자들이 링크의 묶음을 우회하고 주요 내용이 시작하는 위치에서 페이지 접근을 시작하도록 합니다. WAI(Web Accessibility Ini..

Web 2017.12.14

iframe 배경 투명하게 만들기&불투명도 조절tip

아이프레임을 사용하실때 배경이 불투명하여(흰색) 꾸미기가 난감하셨죠? 아래 방법을 이용하시면 아이프레임이 투명해져서 감쪽같아집니다! 1. 아이프레임으로 불러올 문서의 스타일을 아래와 같이 지정해줍니다. 2. iframe을 불러들일때 아래 속성을 첨부해줍니다. [불투명도 조절 tip] 1. iframe 소스에 아래 문구를 추가해 줍니다. style="filter: Alpha(Opacity=35);" 2. Opacity=35 의 숫자는 불투명도 조절이므로 알아서 적당한 숫자를 넣어주세요. 참고사이트 http://flashcafe.org/?mid=html_study&page=6&listStyle=webzine&document_srl=6765 http://blog.daum.net/_blog/BlogView.do..

Web 2017.12.11

onClick 이벤트 사용시 아이폰 문제

iPhone에서 onClick 이벤트가 동작하지 않는 경우가 종종 있습니다. 이는 html 엘리먼트에 cursor 속성이 없기때문이다. 아이폰에서는 click 이벤트가 동작하지 않습니다. 혹자는 touchstart 이벤트를 걸어서 사용하면 된다고 하는데 touchstart는 말 그대로 터치를 시작하는 순간에 발생하는 이벤트라 스크롤이 필요한 곳에서 사용하는 경우 오동작을 초래 합니다. 아래와 같이 anchor 속성이 아닌 태그에 click이벤트를 거는 경우 반드시 아래와 같이 cursor 속성을 강제로 지정해주어야 합니다. 기존 : 변경 : 참고자료 http://jsp-making.tistory.com/64 http://qnibus.com/blog/useful-things-for-mobile-web-de..

Web 2017.12.10

doctype 정의에 따른 스크롤바 스타일

DTD 설정을 하게 되면 브라우저가 표준 모드로 렌더링하게 되므로 Scroll Bar 속성을 body{}에 주면 안되고 html{}에 주어야 한다. [ 샘플 1 ] doctype 미적용된 문서에서 body 에 스크롤바 적용된 경우 http://www.happyjung.com [ 샘플 2 ] doctype 적용된 문서에서 body 에 스크롤바 적용된 경우 http://www.happyjung.com [ 샘플 3 ] doctype 적용된 문서에 html 에 스크롤바 적용된 경우 http://www.happyjung.com

Web 2017.12.08

인쇄시 다음 페이지로 넘길 수 있는 page-break-before 속성

page-break-before 속성은 프린터로 출력할 때 다음 페이지로 페이지를 넘기는 것을 지정하는 Property입니다. block-level element 사이를 경계로 페이지를 나누기 때문에 반드시 block-level element에 지정해 주어야 합니다. P, DIV와 같은 block-level element가 아닌 요소에 적용하면 다음 페이지로 넘어가지 않습니다. page-break-before 속성 auto : 기본값 always : 항상 페이지 넘김 avoid : 페이지 넘김을 하지 못하게 강제 left : 제본을 위한 값이라고 하나 always와 차이점을 발견하기 힘듭니다. right : 제본을 위한 값이라고 하나 always와 차이점을 발견하기 힘듭니다. 올바른 사용예가나다라마바사A..

Web 2017.12.06

[XML] 특수문자 표시

HTML 특수문자코드표표현문자숫자표현문자표현설명-�--사용하지 않음space -수평탭space -줄 삽입- --사용하지 않음space -여백!!-느낌표"""따옴표##-숫자기호$$-달러%%-백분율 기호&&&Ampersand''-작은 따옴표((-왼쪽 괄호))-오른쪽 괄호**-아스트릭++-더하기 기호,,-쉼표---Hyphen..-마침표//-Solidus (slash)0 - 90-9-0부터 9까지::-콜론;;-세미콜론>>보다 큰??-물음표@@-Commercial atA - ZA-Z-A부터 Z까지[[-왼쪽 대괄호\\-역슬래쉬]]-오른쪽 대괄호^^-탈자부호__-수평선``-Acute accenta - za-z-a부터 z까지{{-왼쪽 중괄호||-수직선}}-오른쪽 중괄호~~-꼬리표..

Web 2017.12.05

IP로 국가 판별하기

IP로 국가를 판단이 필요하다면 아래사이트에서 데이터를 받아서 판단하는 것이 가능합니다. http://www.ip2nation.com/ http://www.maxmind.com/app/geoip_country http://www.ip2location.com/ 또는 각 지역 대표 기관에서 ftp 로 자료를 제공하므로 아래의 FTP 에서 ascii 파일을 마이닝하여 사용할 수 있습니다. ftp://ftp.afrinic.net/pub/stats/afrinic/delegated-afrinic-latest ftp://ftp.apnic.net/pub/stats/apnic/delegated-apnic-latest ftp://ftp.arin.net/pub/stats/arin/delegated-arin-latest ft..

Web 2017.12.01

형광펜 효과 - Highlighters

형광펜을 영어로 하일라이터(Highlighter) 라고 하는데요, 웹페이지에 형광펜 효과를 내는 CSS입니다. 형광펜 예제 코드 아파트에는 인적이 없었지만 어떤 아파트의 입구 앞에서 대여섯 명의 주부들이 모여 한 곳을 바라보고 있었다. 나도 고개를 들어 보니, 아파트 바로 맞은편의 언덕에서 불이 나고 있었다. 70도에 가까운 가파른 경사면의 높은 곳에서 연기가 피어오르고 있었다. 사람이 가까스로 올라갈 수 있을까 말까 한, 경사의 언덕에서 모닥불 크기의 불이 나고 있었다. 그것을 보는 주부들은 발을 동동 구르고 있었다. 브라우저 출력 결과 아파트에는 인적이 없었지만 어떤 아파트의 입구 앞에서 대여섯 명의 주부들이 모여 한 곳을 바라보고 있었다. 나도 고개를 들어 보니, 아파트 바로 맞은편의 언덕에서 불이..

Web 2017.11.29