이미지에 마우스를 올렸을 때(hover) 이미지가 확대되고 마우스가 벗어나면 원래 상태로 축소되도록 해보겠습니다. 소스 보시겠습니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 마우스 올렸을 때 이미지 확대/축소 Colored by Color Scripter cs HTML파일은 태그에 클래스를 주고 태그로 이미지 하나를 불러오도록 했습니다. 1 2 3 4 5 6 7 8 9 .box img { /* hover 뒤 애니메이션 */ transform: scale(1.0); /* 이미지 확대 */ transition: transform .5s; /* 시간 설정 */ } .box img:hover { /* hover 시 애니메이션 */ transform: scale(1.5); /* 이미지 확대 */ t..

무료로 아이콘을 사용할 수 있는 웹사이트 중 Font Awesome 사용법에 대해 알아볼 텐데요. 모든 아이콘이 무료로 이용할 수 있는 건 아니지만 웬만한 기본형 아이콘은 무료이며 양도 많은 편이라 알아두시면 유용하게 사용할 수 있을 겁니다! 사이트 주소입니다. https://fontawesome.com/ Font Awesome The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options. fontawesome.com 접속하시면 이런 페이지가 뜰 텐데요. Start for Free를 선택해줍시다. 클릭하시면 이메일을 입력받을 수 있게 되어 있는데요. 입력 후 Send..

열심히 코딩을 하다 보면 이전까지 잘 되던 CSS파일의 변경사항이 갑자기 적용이 안 돼 난처한 상황이 생기곤 합니다. 제가 실제로 겪었던 문제이고 이 문제를 해결하느라 시간을 많이 썼던 기억이 남아 작지만 모르는 분들에게 도움을 드리고자 이렇게 공유합니다. 실제 코딩을 하다 보면 아래와 비슷한 상황을 겪게 되실 것 같은데요. 예시로 저는 content class에 backgroun-color를 주도록 하겠습니다. HTML 1 2 3 4 5 6 7 8 9 10 11 12 13 CSS 적용 문제 Hello CSS! Colored by Color Scripter cs CSS 1 2 3 .content { background-color: orange; } cs 결과 화면 이렇게 CSS 파일 적용이 안 되는 경우..

웹페이지나 모바일 메뉴에서 흔히 볼 수 있는 3줄로 구성된 모양의 햄버거 버튼입니다. 클릭 시 두 번째 줄은 투명해지고 첫 번째와 세 번째 줄이 이동하면서 각도를 바꿔 X자 형태를 만드는 원리입니다. HTML, CSS, JavaScript 를 구분해 놓고 간략한 설명을 위해 주석을 달았습니다. HTML CSS JavaScript

오늘은 텍스트 배경색이 움직이는 효과를 만들어보겠습니다. 사용할 이미지는 gif 처럼 동적인 파일이 아닌 jpg 파일로 스트라이프 패턴의 이미지를 사용할 건데요. stripe, stripe background 등으로 검색하시면 비슷한 이미지를 찾으실 수 있을 거예요😀 여기서 유의할 점은 스트라이프 패턴이 세로로 되어 있는 게 아닌 위와 같이 사선으로 되어 있어야 한다는 점입니다. 만약 세로 패턴의 이미지라면 각도를 돌려 사용하면 되겠네요! 먼저 완성 소스를 보여드리겠습니다. 여기서 중요한 태그는 background-clip, @keyframes, animation 정도가 되겠네요! background-clip 요소의 배경을 어디까지 차지할 지 지정하는 속성으로 아래와 같은 값을 지정할 수 있습니다. bo..

bootstrap이란? 프론트엔드 구축을 위한 프레임워크입니다. 여기서 프레임워크란 개발 전 자주 쓰이는 기능들을 미리 개발해놓은 탬플릿이라 생각하시면 됩니다. 사용 방법이 쉽고 코드를 가져다 바로 쓸 수 있어 시간 단축에 용이한 점이 있지만 내가 원하는 대로 커스터마이징이 어려울 수 있고 일반적인 탬플릿을 생각해 보면 정형화된 이미지, 딱 봐도 탬플릿을 사용한 것 같은 느낌을 줄 수 있어 bootstrap만 사용하는 것 보단 bootstrap을 통해 코드를 분석해가며 공부한 뒤 자신만의 코드를 짜 보는 방법이 베스트라 생각합니다. 사용법 1. 먼저 홈페이지에 접속합니다. https://getbootstrap.com Bootstrap The most popular HTML, CSS, and JS libr..