CSS7 따라다니는 배너 만들기 아래 이미지를 보면 카카오톡 채널 배너가 우측에 있는걸 확인할 수 있습니다. 현재 이미지라서 고정되어 있어 보이지만 홈페이지 http://체크앤체크.kr/ 를 들어가보면 움직이며 따라다니는 모습을 볼 수 있습니다. 뭐 따라다니는 배너 , 고정된 배너 등등 여러가지 스킬들이 있지만 지금까지 적용한것중 가장 방법이 쉬워서 이렇게 공유합니다. See the Pen Untitled by 진격IT (@zsrcvkwa-the-animator) on CodePen. 이미지 링크걸고 id값으로 floatRight 으로 CSS 조절해가며 우측 또는 좌측 마음대로 이미지 위치 이동 가능하고 스크립트 위 위 소스만 적용해주면 따라다니는 배너를 쉽게 만들수 있습니다. 지금까지 제가 써본것중 적용하기 쉽고 단순해서 좋네요. 2023. 3. 8. css 글자 애니메이션 효과주기 1선 See the Pen Untitled by 박상언 (@zsrcvkwa-the-animator) on CodePen. 텍스트가 위아래로 통통 튀는? 애니메이션 효과입니다. 2022. 11. 30. css 이미지 수직 정렬 코딩을 하다보면 간혹 이미지를 수직정렬 하는 문제가 생기곤 하는데 이럴때 사용하면 유용할듯하기도 하고 구글링도 귀찮아서 이곳에 남깁니다. 이미지 수직 정렬 방법에는 여러가지가 있는데 첫번째 position 을 이용하는 방법, 두번째는 line-height 를 이용하는 방법, 세번째는 :before / content 를 이용하는 방법, 네번째는 flex를 이용하는 방법이 있습니다. See the Pen Untitled by 진격의 IT (@zsrcvkwa-the-animator) on CodePen. 위 소스를 보고 활용하면 좋을거 같습니다. 2022. 10. 26. css 이미지 가운데 정렬 코딩을 하다보면 가끔씩 이미지 중앙정렬을 검색하게 됩니다. 이게 외워서 하면 좋은데 잘 안외워져서... 걍 이곳에 남김! 첫번째 방법 그런데 위 방법이 간혹 안되는 경우가 있는데 그럴땐 두번째 방법 img { margin: auto; display: block; } margin auto 만으론 중앙정렬이 안됨! 그래서 블록으로 감싸줌 그리고 마지막 세번째 div { display: flex; justify-content: center; } img { width: 60%; } 세 번째 방법은 display flex를 사용하는 것입니다. display flex 만으론 작동하지 않아서 justify-content 라는 추가적인 속성을 줍니다. 우선 수평으로 가운데 정렬이고 담번에 수직 가운데 정렬도 넣어놔야겠.. 2022. 10. 25. css 자동줄바꿈 html 코딩을 하다 보면 text가 width 를 넘어설 경우 css를 이용하여 자동 줄바꿈을 할 수 없을까 라는 고민 대부분 있을겁니다. 항상 구글링에 css 자동줄바꿈 검색해서 사용하곤 했는데 홈페이지 작업하면서 궁금했고 자주 찾았던 내용을 블로그에 남기기로 했습니다. 첫번째 자동 줄바꿈 keep-break keep-break 는 기본적으로 줄이 넘어갈 때는 단어 단위로 자릅니다. 그래서 띄어 쓰기를 하지 않고 글을 쓴다면 한 단어로 인식하여서 width 를 넘어가도 줄바꿈이 되지 않습니다. 그럴 때 keep-break 를 사용해주면 줄바꿈이 가능하게 됩니다. See the Pen Untitled by 박상언 (@zsrcvkwa-the-animator) on CodePen. .keep-break {.. 2022. 10. 19. CSS, JS 등 소스를 정렬해주는 사이트 HTML, CSS 소스 깔끔하게 정렬해주는 사이트 https://tools.arantius.com/tabifier Tools - Tabifier (HTML and CSS code beautifier) - arantius.com Tabifier The tabifier is a tool to properly indent computer code. The style it produces is a mix of my personal preferences for indentation plus what I could manage to make a program produce from dirty source. The tabifier currently supports CSS, HTML, and tools.arantius.. 2022. 10. 6. CSS 마우스 오버 이미지 확대 Hover Effect 2022. 10. 5. 이전 1 다음
