콘텐츠 패널을 이용하면 한정된 공간에 더 많은 정보를 표시할 수 있다.
관심사의 분리
콘텐츠(HTML 마크업), 프레젠테이션(CSS 규칙), 동작(자바스크립트)을 분리할 것을 권장한다.
- HTML은 콘텐츠 구조를 담당한다.
- CSS는 프레젠테이션을 담당한다
- 자바스크립트는 동작의 구현을 담당한다.
접근성
스크립트를 작성할 때는 다른 상황에서 웹 페이지를 사용하게 될 사람들에 대해서도 반드시 고려해야 한다.
- 링크인 경우에는 <a> 태그를 이용한다.
- 버튼처럼 동작해야 하는 경우에는 반드시 버튼을 사용한다.
- 방문자의 브라우저에 자바스크립트가 비활성화되어 있는 경우, <html> 태그의 class 특성에 no-js 값을 추가한다.
<!-- no-js.html -->
<!DOCTYPE html>
<html class="no-js">
<head></head>
<body>
<script src="js/no-js.js"></script>
</body>
</html>// no-js.js
/*
자바스크립트가 활성화되어 있으면 class 특성 제거
*/
var elDocument = document.documentElement;
elDocument.className = elDocument.className.replace(/(^|\s)no-js(\s|$)/, '$1');아코디언
아코디언(accordion)은 제목을 클릭하면 그 제목에 해당하는 숨겨진 콘텐츠가 확장되어 나타나는 기능이다. 다음과 같은 요소들을 가지고 있다.
- 화면에 표시될 레이블 (<button> 태그 사용)
- 콘텐츠를 가지고 있는 숨겨진 패널 (<div> 태그 사용)
탭 패널
우선 화면에 모든 탭들이 보인다. 그렇지만,
- 오직 하나의 탭만 활성화된다. (<li> 태그 사용)
- 활성화된 탭의 패널만 화면에 보여진다.
- (다른 패널들은 숨겨진다.)
- 각각의 패널은 <div> 태그를 통해 표현한다.
탭과 패널을 연결하려면,
- 탭의 링크에 href 특성 값을 지정한다.
- 패널에는 id 특성 값을 지정한다.
모달 창
모달 창(Modal Window)은 페이지의 어떤 콘텐츠보다도 ‘맨 위에’ 콘텐츠를 표시한다. 페이지가 로드되는 시점에 CSS에 의해 숨겨진다. 그런 후 자바스크립트를 이용해 해당 콘텐츠를 가져와 페이지의 맨 위에 모달 창을 만드는 <div> 콘텐츠를 삽입한다.
사진 뷰어
섬네일을 클릭하면 주요 사진이 새로운 이미지로 교체된다.
- 큰 그림을 표시할 <div> 요소를 정의
- 두번째 <div> 요소는 이미지 섬네일을 표시
썸네일을 클릭하면 이벤트 핸들러가 익명 함수를 호출하여 다음 작업을 수행한다.
- href 속성 값(큰 이미지의 경로)을 가져온다.
- 이미지를 표시할 <img> 요소를 생성한다.
- 현재 보이는 이미지를 보이지 않게 한다.
- 새로운 이미지를 <div> 요소에 추가한다.
이미지 비동기 로딩
큰 이미지는 로드 시간이 오래 걸리기 때문에 사용자가 서로 다른 이미지를 또 클릭하게 되면 다음과 같은 현상이 발생한다.
- 두 번째 이미지가 첫 번째 이미지보다 먼저 로드되어 브라우저에 표시된다.
- 두 번째 이미지는 첫 번째 이미지가 로드되면 다시 교체된다.
- 따라서 사용자는 이미지가 잘못 로드되었다고 생각할 수 있다.
해결책
- 함수 수준의 src 변수에 이미지 경로를 저장
- 전역 변수인 request 변수에 이미지 경로를 수정
- 현재 이미지가 로드되면 이벤트 핸들러를 통해 익명 함수를 호출
이미지가 로드되면 이벤트 핸들러가 (현재 이미지의 경로를 저장하고 있는) src 변수를 request 변수 값과 비교한다. 만일 사용자가 다른 이미지를 또 클릭했다면, request 변수 값이 src 변수 값과 일치하지 않게 되므로 이 이미지는 화면에 표시하지 않는다.
이미지 캐싱
사용자가 이미 선택했던 이미지를 요청하는 경우, 매번 이미지를 다시 로드하고 새로운 요소를 생성하게 된다.
해결책
- chache라는 이름의 간단한 객체를 생성
- 새로운 <img>요소를 생성하면 cache 객체에 저장