자바스크립트를 사용하는 방법중 비교적 사용빈도가 높은것이 window의 메소드인 popup을 이용해 팝업창을 만드는 것입니다.

그럼 먼저 window의 메소드인 popup의 사용법부터 보겠습니다.

window.open(strUrl,strWindowName,strWindowFeatures);

  strUrl : 읽어들일 url을 지정하는 곳입니다.

  strWindowName : 팝업의 이름을 지정하는 곳입니다.
    - 윈도우 또는 프레임 이름
    - _blank : 이름이 없는 새로운 윈도우를 연다.
    - _parent : 현재 문서의 parent 윈도우에 문서를 연다.
    - _self : 현재 문서에 새로운 문서를 연다.
    - _top : 원래 문서가 프레임에 있을 경우 최상위에 있는 프레임에 새로운 문서를 연다.

  strWindowFeatures
    - width : 팝업 윈도우의 넓이를 지정하는곳 입니다.
    - height : 팝업 윈도우의 높이를 지정하는곳 입니다,
    - top : 화면의 상단으로 부터의 팝업 윈도우의 위치를 지정하는곳 입니다.
    - left : 화면의 좌측으로 부터의 팝업 윈도우의 위치를 지정하는곳 입니다.
    - titlebar : 팝업윈도우의 제목 막대를 보일 것인가를 지정하는곳 입니다.
    - menubar : 메뉴막대를 보일것인가를 지정하는 곳입니다.
    - toolbar : 브라우저의 도구막대를 보일것인가를 지정하는 곳입니다.
    - location : locationbar를 보일 것인가를 지정하는 곳입니다.
    - status : 팝업윈도우에 상태바를 보일 것인가를 지정하는 곳입니다.
    - scrollbars : 팝업윈도우에 수직, 수평 스크롤 막대를 보일 것인가를 지정하는 곳입니다.
    - resizable : 팝업윈도우의 크기를 변경할 수 있는가를 지정하는 곳입니다.

사용자 삽입 이미지

window.open 메소드의 속성중 Features내용


접근성을 고려한 방법

<script type="text/javascript">
  function PopupOpen(strUrl,strWindowName,strWidth,strHeight) {
    var strWindowFeatures = "width="+strWidth+",height="+strHeight;
    var strWindowPopup = window.open(strUrl,strWindowName,strWindowFeatures);
  }
</script>

<a href="팝업으로 띄울 url" onclick="PopupOpen(this.href,'팝업의 이름',팝업의 넓이,팝업의 높이);return false;">링크 이름</a>

ex)
  <a href="http://cleanup.tistory.com/" onclick="PopupOpen(this.href,'cleanup',400,300);return false;">아스피린 세상</a>

신고
Posted by 아스피린

드림위버로 마크업을 할때 html파일을 만들게 되면 맨 위부분에 <!DOCTYPE HTML.. 로 시작하는 문구를 본적이 있을 것입니다.

예전에 작업할때는 이부분을 빼버리고 작업을 하거나 적어 놓더라도 무슨 의미인지 몰랐던 사람들이 대부분 이였을 것입니다.

하지만 이부분은 브라우저에게 자신이 마크업한 문서가 html 4.01의 Strict 인지 아니면 xhtml 1.0 Transitional 인지를 정확하게 가르쳐 주는 부분으로 중요한 부분이라고 할 수 있고 반드시 문서의 맨위에 삽입되어야 하는 부분입니다. 가끔 프로그래머들이 정의해준 문서형 정의 위부분에 자신들의 코드를 삽입하는 경우가 흔하게 있는데.. 이때는 여러분이 그러면 안된다고 꼭 가르쳐 주세요.. 프로그래머들도 일부러 그러는게 아니고 문서형의 중요성을 몰라서 그러는거니까요.

html이나 xhtml에 따라 버전별로 문서형(DTD::Document Type Definition)이 존재하고, 문서형의 종류에 따라 태그와 속성, 속성값등을 지정할수 있는지 정의하는 부분이기 때문이다.

문서형의 종류에는

HTML 4.01 Strict DTD
  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional DTD
  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset DTD
  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
  "http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0 Strict DTD
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Transitional DTD
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.1 DTD
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

XHTML Mobile 1.0
  <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN"
  "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

신고
Posted by 아스피린

평소 친하게 지내던  후니넷의 운영자이신 훈님께서 "웹표준 교과서" 보내 주셨네요... ㅋㅋ 안그래도 책값이 만만찮았는데 만빵 고마워서...

사용자 삽입 이미지

