NOTE

# Colors and Variables

Color를 설정하는 세 가지 방법

1. 직접 색 이름 입력
2. Color Picker Chrome extension 사용해서 hex color codes로 입력
3. RGB (00, 00, 00)로 입력. 투명도를 추가하고 싶을시 알파를 추가해 RGBA (00, 00, 00, 0-1)을 적어주면 된다.

변수를 설정하는 방법(Variables/Custom Property)

Color picker로 원하는 색을 골라왔다 치자. 그 색을 여기에도 쓰고 저기에도 쓰고 싶은데 지금까지 해왔던 방법으로 색을 지정하려면 계속 같은 색을 복붙해줘야 한다. 그런데 나중에 디자인이 마음에 들지 않아 모든 색을 바꿔야 한다고 가정해보자. 그렇다면 다시 모든 태그들의 컬러를 하나하나 찾아 바꿔줘야 한다. 하지만 변수를 쓴다면?

:root {
--main-color: #974D0E;
}

변수는 이런 식으로 지정해줄 수 있다. --main-color는 변수의 이름이다. 이를 CSS에 작성한 후, 이 메인 컬러가 적용되었으면 하는 태그들의 color property에 var(--main-color) 를 적으면, :root 셀렉터로 지정한 메인 컬러가 각 태그들에 적용된다. 결국 이 메인 컬러를 바꾸고 싶으면 :root 셀렉터 하나만 바꾸면 되는 것.

• 변수의 이름은 '--이름' 형식으로 적어줘야 한다. 스페이스가 허용되지 않으므로 스페이스가 필요한 경우 대쉬(-)를 적어준다.
• 컬러만 저장할 수 있는 것이 아니라 다른 것도 다 저장할 수 있다. 가령 디폴트 보더값을 지정한다던가.

# Transition

• Transition이라는 속성은 state가 없는 셀렉터에 붙어야 한다.

• CSS에서 셀렉터 안에 transition: (바꾸고 싶은 것) (duration) (transition 형태); 라고 작성하면 된다.

  ex. transition: background-color 3s ease-in-out;

• You can add more than one transition. 쉼표로 구분한다.
  

• 변화가 지정되어 있는 모든 속성들을 변화 시키고 싶을 땐 transition 안 바꾸고 싶은 것을 all로 지정하면 된다.

  ex. transition: all 3s ease-in;

Ease-in function

• It tells our browser how to animate a change.
• 디폴트로 linear. ease-in, ease-in-out, ease-out, ease
• https://matthewlein.com/tools/ceaser 이 사이트에서 애니메이션을 실험해 볼 수 있다. 직접 커브를 조정해 custome cubic-bezier 값을 만들어 복사 붙여넣기 해도 된다.

ex. transition: border-radius 3s cubic-bezier(0.250, 1.650, 0.895, -0.510);

# Transformation

• It allows me to transform elements.
• 예를 들어,
  transform: rotateY(00deg); 하면 Y축을 기준으로 선택한 태그가 00자리에 넣은 숫자 degree만큼 회전한다. -> 3D 같은 효과를 줄 수 있다.
• transform: rotate(13, 20, 50); 이런 식으로도 쓸 수 있다. 순서대로 X, Y, Z축으로 13도, 20도, 50도 회전한다는 뜻.
• 한 개 이상 transform을 적용하고 싶다면, 띄어쓰기로 구분해주면 된다.

  ex. transform: translate(-50px) scale(0.5) rotateX(360deg);

• rotate 말고도 scale, translate(옮기기), skew, perspective 등 여러 가지 transformation 이 가능하다.
• transform: translateX(-100px); 하면 100px 만큼 좌측으로 옮긴다.

  ★★★ "Transalte" applies transformation, but it doesn't modify any other siblings.
  ★★★ So to say, "Transformation" doesn't modify the box element. It doesn't apply margin, paddings, etc. because it's like 3D transformation. We are modifying pixels.
  ★★★ 즉, 다른 요소의 박스를 변형하지 않고도 요소를 이동시키기 위해서 사용하는 것.

+) Tip: border-radius: 50%; 하면 원이 만들어진다.

transition과 transformation 함께 쓰기

