박스 쉐도우 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
저걸 계산하셨다는 자체가 대단하신겁니다. 코드가 정말 간단해 보이지만 생각해야 할 요소가 몇 가지 있어요.
- 몇X몇으로 사용자에게보여질 것인가
- 위의 몇X몇으로 했을 때 여백은 몇인가
- 여백도 고려를 해야함.
rotateZ(deg)
CSS의 함수는 변환을 정의하는 그 변형없이 회전, Z 축 주위의 요소. 결과는 transform-function 데이터 유형이다.
소실점(vanishing)
perspective :숫자가 커질수록 멀리서 보는 느낌
perspective-origin : center;
perspective와 함께 사용해야하는 기준점을 지정해주는 속성
backface-visibility
뒤집어진 뒷면이 보여질지 안보여질지를 결정한다
(visible/hidden)
