티스토리

개강한 공대생

검색하기

블로그 홈

개강한 공대생

verystrongdeveloper.tistory.com/m

개강한 공대생 님의 블로그입니다.

구독자: 3

방명록 방문하기

주요 글 목록

@keyframes를 활용한 애니메이션 주기 다음은 좌우 이동 애니메이션 예제다artist { width: 100px; height: 100px; background: red; position: relative; animation: mymove 5s infinite; } @keyframes mymove { from {left: 0px;} to {left: 400px;} } mymove라는 애니메이션을 5초 사이클의 애니메이션이 무한정 반복되는 코드다.mymove는 5초 동안 왼쪽 0px에서 오른쪽 400px까지 이동하고, 애니메이션이 끝나면 다시 0px로 순간 이동한 후에 다시 시작한다.그래서 애니메이션이 끝날 때마다 순간적으로 제자리로 돌아가고, 그걸 무한히 반복한다. 만약 이런 순간 이동이 어.. 공감수 0 댓글수 0 2024. 9. 12.
text-shadow의 인자값을 알아보자 text-shadow: 2px 2px 5px red;다음과 같은 text-shadow 코드가 있다고 해보자 첫번째 2px은 그림자의 X축 오프셋이다. 텍스트를 기준으로 가로 방향으로 그림자가 얼마나 이동할지를 결정한다.양수면 오른쪽으로, 음수면 왼쪽으로 그림자가 이동한다. 두번째 2px은 그림자의 Y축 오프셋이다. 양수면 아래로, 음수면 위로 그림자가 이동한다. 세번째 5px은 그림자의 블러 반경이다. 이 값이 클수록 그림자가 흐릿해진다. 네번째값인 red는 그림자의 색상이다. 공감수 0 댓글수 0 2024. 9. 12.
Transition 효과 Hover over the box! 다음 코드는 div에 마우스를 올리면 너비와 높이가 2초간 서서히 200px로 커지는 코드다. Hover to rotate! 이 코드는 div에 마우스를 올리면 2초간45도 정도의 각도를 돌리는 transform 효과가 작동된다. Hover to skew! 이 코드는 마찬가지로 div에 마우스를 올리면 2초 동안 20도 정도 x축 방향으로 비틀어지는 transform 효과를 준다. 공감수 0 댓글수 0 2024. 9. 12.
글 마우스 드래그 안되게 하는 법 (user-select: none;) 이 css 속성은 웹페이지에서 사용자가 텍스트나 요소를 드래그해서 선택하지 못하게 막는 기능이다. 복사 붙여넣기를 방지할 수 있다.. 이건 여담이지만도대체 왜 코딩하는 쪽 사람들의 블로그에서 코드를 복사 못하게 드래그가 안되도록 막는지 이해를 못하겠다... 공감수 0 댓글수 0 2024. 8. 12.
width: auto; width: auto는 내용(아이콘이나 사진)의 원래 크기 맞춰 자동으로 크기를 조정해준다. 예를 들어 아이콘의 원래 크기가 20px일 경우 너비가 자동으로 20px로 조정된다는거다. 불필요한 너비를 차지하는 것을 줄일 수 있다.. 공감수 0 댓글수 0 2024. 8. 12.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.