• 가령 마우스가 이미지를 hovering 할 때 이미지 요소를 변경하고 싶다고 하면, 각각 img, img:hover 셀렉터에 transform 속성을 지정하고(만약 첫 지정값은 디폴트로 hovering 할 때만 transform 하고 싶은 거면 img:hover 셀렉터에만 transform 속성을 입력해주면 된다), root element에 transition 속성값을 지정한다.

• Transform MDN 참고(https://developer.mozilla.org/ko/docs/Web/CSS/transform)

# Animation

• 위까지의 내용은 우리가 hover과 같은 행위를 한다는 것에 전제해 변화를 주는 것이기 때문에 transition에 관한 것이지, animation에 관한 것은 아니다. 우리가 무슨 행동을 하든 말든 항상 재생되는 animation을 만드는 방법을 알아보자.
• 애니메이션을 만드는 방법은 두 가지가 있다.

1. from/to를 이용하는 방법

이런 식으로 CSS에서 @keyframes 애니메이션 이름을 작성해 준 후 그 안에 어떤 형태에서(from) 어떤 형태로(to) 바뀌게 할 것인지 설정해준다. 그 후 그 애니메이션을 적용하고 요소에 animation property를 적어주면 된다.

• 애니메이션을 무한으로 반복하고 싶으면 animation property 안에 infinite를 적어주면 된다.

2. %을 이용해 3개(이상)의 스텝을 만드는 방법

• 위의 방식의 결점은 가령 translate을 사용하는데 반복되는 애니메이션을 만들면 끝과 새시작이 부드럽게 연결되지 않는다는 것이다.

대안으로 이런 식으로, %을 사용해 중간스텝을 만들어 위의 예시에서 translateY가 변화했다가 다시 돌아오게 만들면 자연스러운, 부드러운 애니메이션을 만들 수 있다.

• How many steps can we have here? - as many steps as we want!

• Tip: 여기서 애니메이션이 적용된 요소를 센터링하고 싶다면? 부모 태그를, 가령 body에 display: flex;를 적용해 justify-content와 align-items을 center로 맞춰 자식 태그인 애니메이션 적용 요소를 수직 수평상 센터에 배치해준다.

• transform 대신 border-radius, opacity 같은 것도 각 퍼센티지 값에 넣어줘서 변화 주는 것도 가능하다. However, there are things that does not work.

• Animista (https://animista.net/)
  : CSS Animation 찾아볼 수 있는 사이트

# Media Queries (Responsive Design)

: CSS만을 이용해 내 웹사이트를 보고 있는 사용자의 스크린의 사이즈를 알 수 있는 방법. Basically, 브라우저에게 만약 사용자의 스크린 사이즈가 이렇다면, 화면을 이렇게 보여줘, 라고 하는 역할을 한다. 즉, 우리가 코드의 condition을 적을 수 있게 해준다. If this condition is true, please execute this CSS.

작성하는 법:

위의 태그는, screen이 650px과 900px 사이에 있을 때 div의 background-color를 tomato로 바꿔줘, 라고 브라우저에게 명령한다. (min-width: 650px) 만 적혀 있으면 스크린이 650px 이상일 때, (max-width: 900px) 이면 스크린이 900px 이하일 때를 표현한다.

• Media queary is chained by "and".

• 내가 원하는 만큼 미디어 쿼리를 추가할 수 있다. 가령 스크린이 600px 이하일 때, 600px < screen < 900px 일 때, 900px 이상일 때 색을 모두 다르게 주고 싶다면 미디어 쿼리 태그를 복붙해서 변화를 주면 된다.

• Tip. 폰 등 다른 device에서 어떻게 보이는지 알고 싶으면, 윈도우 스크린에서 마우스 오른쪽 버튼 > inspect 한 후 좌측 상단 toggle device toolbar을 선택하면 된다. 윈도우 창 상단에 device 기종 선택하는 메뉴 맨 오른쪽 아이콘 클릭하면 폰 스크린이 가로로 flip 됐을 때의 화면(landscape mode)도 테스트할 수 있다.
  

• 만약 landscape/portrait 모드일 때만 div의 background-color를 변경하고 싶다면?
  아래와 같이 and (orientation: landscape/portrait)를 추가해 주면 된다.
  

• min-device-width/max-device-width를 쓸 수도 있고 이는 오직 핸드폰에만 적용된다.

• screen 대신 print를 쓰면 프린트할 때 어떤 형식으로 프린트 되게 할 것인지 역시 지정할 수 있다.

• Media Quearies MDN (https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries)