WordPress 사용자를 위한 17가지 시간 절약 CSS 팁

게시 됨: 2023-03-13

WordPress는 웹사이트를 디자인하고 사용자 정의할 수 있는 무한한 가능성을 제공합니다. 이 글에서는 머리글 스타일 지정부터 글꼴 조정까지 특히 WordPress 사용자를 위한 몇 가지 실용적인 CSS 팁을 공유하겠습니다.

WordPress는 미리 만들어진 테마와 템플릿을 많이 제공하지만 때로는 문제를 직접 해결하고 CSS를 사용하여 사용자 정의해야 하는 경우도 있습니다.

WordPress 사이트에서 작업하면서 다음과 같은 질문을 받은 적이 있다면:

"'자세히 보기' 버튼을 어떻게 제거하나요?"
"이 링크의 색상을 어떻게 바꿀 수 있나요?"
"이 링크를 클릭할 수 없도록 설정하고 페이지에 텍스트를 유지하려면 어떻게 해야 합니까?"

…그런 다음 웹사이트를 위한 몇 가지 유용한 CSS 요령을 알아보려면 계속 읽어보세요.

이 튜토리얼에서는 다음 내용을 다룹니다.

WordPress CSS 팁
1. 요소를 가로 및 세로 중앙에 배치
2. 링크 색상 변경
3. 링크 제거
4. 링크 비활성화(링크는 계속 표시되지만 사용자가 클릭할 수 없음)
5. 마우스를 올리면 링크 색상 변경
6. 스타일 링크
7. 버튼 스타일 지정
8. 섹션의 글꼴 변경
9. 고정 헤더 만들기
10. 그림자 효과로 고정 헤더 만들기
11. 섹션에 배경색 추가
12. 본체 배경색 변경
13. 특정 단어나 문구의 색상 변경
14. 이미지 주위에 테두리 만들기
15. 이미지에 호버 효과 만들기
16. 양식 스타일 지정
17. 반응형 레이아웃 만들기
CSS 기술을 한 단계 더 발전시키세요

WordPress CSS 팁

이 팁을 구현하기 위해 알아야 할 단 두 가지 사항은 다음과 같습니다.

CSS 작동 방식
WordPress에 CSS를 추가하는 방법

참고: CSS는 위험하지 않으므로 실수한 경우 코드를 삭제하거나 수정하면 됩니다. 아무 문제도 발생하지 않습니다 :)

그런 다음 예시와 함께 실용적인 CSS 팁을 직접 살펴보고 자신의 WordPress 사이트에서 시도해 볼 수 있습니다.

요소를 가로 및 세로 중앙에 배치

요소(예: 이미지, 텍스트 또는 div)를 가로 및 세로로 가운데에 배치하려면 다음 CSS 코드를 사용하세요.

.element {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

이 코드에서는 position: relative 속성을 사용하여 가장 가까운 위치의 조상을 기준으로 요소를 배치합니다. top: 50% 및 left: 50% 속성은 요소를 컨테이너의 중앙으로 이동합니다. 마지막으로, transform: translate(-50%, -50%) 속성은 요소를 자체 너비와 높이의 50% 뒤로 이동하여 요소를 수평 및 수직으로 중앙에 배치합니다.

링크 색상 변경

.item-class{
color : blue;
}

흰색, 검정색, 파란색, 빨간색과 같은 색상을 사용할 수 있지만 특정 색상을 사용하고 싶을 수도 있습니다.

이 경우 다음과 같이 할 수 있습니다.

.item-class{
color : #F7F7F7;
}

웹사이트 디자인을 위한 색상 팔레트를 만들고 싶다면 Paletton 도구를 사용해 보세요. 매우 도움이 됩니다!

참고: 요소를 결합하려는 경우 매우 쉽습니다.

예를 들어, 클릭을 비활성화하고 링크를 다시 검은색으로 설정한다고 가정해 보겠습니다.

다음 코드를 사용할 수 있습니다.

.item-class{
pointer-events : none;
color : black;
}

링크 제거

.item-class{
display : none;
}

참고: 때로는 다음과 같이 수업 뒤에 a 넣어야 작동할 수도 있습니다.

.item-class a{
display : none;
}

코드가 작동하는지 확인하려면 a 추가하거나 a 없이 실험해 보세요. CSS를 추가하고 저장한 후 프런트엔드를 확인하세요.

링크 비활성화(링크는 계속 표시되지만 사용자가 클릭할 수 없음)

참고: 이를 위해서는 항상 HTML을 수정하는 것이 더 좋지만, CSS가 더 쉬우거나 가능한 유일한 솔루션인 경우 다음 코드를 사용하십시오.

.item-class{
pointer-events: none;
}

마우스를 올리면 링크 색상 변경

다음 CSS 코드를 사용하면 사용자가 링크 위로 마우스를 가져갈 때 링크 색상이 변경되도록 할 수 있습니다.


a:hover {
color: red;
}

이 코드에서 a:hover 선택기는 사용자가 현재 마우스를 올리고 있는 페이지의 모든 링크를 대상으로 합니다. color: red 속성은 텍스트 색상을 빨간색으로 변경합니다.

스타일 링크

웹사이트의 링크 스타일을 지정하려면 다음 CSS 코드를 사용하세요.


a {
color: #0077cc;
text-decoration: none;
border-bottom: 1px solid #0077cc;
transition: all 0.2s ease-in-out;
}

a:hover {
color: #005299;
border-bottom: 1px solid #005299;
}

이 코드에서 a 선택기는 페이지의 모든 링크 스타일을 지정하는 데 사용됩니다. color 속성은 링크의 색상을 설정하고, text-decoration 속성은 기본 밑줄을 제거합니다. border-bottom 속성은 미묘한 밑줄 효과를 추가합니다. transition 속성은 사용자가 링크 위로 마우스를 가져갈 때 부드러운 전환 효과를 만듭니다. a:hover 선택기는 사용자가 링크 위로 마우스를 가져갈 때 링크 스타일을 지정하는 데 사용됩니다.

버튼 스타일 지정

다음 코드를 사용하여 버튼 스타일을 지정하세요.


.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}

이 코드에서는 버튼 모양을 위한 background-color 및 color 속성, 버튼 크기를 위한 padding 속성, 버튼 위로 마우스를 가져갈 때 마우스 포인터를 변경하는 cursor 속성을 포함하여 다양한 속성을 사용하여 버튼 스타일을 지정합니다.

섹션의 글꼴 변경

다음 CSS 코드를 사용하여 웹사이트 섹션의 글꼴을 변경하세요.


.section {
font-family: Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
}

이 코드에서 font-family 속성은 글꼴을 Arial 또는 유사한 산세리프 글꼴로 설정하고, font-size 속성은 글꼴 크기를 16픽셀로 설정하며, line-height 속성은 텍스트 줄 사이의 간격을 1.5로 설정합니다. 글꼴 크기의 배입니다.

고정 헤더 만들기

사용자가 스크롤할 때 페이지 상단에 고정되는 헤더를 생성하려면 다음 CSS 코드를 사용할 수 있습니다.


.header {
position: fixed;
top: 0;
left:0;
width: 100%;
background-color: #333;
color: #fff;
z-index: 9999;
}

이 코드에서 position: fixed 속성은 헤더를 뷰포트 상단에 고정하고, top: 0 속성은 헤더를 페이지 맨 위에 배치합니다. width: 100% 속성은 헤더가 뷰포트의 전체 너비에 걸쳐 있는지 확인합니다. background-color , color 헤더 스타일을 지정하는 데 사용되며 z-index: 9999 속성은 헤더가 페이지의 다른 모든 요소 위에 표시되도록 합니다.

그림자 효과로 고정 헤더 만들기

사용자가 스크롤할 때 페이지 상단에 고정되는 그림자 효과가 있는 고정 헤더를 만들려면 다음 CSS 코드를 사용하세요.


header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #fff;
z-index: 999;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.content {
padding-top: 100px;
}

이 코드에서는 position: fixed 속성을 사용하여 헤더를 페이지 상단에 고정했습니다. top: 0 및 left: 0 속성은 페이지의 왼쪽 상단에 헤더를 배치합니다. width: 100% 속성은 헤더 너비를 페이지의 전체 너비로 설정합니다. background-color 속성은 헤더의 배경색을 설정하고, z-index 속성은 헤더가 페이지의 다른 요소 위에 표시되도록 합니다. 마지막으로 box-shadow 속성은 헤더에 미묘한 그림자 효과를 추가합니다. .content 선택기는 콘텐츠가 고정 헤더에 의해 가려지지 않도록 페이지 상단에 패딩을 추가하는 데 사용됩니다.

무료 전자책

수익성 있는 웹 개발 비즈니스를 위한 단계별 로드맵입니다. 더 많은 클라이언트를 확보하는 것부터 미친 듯이 확장하는 것까지.

무료 전자책

문제 없이 다음 WP 사이트를 계획, 구축 및 시작하세요. 우리의 체크리스트는 프로세스를 쉽고 반복 가능하게 만듭니다.

섹션에 배경색 추가

웹사이트 섹션에 배경색을 추가하고 싶으신가요? 그런 다음 다음 CSS 코드를 사용하십시오.


.section {
background-color: #f2f2f2;
padding: 20px;
}

이 코드에서 background-color: #f2f2f2 속성은 배경색을 밝은 회색으로 설정하고 padding: 20px 속성은 섹션 내 콘텐츠 주위에 20픽셀의 공간을 추가합니다.

본체 배경색 변경

웹사이트 본문의 배경색을 변경하려면 다음 코드를 추가하세요.


body {
background-color: #f5f5f5;
}

이 코드에서 background-color 속성은 배경색을 밝은 회색으로 설정합니다.

특정 단어나 문구의 색상 변경

텍스트 블록 내의 특정 단어나 문구의 색상을 변경하려면 다음 CSS 코드를 사용할 수 있습니다.


p span {
color: red;
}

이 코드에서 p span 선택기는 p 요소 내에 나타나는 모든 span 요소를 대상으로 합니다. 그런 다음 다음과 같이 HTML의 span 요소로 대상으로 삼으려는 단어나 문구를 래핑할 수 있습니다.

<p>Lorem ipsum dolor sit amet, <span>consectetur adipiscing elit</span>. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

이렇게 하면 "consectetur adipiscing elit"라는 문구가 빨간색으로 표시됩니다.

이미지 주위에 테두리 만들기

이미지 주위에 테두리를 추가하는 방법은 다음과 같습니다.


img {
border: 2px solid #ccc;
}

이 코드에서 border 속성은 테두리의 너비, 스타일, 색상을 설정합니다. 2px 값은 테두리 너비를 2픽셀로 설정하고, solid 스타일을 실선으로 설정하며, #ccc 색상을 밝은 회색으로 설정합니다.

이미지에 호버 효과 만들기

이미지에 호버 효과를 만들려면 다음 코드 조각을 사용하세요.


img:hover {
opacity: 0.8;
}

이 코드에서 img:hover 선택기는 사용자가 이미지 위로 마우스를 가져가면 해당 이미지를 타겟팅합니다. opacity 속성은 이미지의 투명도를 설정합니다. 이 경우 값은 0.8로 설정되어 사용자가 이미지 위로 마우스를 가져가면 이미지가 약간 투명해집니다.

양식 스타일 지정

다음 CSS 코드를 사용하여 웹사이트의 양식 스타일을 지정하세요.


form {
background-color: #f2f2f2;
padding: 20px;
border-radius: 5px;
}

form label {
display: block;
margin-bottom: 10px;
}

form input[type="text"], form input[type="email"], form textarea {
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: none;
border-radius: 3px;
box-shadow: 0 0 5px #ccc;
}

form input[type="submit"] {
background-color: #4CAF50;
border: none;
color: #fff;
padding: 10px 20px;
border-radius: 3px;
cursor: pointer;
}

이 코드에서는 양식의 전체 모양에 대한 background-color , padding 및 border-radius 속성을 포함하여 다양한 속성을 사용하여 양식의 스타일을 지정합니다. form label 선택기는 각 양식 필드와 연관된 레이블의 스타일을 지정하는 데 사용됩니다. form input[type="text"], form input[type="email"], form textarea 선택기는 양식의 다양한 입력 필드 스타일을 지정하는 데 사용됩니다. form input[type="submit"] 선택기는 제출 버튼의 스타일을 지정하는 데 사용됩니다.

반응형 레이아웃 만들기

다양한 화면 크기에 맞춰 조정되는 반응형 레이아웃을 생성하려면 다음 CSS 코드를 사용하세요.


@media (max-width: 768px) {
/* Styles for screens smaller than 768px */
.container {
width: 100%;
}

.menu {
display: none;
}

.mobile-menu {
display: block;
}
}

@media (min-width: 769px) {
/* Styles for screens larger than 768px */
.container {
width: 768px;
margin: 0 auto;
}

.menu {
display: block;
}

.mobile-menu {
display: none;
}
}

이 코드에서는 @media 규칙을 사용하여 다양한 화면 크기에 맞게 다양한 스타일을 지정합니다. 첫 번째 @media 규칙은 최대 너비가 768px인 화면을 대상으로 하고, 두 번째 @media 규칙은 최소 너비가 769px인 화면을 대상으로 합니다. 각 @media 규칙 내의 다양한 선택기는 화면 크기에 따라 페이지의 레이아웃과 모양을 조정하는 데 사용됩니다.

CSS 팁 하나 더…

모든 작업을 올바르게 수행했는데도 코드가 작동하지 않을 수 있습니다. 이는 귀하의 코드와 다른 내용을 나타내는 CSS 코드가 이미 있기 때문일 수 있습니다.

