개발야 기하하자

text-decoration 은 선으로 텍스트를 꾸미게 해주는 속성입니다 !

• none : 선을 만들지 않습니다.
• line-through : 글자 중간에 선을 만듭니다.
• overline : 글자 위에 선을 만듭니다.
• underline : 글자 아래에 선을 만듭니다.
• initial : 기본값으로 설정합니다.
• inherit : 부모 요소의 속성값을 상속받습니다.

https://tobiasahlin.com/blog/

정말 편하다.

나도 내 코드에 이렇게 복붙한 뒤 

.spinner {
    width: 40px;
    height: 40px;
    background-color: #3f51b5;
  
    margin: 30px auto;
    -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
    animation: sk-rotateplane 1.2s infinite ease-in-out;
  }
  
  @-webkit-keyframes sk-rotateplane {
    0% { -webkit-transform: perspective(120px) }
    50% { -webkit-transform: perspective(120px) rotateY(180deg) }
    100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
  }
  
  @keyframes sk-rotateplane {
    0% { 
      transform: perspective(120px) rotateX(0deg) rotateY(0deg);
      -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) 
    } 50% { 
      transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
      -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) 
    } 100% { 
      transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
      -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    }
  }

<div class="spinner" />

이렇게 선언만 해주면

애니메이션이 작동한다 

&. 속성은 같은태그에 몇가지 부분만 다르다면 &. 속성으로 나누어 스타일을 주는겁니다. 

예제를 보시죠 

예를 들어 test라는 스타일에 one은 margin-top을 30px를 주고 싶고 two는 margin-top: 50px 를 주고싶다면

&.로 나누어 js에서 스타일을 줄 때  

이렇게 주면 둘 다 width:100%, height:100% 가 적용되고 one 은 margin-top: 30px, two는 margin-top:50px 따로 따로 적용됩니다.

:: 속성 

예를 들어 input 속성인 placeholder 를 바꾸고 싶다고 한다면

input::placeholder 를 이용하여 placeholder의 스타일을 바꿀 수 있습니다.

이렇게 placeholder의 스타일을 주면 됩니다. 오늘의 공부 끝~~!

내용 가로 정렬 - text-align: center;

내용 세로 정렬 - vertical-align: middle

가로 중앙 정렬 : margin 0 auto; , width: 100% (width는 꼭 지정해줘야함)

이외 여러가지 방법이 있습니다.

div 옆으로 붙이기 display: flex; float: left를 부모에게 주면 div가 옆으로 붙습니당

ex)