Vue 2.x 로 전자책 리더 만들기 | 인터랙티브 UI | 반응형 디자인 | 전자책 뷰

소개

이 프로젝트에서는 Vue 2.x 를 사용하여 간단한 전자책 리더를 구축하는 방법을 배우게 됩니다. 전자책 리더는 사용자가 헤더 툴바의 가시성을 토글하고, 읽기 테마를 설정하며, 텍스트 내용의 글꼴 크기를 조정할 수 있도록 합니다.

👀 미리보기

project preview

🎯 과제

이 프로젝트에서 다음을 배우게 됩니다:

헤더 툴바의 가시성 토글 구현 방법
읽기 테마 설정 구현 방법
글꼴 크기 설정 구현 방법

🏆 성과

이 프로젝트를 완료하면 다음을 수행할 수 있습니다:

Vue.js 를 사용하여 대화형 사용자 인터페이스를 생성할 수 있습니다.
사용자 상호 작용을 처리하고 그에 따라 UI 를 업데이트할 수 있습니다.
사용자 기본 설정에 따라 동적으로 요소의 스타일을 지정할 수 있습니다.
애플리케이션이 반응형 (responsive) 이고 접근 가능 (accessible) 하도록 보장할 수 있습니다.

헤더 툴바 가시성 토글 구현

시작하려면, 다음과 같이 왼쪽에 있는 파일의 디렉토리 구조를 살펴보세요:

├── index.html
├── css
└── js
    └── vue.js

여기서:

index.html은 메인 페이지이며, 다음에 수정해야 할 파일입니다.
css는 스타일 파일 폴더입니다.
js/vue.js는 Vue 2.x 파일입니다.

다음으로, index.html 파일에서 모든 작업을 수행합니다.

이 단계에서는 헤더 툴바의 가시성 토글을 구현하는 방법을 배우게 됩니다. 이 단계를 완료하려면 아래 단계를 따르세요:

index.html 파일을 열고, el: "#app" 아래의 data 에서 isShowTools 변수를 정의하여 헤더 툴바의 표시 여부를 제어합니다. 기본값은 true로 설정하여 헤더 툴바를 표시합니다.

data: {
  isShowTools: true,
  // ...
}

<div class="header"> 요소를 포함하는 헤더 툴바 콘텐츠를 v-if 디렉티브를 사용하여 <transition> 요소로 감싸고, 이를 isShowTools 데이터 속성에 바인딩합니다. 이렇게 하면 isShowTools가 true일 때만 헤더 툴바가 표시됩니다.

<transition v-if="isShowTools" name="fade">
  <div class="header">
    <!-- header toolbar content -->
  </div>
</transition>

index.html 파일에서 클래스가 iconfont icon-setting인 <a> 요소를 찾습니다. 이 요소는 헤더 툴바의 가시성을 토글하는 데 사용됩니다.
<a> 요소에 @click 디렉티브를 추가하고, 이를 Vue 인스턴스의 showTools 메서드에 바인딩합니다. 이 메서드는 헤더 툴바의 가시성을 제어하는 isShowTools 데이터 속성을 토글합니다.

<a @click="showTools" class="iconfont icon-setting"></a>

Vue 인스턴스에서 showTools 메서드를 methods 객체에 추가합니다. 이 메서드는 isShowTools 데이터 속성의 값을 토글해야 합니다.

methods: {
  showTools() {
    this.isShowTools = !this.isShowTools;
  },
}

헤더 툴바에 close 아이콘을 추가하고, @click 디렉티브를 showTools 메서드에 바인딩하여 사용자가 헤더 툴바를 닫을 수 있도록 합니다.

<li class="container">
  <a @click="showTools" class="iconfont icon-close"></a>
</li>

읽기 테마 설정 구현

이 단계에서는 읽기 테마 설정을 구현하는 방법을 배우게 됩니다. 이 단계를 완료하려면 아래 단계를 따르세요:

el: "#app" 아래의 data 에서 isActiveColor 변수를 정의하고 기본값을 0으로 설정합니다. 즉, 기본 배경색은 첫 번째로 선택된 색상입니다. index.html 파일에서 <div class="right" id="setBG"> 요소를 찾습니다. 이곳은 읽기 테마의 원형 색상 블록이 표시될 위치입니다.

