양쪽에 텍스트와 가운데 라인있는 컴포넌트 만들기

양쪽에 텍스트, 가운데 라인있는 컴포넌트 제작

이름 --------- 테스트 이런 모양의 컴포넌트가 필요했다.

Source

<template lang="pug">
.linked-label
  label {{label}}
  .line
  .value(v-html="value")
</template>

<script lang="ts">
export default class LinkedLabel extends Vue {
  @Prop() label!: string | number
  @Prop() value!: string | number
}
</script>

<style lang="stylus" type="text/stylus" scoped>
.linked-label
  display:grid
  grid-template-columns: auto 1fr auto
  height: 35px
  > *
    align-self: center
  label
    font-size: 15px
    color: gray
  .value
    font-size: 15px
    color: black
  .line
    margin: 8px
 height: 8px
    border: 1px dashed skyblue
</style>

How to use

linked-label(
  label="이름"
  value="테스트"
)

정리

• 나는 스타일을 정의할 때, display나 position 속성같은 구조를 잡는 속성부터 먼저 정의한 다음, 그 후에 margin이나 padding, 그리고 마지막에 부가적인 color나 font-size등을 정의한다.
• 예전에는 컴포넌트를 정의한다고 해도 많이 사용하는 것, 쉬운 것들만 정의하는 버릇?이 있었다. 그러나 지금은 하나라도 중복되는 것이 있으면 컴포넌트를 정의하려고 노력하는 중이다. 지금은 시간낭비인 것 같지만 나중에는 생산성이 더 높아지는 것 같다!