'<noscript>'에 해당되는 글 1건

  1. 2010/04/09 visualp 자바스크립트 옆에는 <noscript>를 넣자
[원문]:http://sulfur.pe.kr/web/javasc/javas004.html

<noscript> 태그는 브라우저에서 <script> 태그가 작동하지 않을 때 대신 내보낼 내용을 담기 위해 쓰인다.

즉, 방문객이 브라우저에서 자바스크립트가 실행되도록 설정해 두었다면 자바스크립트는 실행되고 <noscript> 태그 안의 내용은 나오지 않는다. 하지만 자바스크립트 기능을 꺼두고 있다면 자바스크립트가 실행되지 않는 대신에 <noscript> 태그 안의 내용이 출력된다.


<script type="text/javascript">
document.write('안녕하십니까?')
</script>
<noscript><p>자바스크립트를 꺼두셨군요.</p></noscript>

위의 예에서, 보통은 자바스크립트가 실행되기 때문에 화면에는 다음 문장이 나올 것이다.

안녕하십니까?

하지만 자바스크립트가 실행되지 않는다면 화면에는 다음 문장이 나오게 된다.

자바스크립트를 꺼두셨군요.

브라우저에서 자바스크립트 기능을 꺼두고 쓰는 사람도 있기 때문에 자바스크립트를 쓴 곳에는 <noscript> 태그를 써서 자바스크립트가 필요하다는 걸 알려주는 게 좋다.


<p><a href="#" onclick="window.open('photo.html'; return false">사진 보기</a></p>
<noscript><p>사진 보기를 하려면 자바스크립트가 필요합니다.</p></noscript>

위 예에서는 자바스크립트를 써서 사진 보기 창을 뜨도록 하고 있으므로, 자바스크립트를 꺼두면 새 창을 뜨게 할 수 없기 때문에 사진을 볼 수 없다. 만약 <noscript> 태그를 쓰지 않는다면 모르는 사람은 왜 사진 보기가 안 되는 걸까 의아해 할지도 모른다. 하지만 <noscript> 태그를 써서, 위와 같이 사진을 보기 위해서는 자바스크립트가 필요하다는 걸 알려준다면 자바스크립트 기능을 꺼두었기 때문에 사진 보기가 안 된다는 걸 알고 사진을 보기 위해 자바스크립트 기능을 켜게 될 것이다.

위 코드의 결과는 다음과 같다. 브라우저에서 자바스크립트 기능을 꺼서 어떻게 보이는지 직접 확인해 보기 바란다.

사진 보기

참고로 photo.html 파일은 만들지 않았으므로 사진 보기를 눌러도 새 창은 뜨지 않을 것이며, <noscript> 태그 안의 글씨는 현재 이곳의 CSS 설정에 따라 크기나 색깔이 다르게 보일 수도 있다.

<noscript> 태그 안의 내용은 웹 문서의 내용과는 상관 없는 것이므로 웹 문서의 내용과는 다르게 보이도록 하는 게 좋다. 예를 들어, CSS에서 설정을 다음과 같이 해 두면 <noscript> 태그 안의 글씨는 돋움 글꼴에 본문 글씨보다 작게 녹색으로 보이게 되므로 웹 문서에 쓰인 글씨가 검은 색이면 서로 구별될 것이다.


noscript { font-family: 돋움, Dotum; 
           font-size: 75%; 
           color: green; }

끝으로 한 가지 주의사항은, <noscript> 태그는 <p> 태그를 감쌀 수 있지만 그 반대는 되지 않고, <noscript> 태그 안에 들어 있는 글씨를 <p> 같은 형님 태그로 감싸주지 않으면 웹 표준 검사에서 오류가 난다는 것이다.

2010/04/09 18:58 2010/04/09 18:58
받은 트랙백이 없고, 댓글이 없습니다.

댓글+트랙백 RSS :: http://blog.visualp.com/rss/response/237

댓글+트랙백 ATOM :: http://blog.visualp.com/atom/response/237