[css] transform을 이용해 뒤집는 애니메이션 만들기

안녕하세요. 플입니다. 오늘은 css를 이용해 애니메이션 효과를 넣어볼게요. 1. html Q. 이름의 의미 A. 이름은 색과 연관지어서 지었어요. 시트렛은 시트러스색보다는 형광색에 가깝지만 시트러스 + rat(쥐) 조합이 마음에 들었죠. 블루는 정말 단순한 작명이라고 생각하고는 있어요. Q.1 뒤집는 애니메이션을 만들 때 중요한 포인트는 앞쪽과 뒤쪽을 모두 만들어주는 것이에요. 일단 한글로 적힌 내용은 신경 쓰지 말아 주시고 에 넣은 클래스를 주목해주세요. front와 back로 앞뒤를 구분해주었어요. 이게 뒷면 이게 앞면이에요. 기본은 뒷면인 상태로 나오고 마우스를 올리면 앞면이 나오도록 만들 거예요. 2. 포지션 li{ position:relative; } .front{ position:absolu..

coding/html + css · 2020. 5. 26. 07:30

[css] 마우스 올리면 나타나는 버튼 만들기

안녕하세요. 플입니다. 마우스 올리면 나타나는 버튼의 css를 진행해볼게요. 1. html 보고오기 2020/05/22 - [Try/coding] - [html] 마우스를 올리면 나타나는 버튼 만들기 2. 전체 css li{ float:left; width:30%; margin:0 1%; height:218px; border:3px dashed $sub_color; a{ display:none; position:relative; width:100%; height:218px; text-align:center; background: $sub_color; line-height: 218px; color:$main_color; font-size:28px; font-family:'NanumBarunpen'; fon..

coding/html + css · 2020. 5. 25. 07:30

[html] 마우스를 올리면 나타나는 버튼 만들기

안녕하세요. 플입니다. 마우스를 올리면 나타나는 버튼을 만들어볼게요. 1. 전체 html 한 방울 두 방울 오늘은 html 코드만 우선 진행할게요. 먼저 전체 코드를 보여드릴게요. 2. 코드 하나씩 뜯어보기 한 방울 마우스를 올리면 태그가 나타나게 만들 거예요. 그래서 태그와 태그를 나란히 넣어줬어요. 저는 여러 개를 만들 예정이기 때문에 태그를 이용했습니다. 나란히 두는 것이 중요한 부분이에요. 3. css 보러 가기 준비 중 그럼 이만. 총총.

coding/html + css · 2020. 5. 22. 07:30