'CSS' 태그의 글 목록 (7 Page)

[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

[개발자 도구] css 체크박스 활용

안녕하세요. 플입니다. 오늘은 개발자 도구 중 css 체크박스 활용을 해볼게요. 1. css 체크박스 이것을 css 체크박스라고 부르는지는 잘 모르겠으나 제가 가리키는 것은 이 부분입니다. style탭에서 보면 홈페이지에 적용된 css를 쭉 볼 수 있어요. 각각 css 값 앞에 마우스를 올리면 체크박스가 나타납니다. 그 체크박스를 활용해볼게요. 2. 체크박스 활용 본격적으로 어떻게 활용하는지 알아볼게요. 먼저 홈페이지의 원래 상태예요. 적용된 css 중 아무거나 하나를 해제해볼게요. 바뀐 게 보이시나요? 이런 식으로 하나씩 체크를 해제해보면서 어떤 기능을 하는지 알아볼 수 있어요. 어디가 문제인가 하면서 하나씩 체크를 해제했다 체크했다가 하면서 찾을 수 있어요. 그럼 이만. 총총.

coding/개발 팁 · 2020. 5. 20. 07:30

[css] 배경 이미지 고정하기

안녕하세요. 플입니다. 오늘은 배경 이미지를 고정해볼게요. 1. 배경 이미지 고정 배경 이미지가 고정된다는 말이 무슨 말이냐면 아마 위의 이미지처럼 스크롤을 내릴 때 이미지가 같이 내려오는 것이 아니라 그 자리에 고정된 채로 움직이지 않는 모습을 본 적이 있으실 거예요. 그런 효과를 주는 css를 넣어줄 것입니다. 글로는 조금 이해하기 어려우시다면 아래 링크에서 확인해주세요. 포스팅하고 있는 지금은 아직 완성된 페이지가 아니긴 하지만 예시로 올려둘게요. https://ssimplay.github.io/paintdrop/ paint drop 우당탕탕 좌충우돌 물감친구들의 신나는 일상이야기. 톡 떨어진 물감에서 태어난 물감찍이는 궁금한게 너무나 많다. 세상에는 모르는 것과 신기한 것들 투성이. 여기저기 안가..

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

CSS 56