Page 28 -

4.3.2 CSS 코드 작성하기

앞에서 만든 계산기 UI는 아직 CSS가 작성되지 않아서 외관이 밋밋합니다. 더 완성도 있는 UI
를 보여주기 위해 CSS 코드를 작성해 보겠습니다.

1 calculator_html/style.css 파일의 코드 전체를 복사해 App.vue 파일의 구성 요소 중
<style> 태그 안에 붙여 넣습니다. 여기서는 <style> 태그 안에 CSS 코드를 작성하는 내부

스타일 방법을 사용합니다. 3장에서 HTML 문서에 CSS를 적용하는 방법을 뷰에서도 사용
할 수 있다고 배웠습니다. 문법도 거의 같아서 문제가 발생하지 않습니다. 4장 실습: 계산기 만들기

src/App.vue
<script>
export default {}
</script>
<template>
<div class="calculator">
(중략)
</div>
</template>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
(중략)
그림 4-9 실행결과
.calculator form .result {
grid-column: span 2;
}
</style>

2 코드를 저장한 후 웹 브라우저를 새로고침하면
CSS가 적용된 계산기 UI가 화면에 보입니다.

159