알아두면 쓰게되는 CSS

오늘은 알아두면 쓰게되는 CSS 속성에 대해서 알아본다!

rem의 활용

rem = root em
최상인 요소인 html요소에 비례하여 크기를 가지는 상대적인 길이개념!
즉 html 요소에 font-size를 고정값으로 지정해 두면 그 비율에 따라 크기가 계산됩니다.

🤔사용하는 이유?
반응형 홈페이지를 만들때 px로 작업을 하면 브레이크 포인트 마다 일일이 찾아서 px값을 수정해야 하는 엄청난 수고를 하게 된다..(자살하는 기분을 느끼게 될 수도)
px은 절대값으로 사용 되는 단위이기 때문에 반응형 홈페이지를 작업할때는 불편하고 문제가 되게 때문에 rem을 사용 하는 것이 좋습니당!👍

html 기본 시스템 사이즈는 {font-size:16px;}이다.
수학을 못하는 내 머리를 위해서
html { font-size:62.5%; }, 또는 html { font-size:10px; }로 하면
10px은 1rem,
12px은 1.2rem,
14px은 1.4rem 이 되기 때문에 따로 계산할 필요가 없어 px을 사용 할때 처럼 사용 할 수 있어 편리~!

⚡️Plus! 개꿀정보!
font-size 이외에도 margin / padding도 rem으로 작업가능!

가상선택자 ::before, ::after

::before 선택자는 다른 선택자의 뒤에 함께 쓰여 원하는 텍스트 및 스타일을 넣거나 지정할 때 사용합니다. ::after의 경우는 반대로 뒤에 추가하는 것이 이 둘의 차이점입니다.

사용예제
1. 텍스트끼리 서로 구분할 경우
2. 특수코드를 변환없이 그대로 보여줄 경우
3. 백그라운드 이미지를 해당 문구 앞 또는 뒤에 삽입하는 경우

• HTML 코드
  
• CSS 코드
  
• 결과
  

