CSS 클론코딩 (2)

6 Transitions

참고. Ceaser CSS Easing Animation Tool

상태에 따라 바뀌는 요소 존재 시 사용 가능 ex) hover, active, focus ...

ease-in function : 브라우저에게 애니메이션이 어떻게 변할지 말해주는 기능

default: linear, ease-in, ease-in-out, ease-out, ease

cubic-bezier(0, 0, 0, 0); 으로 직접 설정할수도 있다.

• transition은 state에 따라 바뀌는 property를 갖고 있으면 사용된다.

• 다른 transtion을 더 쓰고 싶다면 "콤마(,)"를 잊어선 안된다.

• e.g)

  a {
  
  position: relative;
  
  top: 100px;
  
  right: -100px;
  
  background-color: wheat;
  
  color: tomato;
  
  padding: 10px;
  
  text-decoration: solid;
  
  font-size: 100px;
  
  border-radius: 50px;
  
  **transition: all 3s ease-in-out;**
  
  }
  
  a:hover {
  
  border-radius: 1000px;
  
  color: yellow;
  
  background-color: brown;
  
  padding: 40px;
  
  font-size: 200px;
  
  top: 500px;}

  *transition은 element에 있어야함!

7 Transformation

transformation은 한 요소를 transform(변형)시킬 수 있다.

border-radius 50% → 원

translate은 transformation을 적용 시키긴 하지만, 다른 형제(sibling)을 변화시키진 않는다.

→ transformation은 box element를 변형시키지 않는다.

→ margin, padding이 적용되지 않는다. 일종의 3D transformation이기 때문이다.

→ margin, padding을 위해서 translateX, translateY를 사용하지 않는다.

• transform과 transition을 조합하면 더 역동적인 애니메이션을 만들 수 있다.
• CSS 3D는 GPU로 돌아가므로, 3D 작업을 할 수 있다.

8 Animation

Animista - CSS Animations on Demand

@keyframes

animationname {

from {

transform: rotateX(0);

}

to {

transform: rotateX(360deg);

}

}

이런 식으로 애니메이션 코드를 작성 한 후 적용을 원하는 대상 요소에서

animation: animation name 5s ease-in-out infinite;를 넣어 실행.

9 Media Queries

Using media queries - CSS: Cascading Style Sheets | MDN

@media

screen and (max-width: 400px){ // 스크린 넓이가 400px 보다 작으면

background-color: tomato}

• min-device-width / max-device-width
• orientation: landscape 가로/ portrait 세로

10 kokoa-clone

vsc prettier 단축키

! → html    //    link: → css    //   nav>ul>li*4>a

Block Element Modifier

use long class name.

e.g)

.btn{} 

.btn__price {} (element — depends upon the block)  

.btn—orange / .btn—big{} (modifier — changes the style of the block)

fontawesome script should always go last!! but now it works in header too.

<script src="https://kit.fontawesome.com/6478f529f2.js" crossorigin="anonymous"></script>

##세팅을 새롭게 하기 위해 reset.css 생성, 구글에서 카피 페이스트 후 @import "reset.css";##

css
http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)

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;
}

Form has 2 attributes, Action and Method.

<form action="~~"(어떤 페이지로 data를 보낼지 지정) method="get"(2가지로 POST는 백엔드 서버에 data 전송함. GET방식은 보안에 취약) id="~"></form>

일정 영역 가로 스크롤

// html
<ul>
  <li>안녕</li>
  <li>안녕</li>
  <li>안녕</li>
  <li>안녕</li>
</ul>

// css
ul{
    width:300px; overflow-x:scroll; white-space:nowrap;
}
li{
    display:inline-block; font-size:40px;
}

2021.06.19

Border box

box-sizing: border-box;

→ box 사이즈를 늘리기 원치 않을 경우 사용!
css에서 width를 지정한 채로 패딩을 줄 경우 width를 유지하기 위해 자체적으로 넓이를 수정함.
이를 방지하기 위해 사용