css로 마우스 오버 시 테두리에 애니메이션 효과를 줘보자

자 html 구조도 다 짜뒀겠다 본격적으로 css를 시작해서 애니메이션 효과를 넣어봅시다! 1. 가상 클래스 애니메이션 이외의 필요한 다른 css 코드들은 설명하지 않고 넘어가겠습니다. 포스팅 아래에 코드팬을 남겨둘 테니 궁금하신 분들은 참고해주세요. .line::before { content: ""; position: absolute; background: rgba(230, 230, 230, 0.7); display: inline-block; transition: all 0.5s; left: 10%; top: 10%; width: 0%; height: 2px; } ① before - before이라는 가상 태그를 클래스 이름이 line인 태그에 넣어줍니다. - 말 그대로 가상으로 있는 태그로 html ..

coding/html + css · 2021. 10. 6. 09:30

[css] 내비게이션(gnb) 만들기 04 - 마우스 올릴 때만 나오게 하기

안녕하세요. 개자이너 씸플레이입니다. 하위 카테고리가 평소에는 가려져있다가 마우스를 올렸을 때만 나오게 만들어보겠습니다. 1. 감추기 ① 감출 부분 확인 감추고 싶은 부분을 확인해봅니다. 하위 카테고리는 평소에는 보이지 않다가 마우스를 올리면 보이게 만들고 싶습니다. ② display:none; display는 말 그대로 어떻게 보이는지를 결정할 수 있는 css 속성입니다. 속성 값으로 none을 쓰면 없다. 즉, 보이지 않게 됩니다. 여기서 문제는 선택자를 어떻게 잡으면 좋을까 하는 것입니다. css는 선택자만 잘 잡아도 코드를 깔끔하게 작성할 수 있습니다. 좋은 방법을 항상 발견하려고 노력해봅시다. .gnb>li ul{ display:none; } ③ 클래스를 기준 일단 기준점이 있다면 한결 편합니다..

coding/html + css · 2021. 2. 23. 09:30

[css] hover로 색 바꾸기

안녕하세요. 플입니다. 오늘은 hover를 이용해 마우스 오버 시 색을 변경해보겠습니다. ▷hover hover는 '맴돌다'라는 뜻을 가진 영어단어입니다. 마우스가 위에서 맴돌고 있을 때라고 이해할 수 있습니다. 저는 마우스 오버 시 적용되는 css로 생각하고 작업합니다. ▷사용 이유 hover를 사용하는 건 사용자의 편의를 위해 들어가는 효과입니다. 마우스를 올렸을 때 어떤 효과가 적용되거나 마우스의 모양이 손가락 모양이 되면 사용자들은 '클릭을 하는 부분'이라는 것을 직감적으로 알게 됩니다. 오늘 예시로 사용할 메뉴 색상을 변경하는 것을 살펴보면 마우스를 올렸을 때 색상이 변경되면 사용자는 클릭하는 부분이라는 것을 쉽게 알 수 있습니다. 이처럼 사용자의 클릭을 유도해 조금 더 쉽게 홈페이지를 이용할 ..

coding/html + css · 2019. 9. 6. 07:30