제목에서는 “관련사이트 바로가기”라고 했지만 정확히 이를 뭐라고 부르고 있는지 모르겠습니다. “백문이불여일견” !! 바로 보시는게 낫겠습니다.

관련 사이트 바로가기

이런겁니다. 콤보박스가 나오고 목록에서 항목을 선택하면 새창으로 해당 사이트가 열립니다. 코드는 아래와 같습니다.

view sourceprint?
01.<!-- 코드 #1 -->
02.<p>
03.관련 사이트 바로가기
04.<select onchange="if(this.value != '') window.open(this.value);">
05.<option value="">관련사이트 목록</option>
06.<option value="http://twitter.com/yangkun7">양군의 트위터</option>
07.<option value="http://picasaweb.google.com/yangkun7">건이네 웹앨범</option>
08.<option value="http://www.greenfarm.pe.kr/">푸른농장 (준혁,서영이네)</option>
09.</select>
10.</p>

#1. 문제점

#1. 개선

  1. SELECT 양식에 대한 LABEL 추가
  2. onchange 이벤트 제거
  3. [이동] 버튼 추가
  4. [이동] 버튼 클릭 시 해당 사이트로 이동하도록 변경.

개선된 코드는 다음과 같습니다.

view sourceprint?
01.<!-- 코드 #2 -->
02.<p>
03.<label for="relSites">관련사이트 바로가기<label>
04.<select id="relSites">
05.<option value="">관련사이트목록</option>
06.<option value="http://twitter.com/yangkun7">양군의 트위터</option>
07.<option value="http://picasaweb.google.com/yangkun7">건이네 웹앨범</option>
08.<option value="http://www.greenfarm.pe.kr/">푸른농장 (준혁,서영이네)</option>
09.</select>
10.<input type="button" value="이동" onclick="window.open(document.getElementById('relSites').value);"/>
11.</p>

#2. 문제점

여전히 문제가 남아 있습니다.

#2. 개선

  1. SELECT 양식 값을 전달할 수 있도록 FORM 삽입
  2. SELECT 양식에 name 설정
  3. SELECT 양식 값을 전달할 수 있도록 일반 버튼을 submi 버튼으로 변경
  4. 전달받은 URL로 이동할 수 있는 서버측 로직 구성

개선된 코드

view sourceprint?
01.<!-- 코드 #3 -->
02.<p>
03.<form action="redirect.php" method="post" target="_blank">
04.<label for="relSites">관련사이트 바로가기<label>
05.<select id="relSites" name="url">
06.<option value="http://twitter.com/yangkun7">양군의 트위터</option>
07.<option value="http://picasaweb.google.com/yangkun7">건이네 웹앨범</option>
08.<option value="http://www.greenfarm.pe.kr/">푸른농장 (준혁,서영이네)</option>
09.</select>
10.<input type="submit" value="이동"/>
11.</form>
12.</p>

서버측 코드

view sourceprint?
1.<?php
2.// redirect.php
3.// 필요하면 카운팅 로직 추가
4.header('Location: ' . $_POST['url']);
5.?>

개선점

#3의 코드는 그대로 완벽한 것 같지만 개선의 여지가 남아 있습니다.

  • 코드대로 실행하면 선택한 사이트가 새창으로 열리게 되는데 이에 대해 알리는 부분이 없습니다. (KWCAG 1.0 항목 2.6 반응시간의 조절기능)
  • 자바스크립트가 사용 가능한 환경에서는 굳이 서버 로직을 거치지 않고 선택한 사이트로 이동하게 하고 싶을 수도 있습니다.

최종 개선 코드

view sourceprint?
01.<!-- 코드 #4 -->
02.<script type="text/javascript">
03.function gotoUrl(id) {
04.window.open(document.getElementById(id).value);
05.return false;
06.}
07.</script>
08.<p>
09.<form action="redirect.php" method="post" target="_blank" onsubmit="return gotoUrl('relSites');">
10.<label for="relSites">관련사이트 바로가기<label>
11.<select id="relSites" name="url">
12.<option value="http://twitter.com/yangkun7">양군의 트위터</option>
13.<option value="http://picasaweb.google.com/yangkun7">건이네 웹앨범</option>
14.<option value="http://www.greenfarm.pe.kr/">푸른농장 (준혁,서영이네)</option>
15.</select>
16.<input type="image" src="btn_move.gif" alt="이동 (새창)"/>
17.</form>
18.</p>

관련 지침