콘텐츠 패널을 이용하면 한정된 공간에 더 많은 정보를 표시할 수 있다.

관심사의 분리

콘텐츠(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 객체에 저장