본문 바로가기

웹코딩 배우기/· CSS121

마우스에 반응 하는 메뉴바 - li a:hover See the Pen 마우스 반응 메뉴 목록 by nilgi (@nilgi) on CodePen. MENU#1 MENU#2 MENU#3 MENU#4 2022. 5. 11.
CSS <a> 에 display를 걸었을 때 차이 See the Pen a display by nilgi (@nilgi) on CodePen. a에 display를 걸면 width를 적용할 수 있고 글자뿐 아니라 지정한 가로 크기도 링크 영역으로 잡힌다. 단순하지만 아주 중요한 기능이다. 2022. 4. 28.
외곽선 애니메이션 See the Pen 외부선 애니메이션 by nilgi (@nilgi) on CodePen. ▶ HTML // css 마침 외부선 애니메이션 ▶ CSS .outbox { // 클래스 outbox animation: ob 4s infinite; // 애니메이션 이름은 ob고 애니메이션 총길이 4초며 반복 } @keyframes ob { // 애니메이션 ob에 키프레임 추가 50% { // 4초중 50% 지점에서 outline: 24px solid tomato; // 외곽선 굵기24 실선 토마토 색으로 변형 } } ▶ 비교 [웹코딩 배우기/· CSS] - 굵어지고 색이 변하는 border 2021. 11. 5.
투명도가 변하는 애니메이션 만들기 See the Pen 투명 애니메이션 by nilgi (@nilgi) on CodePen. ▶ HTML OPACITY ANIMATION // div 클래스 이름 op와 op1, 배경색 토마토; 테두리 둥글기 50%; 정렬은 중앙에; 안쪽여백 상하 60px 좌우 0px; 콘텐츠 박스 크기는 테두리까지 모두 포함한 값으로 지정 // div 클래스 이름은 op와 op2며 배경색은 #333(먹색); 테두리 둥글기는 50% ▶ CSS .op2 { // 클래스 op2에 animation: op2 4s infinite; // 애니메이션 이름 op2 지정. 4초. 반복 } @keyframes op2 { 애니메이션 op2에 키프레임 추가 50% { // 4초 중 50% 지점에 opacity: 0; // 투명도 0으로 변.. 2021. 11. 5.
큰 이미지의 보여지는 위치가 바뀌는 애니메이션 See the Pen 이미지 위치 변경 by nilgi (@nilgi) on CodePen. object-fit: cover; // 비율을 유지하고 컨테이너보다 콘텐츠가 크면 잘린다. object-position: 0% 0%; // 콘텐츠가 보여지는 위치의 시작점 x% y% animation: op 6s infinite; // 애니메이션 이름은 op며 6초간 진행되고 반복 @keyframes op { // 애니메이션 op의 키프레임 지정 0% { object-position: 0% 0%; // 6초중 0% 지점에서 콘텐츠의 위는 0% 0% } 25% { object-position: 25% 0%; } 50% { object-position: 50% 0%; // 6초중 50% 지점에서 콘텐츠의 위는 50%.. 2021. 11. 4.
커지는 글자 만들기 See the Pen 커지는 글자 by nilgi (@nilgi) on CodePen. 공부하면서 느낀점. 이걸 어따 써먹어? 아~ 블로그 글 수가 늘어나는구나. 워~ 참신한데? 2021. 11. 3.
색이 변하는 글자 만들기 See the Pen 색이 변하는 글자 by nilgi (@nilgi) on CodePen. hover 값을 추가해 글자에 마우스를 올렸을 때 색이 변하게 만들어도 좋겠다. CSS 이제 살짝 슬슬...ㅎ 2021. 11. 3.
굵어지고 색이 변하는 border See the Pen 굵어지는 테두리 by nilgi (@nilgi) on CodePen. html▸border: 1px solid #333; .bbox { animation: bbox 5s infinite; } // bbox에 애니메이션, 5초, 반복 @keyframes bbox { 50% { border: 30px solid tomato; border-radius: 50px; } } // 테두리 굵기를 30으로, 토마토색으로, 테구리 둥굴기는 50으로 2021. 11. 2.
확대되는 배경 이미지 See the Pen 배경이미지 확대 by nilgi (@nilgi) on CodePen. background-size: 30px 30px; animation: abi 5s infinite; @keyframes abi { 50% {background-size: 300px 300px;} } 2021. 11. 1.
움직이는 배경 이미지 만들기 See the Pen 움직이지 배경 이미지 by nilgi (@nilgi) on CodePen. html : background-position: left; animation: abi 7s infinite; @keyframes abi { 50% {background-position: right;} } 2021. 10. 31.