CSS
1.[CSS] 중앙 점을 기준으로 요소 확장
크기를 0으로 설정한 후 클릭하여 확대하는 영역을 만들었었다. > 위와 같이 클릭해서 className을 주어 해당 class에 width,height를 100%로 변경하는 형태로 만들었었다. 영역의 가운데에서부터 확대되는 형식으로 구현하고싶었다. 문제점 : 영역 안의 사진, 글자와 같은 내용은 크기가 줄지 않아 확대, 축소될때 글자의 줄 수가 바뀌는...
2.[CSS] 말풍선 만들기 (transform: rotate())
일반적인 div영역은 width,와 height설정을 통해 사각형 형태로 만들어진다.CSS로 말풍선 형태를 만드려면 어떻게 해야할까?말풍선의 사각틀이 되는 div(0)를 만든다.div(0)안에 div(1)를 만들어 top, left를 조절하고 배경색을 입혀 말풍선 꼬리
3.[CSS] 쿨타임 애니메이션(clip-path: polygon)
게임등에서 흔히 쿨타임 표시 기능으로 쓰이는 위와 같은 애니메이션을 만들어 보겠다.
4.[CSS] 크기와 위치 변환 애니메이션
Com1에는 postion: relative;를 준 상태position값을 주어도 top, left를 주지않으면 Com3은 Com2의 내부에 위치한다.애니메이션으로 top, left를 0을 주면 Com1을 기준으로 위치가 변환된다.하지만 위 코드를 적용하면 애니메이션이
5.[CSS] margin: auto가 적용되지 않을 때
margin: auto를 사용해도 중앙 배치가 되지 않을 때에는 2가지 경우가 있다.인라인 요소인 경우 해당 요소를 감싸고 있는 부모 요소에 text-align: center를 적용하면 해결된다.width가 자동으로 설정된 경우 요소에 flex같은 설정을 주어 cent
6.[CSS] 반짝이는 이펙트 만들기
위 페이지에서 Star, 오늘 뭐먹지?, Mini-MapleStory는 버튼이다. 사용자에 따라서 버튼으로 인식하지 못할 경우를 생각하여 반짝이는 이펙트를 넣으려고 한다. 1. 하얀 박스가 지나가는 이펙트 > 우선 버튼 안에 넣을 Effect라는 요소를 만들고 position 설정으로 버튼 위로 겹쳐지게 만든다. 이펙트 두께를 늘리려고 height...