Advanced CSS

transitions

• hover 와 같은 효과 active해지거나 click되는 효과같은것

animations

• 이미 customized된 애니메이션

transformations

• 크기가 커지거나, 회전하거나, 움직이거나
• ease-in-out : 서서히 변함

• body,
  html {
    height: 100%;
    padding: 0%;
    margin: 0%;
  }
  .box {
    background-color: green;
    color: whitesmoke;
    font-size: 60px;
    transition: all 0.5s ease-in-out;
  }
  .box:focus {
    background-color: blue;
    color: red;
  }
   

https://developer.mozilla.org/en-US/docs/Web/CSS/transition

transition

Trnasformations

• html 문서의 element들을 변경, 모습이 변하는 효과를 뜻함

https://developer.mozilla.org/en-US/docs/Web/CSS/transform

transform

Animation

• 이름을 지어야함
• @keyframes  이름{}
• scaleY(N) : N배 키워줌
• animation-delay: 0.3s : 딜레이 추가

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: 1.5s identifier ease-in-out;
}
@keyframes identifier {
  from {
    transform: none;
  }
  to {
    transform: rotate(1turn) scale(0.5, 0.5);
  }
}
 
 
 
 
.box {
  width: 200px;
  height: 200px;
  background-color: red;
  animation: 15s identifier infinite ease-in-out;
}
@keyframes identifier {
  0% {
    transform: none;
  }
  50% {
    transform: rotate(1turn) scale(0.5, 0.5);
    color: blue;
  }
  100% {
    transform: none;
  }
}
 

Media Queries

body {
  background-color: green;
}
@media screen and (min-width: 320px) and (max-width: 1640px) {
  body {
    background-color: blue;
  }
}
 

 

 

Using media queries

Using media queries

 

reset.css

• @import "reset.css";

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite
,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li
,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed
,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
body {
  line-height: 1;
}
ol,
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
 

google fonts

• 원한는 typography를 고를 수 있음
• https://fonts.google.com/

Google Fonts

소문자로 바꾸기

• text-transform: lowercase;

입력상자 만들기

• <input type="이름" placeholder="보여질 문자" class="form__input" />
• http://jun.hansung.ac.kr/CWP/htmls/HTML%20Input%20Types.html

HTML Input 요소의 타입들(types)

• 체크 박스 만들기
  • html

  • <div class="form__remember">
      <input id="remember" type="checkbox" class="form__checkbox" />
      <label for="remember" class="form__label">Remember Me</label>
    </div>

  • css

  • .form__remember .form__checkbox {
      all: unset;
      display: inline-block;
      width: 10px;
      height: 10px;
      border-radius: 2px;
      border: 1px solid rgb(180, 177, 177);
      position: relative;
    }
    
    .form__remember .form__checkbox:checked:before {
      font-family: "Font Awesome 5 Free";
      font-weight: 900;
      font-style: normal;
      content: "\f00c";
      position: absolute;
      top: 1px;
      color: #e2273e;
    }

    드

font awesome uni code

.form__remember .form__checkbox:checked:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-style: normal;
  content: "\f00c";
  position: absolute;
  font-size: 9px;
  top: 1px;
  color: #e2273e;
}