취업 준비/웹

Advanced CSS

openingsound 2020. 5. 15. 12:48

transitions

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

animations

  • 이미 customized된 애니메이션

transformations

  • 크기가 커지거나, 회전하거나, 움직이거나
  • ease-in-out : 서서히 변함
  • 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    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

The transition CSS property is a shorthand property for transition-property, transition-duration, transition-timing-function, and transition-delay.

developer.mozilla.org

Trnasformations

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

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

 

transform

The transform CSS property lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model.

developer.mozilla.org

Animation

  • 이름을 지어야함
  • @keyframes  이름{}
  • scaleY(N) : N배 키워줌
  • animation-delay: 0.3s : 딜레이 추가
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.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

1
2
3
4
5
6
7
8
9
body {
  background-color: green;
}
@media screen and (min-width: 320px) and (max-width: 1640px) {
  body {
    background-color: blue;
  }
}
 
 
  
 

 

Using media queries

 

Using media queries

Media queries are useful when you want to modify your site or app depending on a device's general type (such as print vs. screen) or specific characteristics and parameters (such as screen resolution or browser viewport width).

developer.mozilla.org

 

reset.css

  • @import "reset.css";
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
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;
}
 
 cs

google fonts

 

Google Fonts

Making the web more beautiful, fast, and open through great typography

fonts.google.com

소문자로 바꾸기

  • text-transform: lowercase;

입력상자 만들기

 

HTML Input 요소의 타입들(types)

HTML Input 요소의 타입들(types) 이 장에서는 요소의 입력 타입(type) 들을 설명한다.  HTML에서 사용할 수 있는 다른 input type은 다음과 같습니다.: Input Type: text 텍스트 입력(text input)위 한 줄의 입력 필

jun.hansung.ac.kr

  • 체크 박스 만들기
    • html
    • 1
      2
      3
      4
      <div class="form__remember">
        <input id="remember" type="checkbox" class="form__checkbox" />
        <label for="remember" class="form__label">Remember Me</label>
      </div>
      		 cs
    • css
    • 1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      .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;
      }
      		cs
      드

font awesome uni code

1
2
3
4
5
6
7
8
9
10
.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;
}
 cs