워드프레스 사용자를 위한 17가지 시간 절약 CSS 팁

게시 됨: 2023-03-13

WordPress는 웹사이트를 디자인하고 맞춤화할 수 있는 무한한 가능성을 제공합니다. 이 기사에서는 헤더 스타일 지정에서 글꼴 조정에 이르기까지 WordPress 사용자를 위한 몇 가지 실용적인 CSS 팁을 공유합니다.

WordPress는 미리 만들어진 많은 테마와 템플릿을 제공하지만 때로는 문제를 직접 처리하고 CSS로 사용자 정의해야 합니다.

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

"'더보기' 버튼을 제거하려면 어떻게 해야 하나요?"
"이 링크의 색상을 어떻게 변경할 수 있습니까?"
"이 링크를 클릭할 수 없게 만들면서 페이지에 텍스트를 유지하려면 어떻게 해야 합니까?"

… 그런 다음 웹 사이트에 대한 몇 가지 유용한 CSS 요령을 배우려면 계속 읽으십시오.

이 자습서에서는 다음을 다룹니다.

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

워드프레스 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 추가하거나 코드 없이 실험하여 코드가 작동하는지 확인하십시오. 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 선택기는 콘텐츠가 고정 헤더로 덮이지 않도록 페이지 상단에 여백을 추가하는 데 사용됩니다.

섹션에 배경색 추가

웹 사이트 섹션에 배경색을 추가하고 싶습니까? 그런 다음 다음 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 selector는 양식의 다양한 입력 필드의 스타일을 지정하는 데 사용됩니다. 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를 추가하는 방법 – 이 기사에서는 내장된 사용자 정의 프로그램과 플러그인을 모두 사용하여 WordPress 웹 사이트에 사용자 지정 CSS를 추가하는 과정을 안내합니다.
WordPress 사이트 실시간 편집을 위한 무료 CSS 플러그인 – 이 기사에서는 WordPress 웹사이트를 실시간으로 편집할 수 있는 몇 가지 무료 CSS 플러그인을 나열하여 실시간으로 CSS 변경 효과를 보다 쉽게 확인할 수 있습니다.
WordPress를 위한 14가지 멋진 CSS 애니메이션 도구 – CSS를 사용하여 WordPress 웹 사이트에 애니메이션을 추가하려는 경우 이 기사에서 사용할 수 있는 몇 가지 멋진 도구를 나열합니다.
CSS를 사용하여 WordPress 사이트에 석조 및 그리드 레이아웃 추가 – 이 기사에서는 CSS를 사용하여 WordPress 웹사이트에 석조 및 그리드 레이아웃을 추가하여 시각적으로 더 매력적인 디자인을 만드는 방법을 설명합니다.
WordPress를 위한 깔끔한 CSS 코딩을 위한 25가지 전문가 팁 – CSS 코드의 깔끔함과 가독성을 개선하려는 경우 이 기사에서 이를 위한 25가지 전문가 팁을 제공합니다.
CSS 작업 흐름 개선을 위한 25가지 전문가 팁 – CSS 전처리기 사용부터 브라우저 개발자 도구를 사용하여 코드 디버깅에 이르기까지 CSS 작업 흐름을 개선하기 위한 팁입니다.

자세한 내용을 알아보고 오늘 WordPress 웹사이트 개선을 시작하려면 링크를 클릭하십시오.

기여자

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

***

참고: 외부 출처의 기사는 허용되지 않습니다. 그러나 WPMU DEV 회원은 Blog XChange를 통해 블로그의 자습서 및 기사에 대한 아이디어와 제안을 제공할 수 있습니다.

그 과정에서 배운 멋진 CSS 트릭을 놓쳤나요? 우리는 의견에서 그들에 대해 배우고 싶습니다!