Vue 6

title: 6장 스타일 적용

6장 스타일 적용

6.1 HTML의 스타일 적용

• 예시:

<style>
  .red { color: red; }
</style>
<p class="red">빨간 글씨</p>

• CSS로 스타일을 정의 style setup 안에 존재

6.2 인라인 스타일

• 예시:

<p :style="{ color: 'blue' }">파란 글씨</p>

• 태그에 직접 스타일을 적용

6.3 CSS 클래스 바인딩

6.3.1 CSS 클래스명 문자열을 바인딩하는 방법

• 예시:

<p :class="'highlight'">강조</p>
<style>
  .highlight { background: yellow; }
</style>

• 클래스명을 문자열로 바인딩

6.3.2 true/false 값을 가진 객체를 바인딩하는 방법

• 예시:

<p :class="{ active: isActive }">활성</p>
<script>
export default { 
  data() { 
    return { isActive: true }; 
  } 
}
</script>

• 조건에 따라 css 클래스를 적용 및 미적용 가능

6.4 동적 스타일 바인딩

• 예시:

<p :style="{ fontSize: size + 'px' }">크기 조절</p>
<script>
export default { 
  data() { 
    return { size: 16 }; 
  } 
}
</script>

• 변수로 스타일을 동적으로 변경

6.5 TodoList 예제

6.5.1 화면 시안 작성 & 확인

• 예시:

<div><input /><button>추가</button><ul><li>할 일</li></ul></div>

• 기본 레이아웃을 구성

6.5.2 데이터와 메서드 정의

• 예시:

<script>
export default {
  data() { 
    return { todos: [], newTodo: '' }; 
  },
  methods: { 
    addTodo() { 
      this.todos.push(this.newTodo); 
    } 
  }
}
</script>

• 데이터와 추가 메서드를 설정
• todos 리스트에 객체 추가

6.5.3 템플릿 작성

• 예시:

<div>
  <input v-model="newTodo" />
  <button @click="addTodo">추가</button>
  <ul><li v-for="todo in todos" :key="todo"></li></ul>
</div>

• 동적 리스트를 렌더링