Blog Page 포스트 목록박스 둥근모서리로 바꾸기 + 그림자효과

그제어제는 그냥 Blog Page 포스트 목록 모양이 쬐끔 거슬려서 라운지 코너를 만들어보자 해서 시도를 해보았습니다.

아래는 css 소스코드입니다. 모바일에서 복붙하니 뭐가 잘 안되는군요. 자세한 내용은 포스트를 확인해보세요. 워드프레스 꾸미기 재미가 있네요.

https://secondlife.lol/wordpress-blog-rounded-corners/

/* 개별 포스트 박스를 둥글게 설정하고, 내용이 넘치지 않도록 처리 */ .post { border-radius: 10px; /* 모서리를 둥글게 만듦 (10px 곡률) */ overflow: hidden; /* 내용이 박스 경계선을 넘어가지 않도록 설정 */ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 박스에 부드러운 그림자를 추가 (0px X축, 4px Y축, 8px 퍼짐) */ transition: all 0.3s ease-in-out; /* 모든 스타일 변경을 부드럽게 0.3초 동안 처리 */ } /* 포스트 박스에 마우스를 올렸을 때의 스타일 */ .post:hover { transform: scale(1.02); /* 박스 크기를 약간 확대 (1.02배) */ box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* 그림자를 더 뚜렷하게 변경 (6px Y축, 12px 퍼짐) */ }

3 comments