전에 훈님께서 감수하시던거 갈취해서 조금 읽어 보았는데.. 내용이 정말 좋더군요.. 감히 우리나라에서 나온 웹표준 관련 책중에서 정말 교과서라고 할 정도 감동이였습니다.

저도 웹표준을 공부하고 작업한지 꽤 되었다고 생각했는데 이책을 보면서 미쳐 몰랐던 부분이 있을줄이야... 이제 책도 받았으니 보내주신분 생각해서 열심히 공부해야겠네요..

이제 좋은 책들도 많이 나오는걸 보니 우리나라의 모든 웹사이트들이 웹표준은 물론이고 웹접근성이 항상 되는것은 시간문제겠는데요..

여러분도 책값 비싸다 생각하지 마시고 꼭 한번 서점에 가서 조금만 탐닉해보세요.. 정말이지 지갑이 열리는건...


인터파크, 알라딘, YES24, 리브로

신고
Posted by 아스피린

전자신문에 공공기관 홈페이지 2009년 까지 모두 표준화 라는 기사가 나왔네요..

하여간.. 2009년까지 전국의 모든 공공기관 홈페이지를 표준화 한다는 계획을 발표 했네요... 이거 정말 웹표준을 추구하는 웹퍼블리셔로써 정말 환영할 만한 뉴스였습니다.

기사내용에 "행자부는 오는 10월 각종 호환성 문제 해결을 담은 공공기관 홈페이지 표준화안 ‘행정기관 웹표준’(가칭)을 공개하고 우선 올 연말 국민참여포털부터 시범 적용할 계획이다."
라는 내용이 있던데.. 이 내용이 책상에서 앉아서 정책만 만들어내는 탁상공론에서 나온 정책이 아니였으면 합니다.


기사를 읽으면서 갑자기 저 정책이 과연 가능할까 하는 생각이 드는 것은 왜 일까요..


첫번째 보완점 :

  지금 현실에서도 웹표준과 관련된 웹퍼블리셔나 UI개발자를 찾기 힘들어 몇개월째 구인 공고를 내놓은 웹에이전시가 많은 마당에 그 많은 공공기관의 홈페이지를 웹표준화 할수 있을까 하는 의문입니다.

  가이드 물론 중요 합니다. 하지만 가이드만 있으면 가능하다는 생각뿐 아니라. 웹표준과 관련된 웹퍼블리셔의 인재양성에 관한 계획도 있으면 합니다.


두번째 보완점 :

  기사 내용에 "△장애인 접근성 개선"이라는 내용과 같이 웹접근성에 대한 이야기도 있기는 한데 대부분이 플랫폼이나 브라우저에 관계없이 이용하고 액티브X를 해결하는등.. 대부분이  웹표준인 크로스 브라우징에 대한 내용으로 채워져 있는 것 같더라구요...

  가이드를 만드실때.. 크로스 브라우징뿐만 아니라 웹접근성 향상을 위한 부분도 추가해서 작업해 주시면 좋겠네요.. 웹접근성은 장애인등 사회적 약자만을 위한 것이 아니기 때문입니다.

  예를 들어 육교를 만들때 육교를 이용할수 있는 계단만 놓는 것이 아닌 약간의 경사가 있는 길이나 엘레베이터를 놓으면 장애인, 노인, 어린이 뿐만 아니라 무거운 짐을 옮기는 사람이나 자전거를 타고 다니는 사람들까지도 편하게 이용할 수 있습니다. 같은 이유에서 웹페이지를 만들때 웹접근성을 향상시키는 것은 모든 사람이 이용할수 있다는 점에서 중요하다고 생각하기 때문입니다.


"공공기관 홈페이지 2009년 까지 모두 표준화" 라는 좋은 정책이 중간에 암초에 부딪치지 않았으면 하는 마음에 몇글자 적어보았습니다.

신고
Posted by 아스피린

서울에 올라온지 이제 2년이 다되어 가도록 못갔던 가족 나들이를 선유도로 가보았다...

서울이 삭막해 보였는데... 선유도에 가보니 꼭 그런것만은 아닌것 같았다.. 무지 덥기는 했지만 일상속에서 탈출해 자연을 느끼기에는 좋은 장소였다.

사용자 삽입 이미지

선유도

신고
Posted by 아스피린

웹접근성은 우리모두를 네티즌으로 만드는 지름길이다. by 아스피린

공지사항

카테고리

분류 전체보기 (16)
일상의 만남 (2)
일상의 장소 (1)
웹표준/IT 뉴스 (7)
스터디 마크업 (2)
마크업 Tip (4)
촛불 (0)
Total : 98,743
Today : 0 Yesterday : 2