워드프레스 꾸미기 – 블로그 페이지의 포스트 목록 둥근 모서리와 그림자 효과 추가하기(feat. CSS)
워드프레스 블로그의 포스트 목록 페이지는 메인페이지 다음으로 방문자들이 가장 먼저 접하는 공간입니다. 워드프레스 꾸미기를 통해서 이 페이지의 디자인을 개선하면 사용자 경험을 크게 향상시킬 수 있습니다.
이번 포스트에서는 간단한 CSS 코드를 적용하여 블로그 페이지의 포스트 목록 모양을 각져서 딱딱한거 보다 조금 더 심미성 있게 라운드 모서리로 바꾸는걸 알려드릴께요. 거기다가 마우스를 올렸을 때 그림자 효과가 발생하는 더욱 매력적으로 보이는 방법을 소개합니다.
워드프레스 꾸미기 적용 전: 딱딱한 사각형 디자인
워드프레스를 꾸미기 전에는 위 그림처럼 기본적으로 포스트 목록은 단순한 사각형 모양으로 표시됩니다. 이러한 디자인은 깔끔하지만, 때로는 너무 딱딱하고 밋밋해 보일 수 있습니다. 경우에 따라서는 각 포스트 항목 간의 구분이 그렇게 명확하지 않아 사용자들이 개별 포스트를 인식하는 데 어려움을 겪을 수 있습니다.
워드프레스에 CSS 적용하는 방법
CSS를 적용하기 전에, 워드프레스에서 CSS를 추가하는 방법을 알려드리도록 하겠습니다. 그 경로는 다음과 같습니다.
- 워드프레스 관리자 페이지에 로그인합니다.
- 왼쪽 메뉴에서 “외모” 또는 “모양”을 클릭합니다.
- “사용자 정의” 또는 “꾸미기”를 선택합니다.
- “추가 CSS” 섹션을 찾아 클릭합니다.
- 여기에 CSS 코드를 입력합니다.(그 코드는 아래에 있습니다.)
- “공개” 또는 “게시” 버튼을 클릭하여 변경 사항을 적용합니다.
이 방법을 사용하면 테마 파일을 직접 수정하지 않아도 되며, 테마 업데이트 시에도 변경 사항이 유지됩니다.
CSS 코드 적용하기
다음 CSS 코드를 위에서 말한대로 워드프레스의 사용자 정의-추가CSS 섹션에 추가하여 포스트 목록의 디자인을 개선할 수 있습니다. 아래 코드를 복사해서 위에서 알려준 경로대로 이동해서 복붙합니다.
/* 개별 포스트 박스를 둥글게 설정하고, 내용이 넘치지 않도록 처리 */
.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 퍼짐) */
}위 코드에서 border-radius: 10px 이 라인에서 숫자를 조정해서 곡률을 변경할 수 있습니다. 아래 그림에서는 이 숫자를 5로 설정한 결과로 나타난 둥근 모서리입니다.
적용 후: 부드럽고 세련된 디자인
이 CSS 코드를 적용한 후, 포스트 목록의 각 항목은 다음과 같은 변화를 보입니다. 혹시 왼쪽 포스트 모양과 오른쪽 포스트 모양의 차이가 느껴지시나요? 오른쪽은 마우스를 포스트 목록에 올려서 확대 및 그림자 효과가 나타난 상태입니다.
- 둥근 모서리: 각 포스트 박스의 모서리가 둥글게 처리되어 부드러운 느낌을 줍니다.
- 그림자 효과: 살짝 들어간 그림자로 각 포스트가 페이지에서 돋보이게 됩니다.
- 호버 효과: 마우스를 포스트 위에 올리면 약간 확대되고 그림자가 강조되어 상호작용성이 향상됩니다.
- 부드러운 전환: 모든 스타일 변화가 부드럽게 적용되어 시각적으로 매끄러운 경험을 제공합니다.
이러한 변화로 인해 포스트 목록 페이지는 더욱 현대적이고 세련된 모습으로 탈바꿈합니다. 그리고 각 포스트 항목이 명확히 구분되어 사용자들이 콘텐츠를 더 쉽게 탐색할 수 있게 됩니다. 또한, 호버 효과를 통해 사용자와의 상호작용이 증가하여 더 유저프렌들리한 경험을 제공합니다.
결론
간단한 CSS 코드 몇 줄로 워드프레스 블로그의 포스트 목록을 정말 멋지게 개선할 수 있었습니다. 이러한 시각적 개선은 단순히 미적인 측면뿐만 아니라 사용자 경험과 직결되어 블로그의 전반적인 품질을 높이는 데 기여합니다. 여러분도 이런 CSS 코드 적용방법으로 더욱 매력적이고 사용자 친화적인 디자인으로 방문자들을 맞이해보세요.
참고로, 또 다른 팁을 알려드릴께요. 모두 주목! 눈에 띄는 버튼 애니메이션 비법 공개(feat. 워드프레스) 포스트를 톻해서 포스트에서 사용하는 버튼을 예쁘게 꾸며 보시길 바랍니다.
# 코드 세부해설
/* 개별 포스트 박스를 둥글게 설정하고, 내용이 넘치지 않도록 처리 */ .post {이 줄은 ‘.post’ 클래스를 가진 요소에 대한 스타일을 정의합니다. 주로 블로그 포스트를 나타내는 요소에 적용됩니다.
border-radius: 10px; /* 모서리를 둥글게 만듦 (10px 곡률) */이 속성은 요소의 모서리를 10픽셀 반경으로 둥글게 만듭니다. 이로 인해 사각형 모서리가 부드러운 곡선으로 변합니다.
overflow: hidden; /* 내용이 박스 경계선을 넘어가지 않도록 설정 */이 속성은 요소 내부의 콘텐츠가 정의된 경계를 벗어나지 않도록 합니다. 특히 둥근 모서리와 함께 사용될 때 중요합니다.
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 박스에 부드러운 그림자를 추가 (0px X축, 4px Y축, 8px 퍼짐) */이 줄은 요소에 그림자 효과를 추가합니다. 수평 오프셋은 0, 수직 오프셋은 4px, 흐림 정도는 8px이며, 검은색의 10% 불투명도를 가집니다.
transition: all 0.3s ease-in-out; /* 모든 스타일 변경을 부드럽게 0.3초 동안 처리 */ }이 속성은 모든 스타일 변경이 0.3초 동안 부드럽게 진행되도록 설정합니다. ‘ease-in-out’ 타이밍 함수는 변화가 천천히 시작되어 빨라졌다가 다시 천천히 끝나도록 합니다.
/* 포스트 박스에 마우스를 올렸을 때의 스타일 */ .post:hover {이 선택자는 사용자가 마우스를 ‘.post’ 요소 위에 올렸을 때 적용될 스타일을 정의합니다.
transform: scale(1.02); /* 박스 크기를 약간 확대 (1.02배) */이 속성은 요소의 크기를 원래 크기의 1.02배로 확대합니다. 이로 인해 마우스를 올렸을 때 요소가 살짝 커지는 효과가 생깁니다.
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* 그림자를 더 뚜렷하게 변경 (6px Y축, 12px 퍼짐) */ }이 줄은 마우스 오버 시 그림자를 더 강조합니다. 수직 오프셋이 6px로 증가하고, 흐림 정도는 12px로 증가하며, 불투명도도 15%로 높아집니다.
