🎨CSS

CSS[ Cascading Style Sheet ]

HTML은 문장의 구조를 만들고
CSS는 문장을 브라우저에 어떻게 보여줄지 지정하는 언어

👩‍🎨CSS 사용하는 방법

• HTML 안에서 Style 속성을 이용하는 방법 - 인라인 스타일
  
• style 태그를 통해 HTML 문서 내부에서 이용하는 방법 - 내부 스타일 시트
  
• 별도로 CSS 파일을 분리하여 HTML의 문서에 연결하는 방법 - 외부 스타일 시트
  

🥇스타일 적용의 우선 순위

✨인라인 스타일 > 내부 스타일 시트 > 외부 스타일 시트 > 웹 브라우저 기본 스타일

이러한 스타일 적용 방법들이 혼합되어 사용될 경우
내부나 외부 스타일 시트와 상관없이 무조건 인라인 스타일이 적용됨👌

🤓CSS의 기본 구조

🌈색 표현하는 방법

이걸 만들어주는 툴이 있음

📐수치 값을 표현하는 방법

em은 상위에 있는 요소 기준으로, rem은 최상위가 기준🤩

html 최상위에 아무것도 지정 안 하면 브라우저의 기본 값인 16px이 적용됨✔

transition( 스무스 해짐 ) 3초가 다 돼야 opacity: 0.7이 적용되는 것

active는 클릭할 때 적용

ease ~ ease-in-out은 만들어져 있는 것들,
따로 만들어서 컨트롤하고 싶으면 cubic-bezier 이용하면 됨😎
👉 cubic-bezier 사이트

---

🎮가상 클래스( 의사 클래스 ) & 가상 요소( 의사 요소 )

• 가상 클래스 : 별도의 class 지정하지 않아도 지정한 것처럼 요소를 선택할 수 있음
• 가상 요소 : 가상 클래스처럼 선택자에 추가되며,
  존재하지 않는 요소를 존재하는 것처럼 부여하여 문서의 특정 부분 선택이 가능

---

Float & Clear

float : 컨테이너의 왼쪽 또는 오른쪽에 요소를 배치하여
텍스트 및 인라인 요소가 주위를 둘러쌀 수 있도록 함
float 효과 지워버리는 것이 clear🧹
float가 left이면 clear도 똑같이 left로 해줘야함

요즘은 웹 페이지에서 레이아웃을 만들기 위한
훨씬 강력한 도구 Flexbox 및 Grid를 사용함👍

🐱‍👤box-shadow

첫번째 5px은 offset-x니까 +이므로 오른쪽에 5px 그림자주고
두번째 5px은 offset-y니까 +이므로 아래쪽에 5px 그림자주고
세번째 10px은 blur 효과 숫자 높게 줄수록 더 흐려질 것
네번째 색상 rgba 주는거임

Margin & Padding & Border( CSS Box Model )

📦CSS Box Model➡기본적으로 모든 HTML 요소를 감싸는 상자
여백, 테두리, 패딩 및 실제 콘텐츠로 구성

➖음수도 가능⭕

마진하고 다른 점은 패딩은 음수 영향❌

🖌Text 스타일링

bold는 700( weight ), 보통은 400, semi-bold는 500

underline은 밑줄, none은 없게 하는 것

---

🎠Image

alt 속성은 단순히 이미지가 깨졌을 때만 쓰는 게 아니라,
스크린 리더 사용자에게도 큰 도움이 되는 중요한 요소🎯

✔object-fit

👉 컨테이너에 맞게 img 또는 video 크기를 조정하는 방법을 지정하는 데 사용

• fill : 기본 값, 이미지는 주어진 치수를 채우도록 크기가 조정됨
  필요한 경우 이미지에 맞게 늘어나거나 찌그러짐
  
• contain : 이미지는 종횡비를 유지하면서 주어진 치수에 맞게 크기가 조정됨
  
• cover : 이미지가 종횡비를 유지하지만 주어진 치수를 채움, 이미지에 맞게 잘림
  cover 짤린 부분에서 이부분 말고 다른 부분을 자르고 싶으면 position을 지정해주면 됨
  right로 주면 왼쪽부분 안 보이고 오른쪽 부분만 보이게 됨
• none : 이미지의 크기가 조정되지 않음
• scale-down : 이미지가 none 또는 포함의 가장 작은 버전으로 축소됨
  

⌨Input

👾Transform

transform 이랑 animation 하고 같이 많이 사용함

🤗transform-functions

• scale( ) : 요소의 크기에 영향을 줌
  요소의 글꼴 크기, 패딩, 높이 및 너비에도 적용됨
  scaleX 및 scaleY 함수의 양식 함수이기도 함
  크게하고 작게하는 것
  
• skewX( ) 및 skewY( ) : 요소를 왼쪽 또는 오른쪽으로 기울임
  skew( )는 두 값을 모두 수용하여 skewX( )와 skewY( )를 결합한 축약형
  
  
• translate( ) : 요소를 옆으로 또는 위아래로 이동함
  
  x, y축 같이 설정해줘서 대각선으로 이동한 것
• rotate( ) : 요소를 현재 위치에서 시계 방향으로 회전
  
  
• matrix( ) : 손으로 작성하도록 의도된 것은 아니지만 모든 변환을 하나로 결합하는 함수
• perspective( ) : 요소 자체엔 영향을 미치지 않지만
  하위 요소의 3D 변환에 영향을 미치므로 모든 요소가 일관된 깊이 관점을 가질 수 있음

📺animation CSS

👉 사용하려면 먼저 애니메이션에 대한 몇 가지 keyframes 지정해야함
✅ keyframe은 특정 시간에 요소의 스타일을 유지함

@keyframes 옆에 이름하고 animation에 쓴 프로퍼티 이름하고 같아야함⚡

3s는 3초가 됐을 때 100% 라는 것, 3초 이후엔 다시 0%로 돌아와서 또 3s되면 100%로👌
👉 이걸 얼마나 반복할건지는 infinite( 무한정 ) 이부분에 해당됨

div {
	width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
    // 2초 뒤에 애니메이션 시작됨
    // linear->일정하게, infinite->무한, alternate->시계반향으로 했다가 반시계
    animation: animationName 5s linear 2s infinite alternate;
}

@keyframes animationName {
	0% {
    	background-color: lightblue;
        left: 0px;
        top: 0px;
    }
    
    25% {
    	background-color: lightcoral;
        left: 150px;
        top: 0px;
    }
    
    50% {
    	background-color: lightcyan;
        left: 150px;
        top: 150px;
    }
    
    75% {
    	background-color: lightgray;
        left: 0px;
        top: 150px;
    }
    
    100% {
    	background-color: lightgray;
        left: 0px;
        top: 0px;
    }
}

⬛background-clip

요소 내에서 배경( 색상 또는 이미지 )이 확장되어야 하는 거리를 의미

border-box : 테두리 & 안쪽 영역 다 채워줌( border 까지 )
padding-box : 안쪽 영역 부분만 채워줌( padding 까지 )
content-box : 컨텐츠 부분만 채워줌( content 까지 )