rel(https://url.kr/I3ktFr)

z-index

z-index 속성은 하나의 정수 값을 가질 수 있다(양수, 음수 모두 가능하다!)
이 값은 해당 엘리먼트의 z축 상의 위치를 나타낸다. 각 레이어는 번호가 붙어있고 높은 번호를 가진 레이어는 낮은 번호를 가진 레이어 위에 렌더링된다.
⚡️주의! z-index는 positon 속성이 설정된 엘리먼트에 대해서만 작동한다!

자세한 내용은 알고 있으니까 생략한다..!

ref(https://url.kr/sJmPeC)

backdrop-filter

backdrop-filter 속성을 사용하면 같은 번짐이나 색 요소 뒤의 영역으로 이동 같은 그래픽 효과를 적용 할 수 있습니다.
⚡️페이지가 움직임에 따라서 자연스러운 색 변화 효과를 노릴 수 있다!
아래는 애플페이지를 통한 예제

• backdrop-filter를 사용한 경우
  
• backdrop-filter를 사용하지않는 경우
  

이쁜 navigation을 위해 backdrop-filter를 활용하자!

transition

transition은 CSS 속성을 변경할 때 애니메이션 속도를 조절하는 방법을 제공합니다.속성의 변화가 일정 기간에 걸쳐 일어나도록 할 수 있습니다. 예를 들어, 여러분이 어떤 요소의 색상을 흰색에서 검은색으로 변경한다면, 변화는 대개 즉시 일어납니다. but, CSS 트랜지션을 이용하면, 모두 커스터마이즈 가능한 어떤 가속도 곡선을 따르는 시간 주기마다 변화가 일어납니다.
transition은 (명시적으로 목록을 작성해서) 어떤 속성을 움직이게 할지, (딜레이를 설정해서) 언제 애니메이션이 시작할지, (지속 시간을 설정해서) 트랜지션을 얼마나 지속할지, 그리고 (예를 들면, 선형이거나 초기 빠름, 종료 느림과 같은 타이밍 함수를 정의해서) 어떻게 transiton을 실행하는지 결정하게 합니다.

transition에 사용가능한 css 속성

transition-property

트랜지션을 적용해야 하는 CSS 속성의 이름 혹은 이름들을 명시! 여기에 나열한 속성만 트랜지션하는 동안 움직입니다. 또한, 다른 모든 속성에 대한 변화는 보통 때와 같이 즉시 일어납니다.

transition-duration

트랜지션이 일어나는 지속 시간을 명시합니다. 트랜지션 동안 모든 속성에 적용하는 단일 지속 시간을 명시하거나, 다른 주기로 각 속성이 트랜지션하게 하는 여러 지속 시간을 명시할 수 있습니다.

transition-timing-function

속성의 중간값을 계산하는 방법을 정의하는 함수를 명시합니다. Timing functions는 트랜지션의 중간값을 계산하는 방법을 결정합니다. 대부분의 타이밍 함수는 큐빅 베이지어(cubic bezier)를 정의하는 네 점에 의해 정의되므로 상응하는 함수의 그래프로 제공해서 명시할 수 있습니다. Easing Functions Cheat Sheet에서 이징(easing, 역자주: 시간에 따른 파라미터 값의 변화율을 명시하는 함수)을 선택할 수도 있습니다.

transition-delay

속성이 변한 시점과 트랜지션이 실제로 시작하는 사이에 기다리는 시간을 정의합니다.

⚡️transition 속성을 이용해서 애니메이션을 자연스럽게 활용하자!
ref(https://url.kr/UqLPte)

opacity

opacity CSS 속성은 요소의 불투명도를 설정합니다. 불투명도는 요소 뒤쪽 콘텐츠가 숨겨지는 정도로, 투명도의 반대!
값: 0 ~ 1 사이의 값을 가진다!
0에 가까울수록 요소가 완전히 투명해짐!(안보임), 1이 될 경우 아주 잘보인다!(기본값)
아래의 예제로 살펴보자!

• opacity = 기본값일때
• opacity = 0.1일때
  아이패드에 hover를 사용하여 opacity 값을 조정하였다!

⚡️hover + opacity를 이용해서 생동감있는 버튼을 만들자!
ref(https://developer.mozilla.org/ko/docs/Web/CSS/opacity)

position

position속성은 문서 상에 요소를 배치하는 방법을 지정합니다.
top, right, bottom, left 속성이 요소를 배치할 최종 위치를 결정합니다.

배치 유형

• 위치 지정 요소: position의 계산값이 relative, absolute, fixed, sticky 중 하나인 요소입니다. 즉, 값이 static이 아닌 모든 요소를 말합니다.
• 상대 위치 지정 요소: position의 계산값이 relative인 요소입니다. top과 bottom은 원래 위치에서의 세로축 거리를, left와 right은 원래 위치에서의 가로축 거리를 지정합니다.
• 절대 위치 지정 요소: position의 계산값이 absolute 또는 fixed인 요소입니다.top, right, bottom, left는 요소의 컨테이닝 블록(위치의 기준점이 되는 조상 요소) 모서리로부터의 거리를 지정합니다. 요소가 바깥 여백을 가진다면 거리에 더합니다. 절대 위치 지정 요소는 새로운 블록 서식 맥락을 생성합니다.
• 끈끈이 위치 지정 요소: position의 계산값이 sticky인 요소입니다. 평소에는 상대 위치 지정 요소로 처리하지만, 컨테이닝 블록이 자신의 플로우 루트(또는, 스크롤 컨테이너)에서 지정한 임계값(top 등으로 지정)을 넘으면 마치 fixed처럼 화면에 고정합니다. 고정 상태는 컨테이닝 블록의 반대편 모서리를 만나면 해제됩니다.

값

• static
  요소를 일반적인 문서 흐름에 따라 배치합니다. top, right, bottom, left, z-index 속성이 아무런 영향도 주지 않습니다. 기본값입니다.
• relative
  요소를 일반적인 문서 흐름에 따라 배치하고, 자기 자신을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용합니다. 오프셋은 다른 요소에는 영향을 주지 않습니다. 따라서 페이지 레이아웃에서 요소가 차지하는 공간은 static일 때와 같습니다.
• absolute
  요소를 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃에 공간도 배정하지 않습니다. 대신 가장 가까운 위치 지정 조상 요소에 대해 상대적으로 배치합니다. 단, 조상 중 위치 지정 요소가 없다면 초기 컨테이닝 블록을 기준으로 삼습니다. 최종 위치는 top, right, bottom, left 값이 지정합니다.
• fixed
  요소를 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃에 공간도 배정하지 않습니다. 대신 뷰포트(viewport)의 초기 컨테이닝 블록을 기준으로 한 위치에 배치됩니다. 단, 요소의 조상 중 하나가 transform, perspective, filter 속성 중 어느 하나라도 none이 아니라면, 뷰포트 대신 그 조상을 컨테이닝 블록으로 삼습니다. 최종 위치는 top, right, bottom, left 값이 지정합니다.
  이 값은 항상 새로운 쌓임 맥락을 생성합니다.
• sticky
  요소를 일반적인 문서 흐름에 따라 배치하고, 테이블 관련 요소를 포함해 가장 가까운 스크롤되는 조상과 컨테이닝 블록(가장 가까운 블록 레벨 조상)을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용합니다. 오프셋은 다른 요소에는 영향을 주지 않습니다.
  이 값은 항상 새로운 쌓임 맥락을 생성합니다.

relative & absolute를 통한 포지셔닝 tip!👍
rel(https://www.youtube.com/watch?v=N7RYsb6V3vs)