코딩/HTML & CSS2 마우스 오버 5가지 스타일 웹에서 정말 많이 쓰이는 마우스 오버 효과. 다음은 애니메이션 태그인 transition 사용 시 시간차에 따라 달라지는 스타일 5가지이다. 1. HTML ease-in linear ease-in ease-out ease-in-out 2. CSS #ex div{ float:left; width:100px; height:50px; margin:5px 10px; padding:5px; color:white; background-color:#006aff; border-radius:5px; text-align:center; font-wight:bold; } #ex:hover div { height:400px; } #ex .ease { -webkit-transition:3s ease; } #ex .linear {.. 2020. 5. 7. border-radius로 부채꼴 도형 만들기 가끔 사이트에서 한 부분이 둥그런 도형이 필요할 때가 있다. 이럴 땐 이미지를 사용해도 되지만 border CSS로 제작이 가능하다. HTML CSS #radius { width:200px; height:200px; background-color:blue; -webkit-border-radius:200px 0 0 0; -moz-border-radius:200px 0 0 0; } 출력 원리 border-radius는 각진 꼭지점을 둥굴게 하는 효과이다. 사각형의 도형이 있다면 0 0 0 0을 기재했을 때 순서대로 왼쪽 위, 오른쪽 위, 오른쪽 아래, 왼쪽 아래가 된다. 따라서 첫번째 숫자의 값을 높일 수록 부채꼴에 가까운 도형이 만들어 진다. 2020. 1. 8. 이전 1 다음
