HTML, CSS 02 계산기 목업 만들기를 위한 CSS 속성을 알아보자_02

1. 현재의 무드: 이태원 참사 뉴스를 보고 아침부터 쭉 기분이 다운이다. 정신적으로 꽤 충격을 많이 받아서 ... 좀 회복할 시간을 줘야할 것 같다. 그래도 해야 할 일은 해야하니까 블로깅 간단하게 정리하고 자려고 한다. 

 

2. 오늘 학습한 내용 중 키워드: CSS 속성들

3. 오늘 학습한 내용 요약

 

<이전 포스팅에 이어서> 

 

4. animation: 엘리먼트에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 전환시켜준다. 애니메이션을 나타내는 CSS 스타일, 그리고 애니메이션의 중간 상태를 나타내는 @keyframes 로 이루어진다. 

 

mdn 문서에 따르면, 자바스크립트를 이용한 애니메이션보다 세 가지 장점이 있다고 한다!

1. JS몰라도 간단한 애니메이션을 만들 수 있음

2. JS를 이용한 애니메이션은 잘 만들어졌더라도 성능이 좋지 못할 때가 있음. CSS 애니메이션은 frame-skipping같은 여러 기술을 이용하여 최대한 부드럽게 렌더링된다. 

3. 브라우저가 애니메이션의 성능을 효율적으로 최적화 할 수 있다. 예를 들어, 현재 보이지 않는 엘리먼트에 대한 애니메이션은 업데이트 주기를 줄여서 부하를 최소화한다던지! 

 

하위 속성들

animation-delay: 엘리먼트가 로드되고 난 후, 언제 애니메이션이 시작될 지 지정함

animation-direction

animation-duration

animation-iteration-count

animation-name -> 중간 상태를 @keyframes로 기술해줌

 

@keyframes

중간 상태를 기술해줌. 0%~100% 까지 그 시점을 기술할 수 있음. from과 to로 대체 가능. 

p {
  animation-duration: 3s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

 

5. transform: 엘리먼트에 회전, 크기 조절, 기울이기, 이동 효과 등을 부여할 수 있음. (변형 가능한 요소에만 가능!)

 

하위 속성들

matrix, rotate, trnaslate, scale, skew 등등 다양함! 

 

div {
  border: solid red;
  transform: translate(30px, 20px) rotate(20deg);
  width: 140px;
  height: 60px;
}

 

6. ::before & ::after

선택한 요소의 첫 자식으로 의사 요소를 하나 생성함. 보통 content 속성과 함께 짝지어, 요소에 장식용 콘텐츠를 추가할 때 사용한다. 

 

의사 요소: (가상 요소) 선택자에 추가하는 키워드로, 선택한 요소의 일부분에만 스타일을 입힐 수 있다. 대박 신기해!

p::first-line {
color:blue;
text-transform: uppercase;
}

 

 

이렇게 써주면, 모든 p 요소의 첫번째 줄에만 저 속성이 입혀지는 것! 

슬슬 CSS가 재밌어지는 중...ㅋㅋㅋㅋㅋ 그치만 역시나 방대해...

 

쨌든, ::before 과 ::after로 돌아와서

a::after {
content: "♥";
}

이렇게 해주면 링크 뒤에 하트가 붙고! 

 

q::before {
  content: "«";
  color: blue;
}

q::after {
  content: "»";
  color: red;
}

이렇게 앞뒤에 인용 표시도 붙여줄 수 있다. 

 

7.  calc ()

 

calc() 는 CSS 함수. CSS 속성의 값으로 계산식을 지정할 수 있다! 신박하다 

width: calc(100% - 80px);

이렇게 써주면, 저 괄호 안의 표현식을 계산한 결과값이 최종 값이 된다. 표현식은 단순 계산식은 무엇이든지 가능하며, 표준 연산자 우선순위를 따른다. 그 중, + - 연산자는 음수, 양수 표현과 구분을 위해 좌우 공백이 필요하다. * / 연산자는 좌우 공백이 필요하지는 않지만. 통일성 유지를 위해 추가하는 편이 좋다. 

 

어떨 때 유용하나면

1. 요소를 화면에 여백과 함께 배치할 때! 

2. 입력 양식 요소를 컨테이너 크기에 자동으로 맞춰줄 때! 

 

8. cursor

해당 속성은 요소 위에 마우스 커서가 올라갔을 때 보여줄 모양을 지정한다. 

값으로는 help, wait, crosshair, not-allowed, zoom-in, grab, pointer 등이 있다. 마우스 커서 모양을 바꿔준다. 

 

:hover 와는 어떻게 쓰임이 다른지 궁금해서 생각해봤다.

 cursor는 말 그대로 커서의 모양을 바꿔주는 역할, :hover는 해당 링크 위에 마우스를 올렸을 때, 요소 자체에서 변형이 일어나는 경우에 사용하는 것 같음. 이 부분은 검색했는데 이해하는게 좀 어려워서... 나중에 다시 와서 보자!

 

9. transition

해당 속성은 CSS 속성을 변경할 때 애니메이션 속도를 조절하는 방법을 제공한다. 속성 변경이 즉시 영향을 미치게 하는 대신, 그 속성 변화가 일정 기간에 걸쳐 일어날 수 있도록 할 수 있다. 

 

transition: <property> <duration> <timing-function> <delay>;

 

이거는,,, 써있는거 보면 뭔지는 알겠는데, 직접 입력하라고 하면 아직은 어려울 것 같아서 일단 이정도로만 정리하고 넘어가겠음!

 

모든 내용은 mdn을 참고했습니다 :)