[miniProjects] 참고 + 문법

⭐참고⭐

1. font awesome

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap');

2. 사용자 지정 CSS

• root로 색을 지정하고 var()로 적용시킬 수 있음.

:root {
  --border-color: #144fc6;
}
.cup {
  border: 4px solid var(--border-color);
}

3. Position 속성

값	의미
static	기준없음(배치 불가능, 기본값)
relative	요소 자기 자신을 기준으로 배치
absolute	부모 요소를 기준으로 배치
fixed	뷰포트 기분으로 배치
stickey	스크롤 영역 기준으로 배치

4. 가상요소

✔️::before

첫 번째 가상 요소를 생성함.

p::before {
  content : '♥';
}
/* 결과는 p단락 앞에 하트 이모티콘이 붙여짐. */

✔️::after

마지막 가상 요소를 생성함.

p::after {
  content : '♥';
}
/* 결과는 p단락 뒤에 하트 이모티콘이 붙여짐. */

❗두 속성을 쓸 때 content:''를 추가해야 한다.

5. 메서드 toggle()

토글이란 add(), remove() 메서드를 한 번에 쓸 수 있음. 보통 click 이벤트에 classList를 이용해 toggle로 css에 style을 준 클래스명을 on/off 함.

6. transform, translate, transition 차이

❗transform

• Element를 변경시킬 때 사용 ( 위치 이동 , 회전 , 크기 조절 등 )
• transform 내 사용 : translate , scale , rotate 등
  ❗translate
  
• Element를 이동시킬 때 사용
• X축이나 Y축 기준으로 한 값만 적용시키고 싶을 때는 translateY , translateY를 사용하던가 translate에서 원하지 않는 값에 0을 사용해도 된다.
  ❗transition
  
• Element의 CSS 속성을 변경할 때 부드럽게 움직이거나 원하는 대로 적용되도록 애니메이션 속도, 반복 횟수, 조절 등을 할 수 있다.

7. transform : scale()

• scale 문단의 박스 크기는 그대로 가지고 있지만 item의 크기가 바뀐다.
• scale 사용 시 가로 세로 사이즈가 0.5로 변경
• scale을 1로 사용시에는 원래 크기로 변경
• 앞쪽의 인자가 x축 뒷쪽의 인자가 y축
• x축만 늘릴고 싶을때는 scaleX()를 사용
• Y축만 늘릴고 싶을때는 scaleY()를 사용