11.09(화)

박스 쉐도우 x축, y축 두께 선명도
box-shadow: 0 0 5px rgba(0,0,0, )

inspect보면 뽑을 수 있고, 컨트롤 누르고 클릭 > alt보고 누르면 간격볼 수 있다.!

한 라인에 들어가게끔 >!
중간 빈칸 없도록.붙여서 써준다.

inline-block 없어도 똑같으면 제거하면 된다.
이모티콘 정렬때 flex ...보통쓰신다고함
flex 사용했을 것 같다.

이미지 background에 url넣어서 이미지 사용

_들어가면 스네이크 표기법
coInfo 낙타 등같아서 카멜 표기법

네이버나 구글에서 상위노출 팁 있음 . 점수 계산방법있지만 , 전체 공개되어있진않음
내가 원하는 정보가 최상위 노출이라는

    /* 중앙정렬 */
    margin:0 auto; 

position : relative; 가 기준이다!

.cont-company .list-sns a[class^="link"]{
    display: inline-block;
    width:24px;
    height:24px;
    font-size: 1px;
    text-indent:-9999px;
    overflow:hidden;
    
}

텍스트 날린것 -9999px
검사

클라우드 서비스 - 트래픽 수만명 생기면 비싸다.

svg => 벡터기반 임지ㅣ .
png>svg변환사이트

토깽이 애니메이션

@keyframes blink {
to {
transform: translate(150px,0);
}
x축으로 150Px만큼 움직임. y축 0 이동
++ 인경우 오른쪽, 아래로

.3s =0.3s
transition-timing-function:linear; 일정한 속도로 줄어들겠다.

skew: 왜곡 효과

transform-origin : perspective 중심축이 여기다. 회전문처럼 작동가능.

dom tree
파싱 - 브라우저는 우선 html파일을 dom으로 변환(파싱)한다.
뿌리로부터....

페인트 기록이 남게 된다.
transform사용하면 gpu사용으로 더 빠르다.
wasm 사용해서 3d게임 많이 만든다.

animation :
키프레임 이름 == 애니메이션 이름

transition과 animation속성 :

dom tree 이해해야 js 컨트롤 가능하다 [기술면접에서도 많이 나온다 ]
document > HTML >1.Head -title > document
2.Body -1. p > hello dom!

밀리세컨드 마이크로세컨드
0.001초

from ~ to

animation-direction: reverse; emd

애니메이션
그림 직접 세줘야한다.
그리고 나누기 몇 픽셀씩 나눠야하는지!
처음부터 몇개를 몇픽셀로 주세요! > 가 가장 좋음.

@keyframes paullab{
    from{
      background-position: 0, 0;
    }
    to{
      background-position: -937px, 0;
    }
  }
  .building3{
    margin: 50px;
    width: 22.86px;
    height: 34px;
    background: url(./animation/building/frame_paullab.png) no-repeat;
    animation: paullab 3s steps(41);
    animation-fill-mode: forwards;
  }

다른분..계산..
41
저걸 계산하셨다는 자체가 대단하신겁니다. 코드가 정말 간단해 보이지만 생각해야 할 요소가 몇 가지 있어요.

1. 몇X몇으로 사용자에게보여질 것인가
2. 위의 몇X몇으로 했을 때 여백은 몇인가
3. 여백도 고려를 해야함.

perspective 페이지

rotateZ(deg)

CSS의 함수는 변환을 정의하는 그 변형없이 회전, Z 축 주위의 요소. 결과는 transform-function 데이터 유형이다.

소실점(vanishing)

perspective :숫자가 커질수록 멀리서 보는 느낌

perspective-origin : center;
perspective와 함께 사용해야하는 기준점을 지정해주는 속성

backface-visibility

뒤집어진 뒷면이 보여질지 안보여질지를 결정한다
(visible/hidden)