이를 재정의하려면 다음과 같이 !important 추가하세요.

.item-class{
pointer-events: none !important;
}

다음은 CSS를 사용하여 WordPress 웹사이트를 향상할 수 있는 실용적인 방법의 몇 가지 예입니다.

CSS를 사용하면 웹사이트의 모양을 사용자 정의할 수 있는 가능성이 사실상 무한합니다. 이러한 팁을 배우고 적용하면 시각적으로 매력적일 뿐만 아니라 더 나은 사용자 경험을 위해 최적화된 웹 사이트를 만들 수 있습니다.

CSS 기술을 한 단계 더 발전시키세요

초보자이든 노련한 전문 웹 개발자 또는 웹 디자이너이든 관계없이 WordPress에서 CSS를 사용하는 방법에 대해 더 깊이 알고 싶다면 다음 추가 CSS 튜토리얼이 지식과 기술을 확장하는 데 도움이 될 것입니다.

WordPress용 CSS 학습을 위한 10가지 간단한 팁 – 특히 WordPress에서 사용할 CSS를 배우고자 하는 초보자를 위한 실용적인 팁입니다. CSS 구문 이해부터 CSS 프레임워크 사용까지 모든 내용을 다룹니다.
WordPress용 CSS 학습 및 참조 – WordPress에서 특별히 CSS를 학습하고 참조하는 방법에 대한 포괄적인 가이드입니다. WordPress Customizer 사용, CSS 선택기 이해, 하위 테마 작업과 같은 주제를 다룹니다.
CSS 조각과 영감을 찾을 수 있는 최고의 사이트 7개 – CSS 코드에 대한 영감을 찾고 계십니까? 이 문서에는 자신의 WordPress 웹사이트에서 사용할 수 있는 CSS 조각과 예제를 제공하는 7개의 웹사이트가 나열되어 있습니다.
CSS를 사용하여 WordPress 웹 사이트에서 이미지 스타일을 지정하는 방법 – 이미지는 모든 웹 사이트에서 중요한 부분이며 이 문서에서는 CSS를 사용하여 이미지 스타일을 지정하는 방법에 대한 팁을 제공합니다. 테두리 추가, 이미지 크기 및 정렬 변경 등의 방법을 배우게 됩니다.
WordPress 사이트에 사용자 정의 CSS를 추가하는 방법 – 이 문서에서는 내장된 Customizer와 플러그인을 모두 사용하여 WordPress 웹 사이트에 사용자 정의 CSS를 추가하는 과정을 안내합니다.
WordPress 사이트 실시간 편집을 위한 무료 CSS 플러그인 – 이 문서에는 WordPress 웹 사이트를 실시간 편집할 수 있는 일부 무료 CSS 플러그인이 나열되어 있어 CSS 변경 사항의 효과를 실시간으로 더 쉽게 확인할 수 있습니다.
14 WordPress를 위한 멋진 CSS 애니메이션 도구 – CSS를 사용하여 WordPress 웹 사이트에 일부 애니메이션을 추가하려는 경우 이 기사에는 이를 수행하는 데 사용할 수 있는 몇 가지 멋진 도구가 나열되어 있습니다.
CSS를 사용하여 WordPress 사이트에 벽돌 및 그리드 레이아웃 추가 – 이 문서에서는 CSS를 사용하여 WordPress 웹 사이트에 벽돌 및 그리드 레이아웃을 추가하여 시각적으로 더욱 매력적인 디자인을 만드는 방법을 설명합니다.
WordPress용 깔끔한 CSS 코딩을 위한 25가지 전문가 팁 – CSS 코드의 청결성과 가독성을 향상시키고 싶다면 이 기사에서 이를 위한 25가지 전문가 팁을 제공합니다.
CSS 작업 흐름 개선을 위한 25가지 전문가 팁 – CSS 전처리기 사용부터 브라우저 개발자 도구를 사용하여 코드 디버깅까지 CSS 작업 흐름을 개선하기 위한 팁입니다.

지금 바로 링크를 클릭하여 자세한 내용을 알아보고 WordPress 웹사이트 개선을 시작해 보세요.

기여자

이 게시물과 위에 사용된 몇 가지 CSS 예제에 대한 아이디어를 제공한 Incensy의 WPMU DEV 회원 Antoine 에게 감사드립니다. 자세한 내용은 Incensy의 대행사 파트너 프로필을 확인하세요.

그 과정에서 알게 된 멋진 CSS 트릭을 놓쳤나요? 댓글을 통해 이에 대해 알아보고 싶습니다!