Page 26 -
P. 26
4.3
계산기의 UI 구성하기 4장 실습: 계산기 만들기
계산기의 UI를 만들어 보겠습니다. 계산기 UI는 제공한 예제 파일의 HTML과 CSS 코드를 가
져와 그대로 사용합니다.
4.3.1 HTML 코드 작성하기
뷰 애플리케이션을 만들 때 HTML 구조를 작성하는 작업을 가장 먼저 합니다. 뷰는 자체적으
로 템플릿 문법을 지원해서 HTML과 유사한 부분이 많습니다. 태그 속성을 제외하면 HTML
문법과 다른 점을 찾기가 어려울 정도입니다.
뷰를 처음 공부할 때는 HTML 코드를 뷰에 직접 작성하기보다 HTML 파일을 따로 만들고 뷰
로 옮기는 것이 더 편리합니다. 이때 HTML 코드는 SFC 파일의 구성 요소에서 <template> 태
그 영역에 작성합니다.
계산기 UI를 위한 HTML 코드를 작성해 보겠습니다.
1 04/calculator_html 폴더에서 index.html 파일의 코드 중 <body> 태그 안 코드를 복사
합니다. 앞에서 새로 작성한 App.vue 파일의 <template> 태그 영역에 복사한 코드를 붙여
넣습니다. <template> 태그와 호환되지 않는 문법은 사용하지 않았으니 그대로 붙여 넣어
도 괜찮습니다.
src/App.vue
<script>
export default {}
</script>
<template>
157
