꾸준2

1. transform: translate(가로값, 세로값)

1 - 가로값 세로값 만큼 해당 태그 이동

** 
display: inline-block - div태그 같은 경우 width가 100%이기 때문에 효과를 확인하기 힘들어서 inline-block 사용

transform: translate

<template>
  <div class="trade">
    <div class="item1">
      transition
    </div>
    <div class="item1">
      transition
    </div>
    <div class="item1">
      transition
    </div>
    <div class="item1">
      transition
    </div>
  </div>
</template>

<script>


export default {
  data(){
    return {
    }
  },
    methods:{

    },

  }

</script>

<style scoped>
.item1{
  border: 3px solid black;
  margin: 10px;
  width: 100px;
  height: 100px;
  display: inline-block;
  text-decoration: none;
  color: black;
}
.item1:active{
  transform: translate(20px, 20px);
  border: 3px solid red;
  color: red;
}
</style>

1. background-color: 색상
2. background-image: url('주소')
3. background-repeat: 값
4. background-size : 값
5. background-position: 값

1 - 배경색
2 - 배경 이미지
3 - 이미지 반복 방법 및 여부
4 - 배경 이미지 크기 조절
5 - 배경 이미지 위치 조절

<template>
  <div class="background">
    background
  </div>
</template>

<script>


export default {
  data(){
    return {
    }
  },
    methods:{

    },

  }

</script>

<style scoped>
 .background{
   border: 3px solid red;
   margin-top: 50px;
   font-size: 100px;
   height: 555px;
   background-color: aqua;
   background-image: url('../assets/pic2.png');
   background-repeat: no-repeat;
   background-size: contain;
 }
</style>

background-repeat

• no-repeat : 반복 X
• repeat : x,y축 모두 반복
• repeat-x : x축만 반복
• repeat-y : y축만 반복

background-position

• center: 가운데 위치
• top: 가운데 상단 위치
• bottom: 가운데 하단 위치
• left(top, center, bottom)
• right(top, center, bottom) 

background-size

• contain: 화면에 여백을 주고 원본 사진이 모두 나옴
• cover: 화면에 배경이미지가 가득 차지만 원본 사진은 어느정도 짤림

예제)

1. 

   background-repeat: no-repeat;
   background-position: center right

2.

   background-repeat: repeat-x;
   background-position: bottom;

3. 

   background-repeat: no-repeat;
   background-size: contain

4.

   background-repeat: no-repeat;
   background-size: cover

display: flex - 기본값(가로 정렬)

flex-direction: column - 세로정렬
flex-direction: row - 가로정렬
align-items: center - 가운데 정렬
flex-wrap: wrap - 태그가 범위를 벗어나면 줄바꿈 

<template>

  <div id="total">
    <div class="main">
      <router-link to="/">main</router-link>
    </div>

    <div id="memu">
      <div class="item">
        <router-link to="spanish">spanish</router-link>
      </div>
      <div class="item">
        <router-link to="weather">weather</router-link>
      </div>
      <div class="item">
        <router-link to="todo">todo</router-link>
      </div>
      <div class="item">
        <router-link to="trade">trade</router-link>
      </div>
    </div>
    <div>
      <router-view></router-view>
    </div>


  </div>

</template>

<script>


export default {
  name: 'main',

  data() {
    return {
    }
  }
}
</script>

<style scoped>
/* https://codepen.io/hexagoncircle/pen/XWbWKwL */

 #total{
   border: 3px solid black;
   display: flex;
   flex-direction: column;
   align-items: center;
   background-color: aqua;
 }
 .main{
   border: 3px solid black;
   margin-top: 100px;
 }
 #memu{
   border: 3px solid black;
   display: flex;
   flex-direction: row;
   align-items: center;
   padding-top: 50px;

 }
 .item{
   border: 3px solid red;
   margin: 10px;
   width: 100px;
   height: 100px;
   /* display: inline-block; */

 }
</style>

1. 검정색 박스는 column(세로 정렬)

2. 빨간색 박스는 row(가로 정렬)

3. 파란색 배경 가장 큰박스 기준으로 center(가운데 정렬)

static - 기본으로 정해진 위치에서 값을 변경해도 이동하지 않음(기본 값)
relative - 정해진 위치에서 입력한 값만큼 이동함
absolute - html태그를 기준으로 입력한 값만큼 위치를 이동함
fixed - 스크롤이 이동해도 정해진 위치에 고정해 이동하지 않음

- position: static를 안해도 기본값으로 position은 static이다

<template>
  <div id="main">
    main
    <div id="static">
      static
    </div>
    <div id="relative">
      relative
    </div>
    <div id="fixed">
      fixed
    </div>
  </div>
</template>

<script>

export default {

}
</script>

<style scoped>
 #main{
   border: 5px solid red;
   margin-bottom: 500px;
   padding: 50px;
 }
 #static{
   /* position: static; */
   border: 5px solid black;
   left: 1000px;
   top: 1000px;
 }
 #relative{
   /* position: relative; */
   border: 5px solid blue;
   left: 100px;
   top: 100px;
 }
 #fixed{
   /* position: fixed; */
   background-color: black;
   color: white;
   bottom: 0px;
   left: 0px;
 }
</style>

position 지정하기 전

position 지정한 후

inline - 가로 배치
block - 세로 배치

<template>
  <div>
    <h1>inline</h1><h1>inline</h1><h1>inline</h1>
    <a href="#">block</a><a href="#">block</a><a href="#">block</a>
  </div>
</template>

<script>

export default {

}
</script>

<style scoped>

  h1{
    display: inline;
    border: 3px solid black;
  }
  a{
    display: block;
    border: 3px solid red;
  }
</style>

적용 우선순위
스타일속성 > id 선택자 > class 선택자 > 태그 선택자

(예제)

// 전체코드

<template>
  <div id="a" class="b" style="color:red">
    적용 우선순위 확인
  </div>
</template>

<script>

export default {

}
</script>

<style scoped>
  .b{
    color:orange;
  }
  #a{
    color:blue;
  }
  div{
    color:green
  }
</style>

// 스타일속성

  <div id="a" class="b" style="color:red">
    적용 우선순위 확인
  </div>

  // id 선택자
  
  <div id="a" class="b">
    적용 우선순위 확인
  </div>

// class 선택자
 
  <div class="b">
    적용 우선순위 확인
  </div>

// tag 선택자

  <div>
    적용 우선순위 확인
  </div>