data: {
  isActiveColor: 0,
  // ...
}

bgList 데이터 속성을 반복하기 위해 v-for 디렉티브를 사용합니다. bgList는 테마 색상 목록을 포함합니다. 각 색상에 대해, 현재 인수를 인수로 전달하는 changeColor 메서드를 호출하는 @click 디렉티브가 있는 <a> 요소를 생성합니다.

<div class="right" id="setBG">
  <a
    @click="changeColor(index)"
    v-for="(item,index) in bgList"
    :style="{'background-color':item}"
    :class="{'iconfont':true,'icon-selected':index==isActiveColor}"
  ></a>
</div>

Vue 인스턴스에서 changeColor 메서드를 methods 객체에 추가합니다. 이 메서드는 선택된 색상 블록의 인덱스로 isActiveColor 데이터 속성을 업데이트해야 합니다.

methods: {
  changeColor(value) {
    this.isActiveColor = value;
  },
}

클래스가 text-content인 <p> 요소에서 :style 디렉티브를 사용하여 선택된 테마 색상에 따라 배경색과 글꼴 색상을 동적으로 설정합니다.

<p
  class="text-content"
  :style="{
    'background-color': `${bgList[isActiveColor]}`,
    'color': isActiveColor === 4 ? '#ffffff' : '#333333'
  }"
>
  <!-- content -->
</p>

글자 크기 설정 구현

이 단계에서는 글꼴 크기 설정을 구현하는 방법을 배우게 됩니다. 이 단계를 완료하려면 아래 단계를 따르세요:

el: "#app" 아래의 data 에서 "fontSize" 변수를 정의하고 기본값을 "18"로 설정합니다. index.html 파일에서 <div class="set-font"> 요소를 찾습니다. 이곳은 글꼴 크기 컨트롤이 표시될 위치입니다.

data: {
  fontSize: 18,
  // ...
}

<span class="lang">18</span>을 찾고 18 을 fontSize 변수로 변경합니다.

<span class="lang">{{ fontSize }}</span>

"A-" 및 "A+" 버튼에 @click 디렉티브를 추가하고, 이를 Vue 인스턴스의 updateFontSize 메서드에 바인딩합니다. 글꼴 크기를 증가시킬지 감소시킬지를 나타내는 부울 값을 전달합니다.

<a @click="updateFontSize(false)" class="prev">A-</a>
<a @click="updateFontSize(true)" class="next">A+</a>

Vue 인스턴스에서 updateFontSize 메서드를 methods 객체에 추가합니다. 이 메서드는 fontSize 데이터 속성을 업데이트하여 글꼴 크기가 12px 에서 48px 사이의 범위 내에 있도록 해야 합니다.

methods: {
  updateFontSize(flag) {
    if (flag) {
      if (this.fontSize < 48) {
        this.fontSize += 2;
      }
    } else {
      if (this.fontSize > 12) {
        this.fontSize -= 2;
      }
    }
  }
}

클래스가 text-content인 <p> 요소에서 :style 디렉티브를 사용하여 fontSize 데이터 속성을 기반으로 글꼴 크기와 줄 간격을 동적으로 설정합니다.

<p
  class="text-content"
  :style="{
    'background-color': `${bgList[isActiveColor]}`,
    'color': isActiveColor === 4 ? '#ffffff' : '#333333',
    'font-size': `${fontSize}px`,
    'line-height': `${fontSize + 10}px`
  }"
>
  <!-- content -->
</p>

이러한 단계를 따르면 헤더 툴바 가시성 토글, 읽기 테마 설정, 글꼴 크기 설정을 포함한 전자책 리더 기능 구현을 완료했습니다.

다음으로, WebIDE 의 오른쪽 하단 모서리에 있는 Go Live 버튼을 클릭하여 프로젝트를 실행합니다. VM 상단의 "Web 8080"을 열고 수동으로 새로 고치면 페이지가 표시됩니다.

Image Description