DIY 웹사이트 소유자를 위한 간단한 CSS 팁

WordPress의 가장 큰 이점 중 하나는 코딩 지식이 거의 또는 전혀 없이도 아름답고 매력적인 웹사이트를 만들 수 있다는 것입니다. 수백 가지의 전문적인 테마와 유연한 드래그 앤 드롭 방식의 블록 편집기로 DIY 웹사이트 소유자를 위한 탁월한 솔루션입니다.

그러나 한 단계 더 나아가 보다 심층적인 시각적 사용자 지정을 만들고 싶다면 어떻게 해야 할까요? CSS는 웹사이트의 모양을 변경하는 가장 빠른 방법 중 하나입니다.

CSS 란 무엇입니까?

CSS(Cascading Style Sheets)는 색상, 글꼴, 여백, 크기 등 웹사이트의 레이아웃과 시각적 요소를 지정합니다. 몇 가지 CSS 기본 사항으로 모든 페이지와 게시물의 모양을 변경하거나 개별 부분을 다듬고 다듬을 수 있습니다. 일회성 변경을 수행합니다.

기본 CSS 구문은 다음과 같습니다.

선택기 는 제목, 단락, 페이지, 이미지, 링크 등 스타일을 지정하려는 요소입니다.

속성 은 변경하려는 범주입니다(예: 글꼴 색상, 크기, 테두리 또는 배경). 각 선택기에 여러 속성을 적용할 수 있습니다.

값 은 특정 색상, 특정 글꼴 크기, 테두리 너비의 정확한 크기 등 속성을 정의합니다.

형식에 유의하십시오. 속성과 값은 콜론으로 구분되며 중괄호 안에 포함됩니다. 각 값 뒤에는 세미콜론이 옵니다.

실제로 <h1> 태그인 위의 헤드라인 색상을 검정색에서 주황색으로 변경하려면 다음을 사용합니다.

• 선택기: h1
• 속성: 색상
• 값: 주황색

사이트에 CSS를 적용하는 방법

CSS 경험이 많지 않아도 괜찮습니다! 기본에 대한 기본적인 이해를 통해 많은 것을 성취할 수 있습니다. 그리고 Jetpack의 Custom CSS 기능을 사용하면 테마 파일을 수정하거나 웹사이트를 깨는 것에 대해 걱정할 필요가 없습니다.

사용자 정의 CSS를 활성화하려면 사이트 대시보드에서 Jetpack → 설정 → 쓰기 로 이동합니다. 테마 향상 섹션까지 아래로 스크롤하고 CSS 사용자 정의 패널 향상 옵션을 토글합니다.

CSS를 추가하려면 모양 → 사용자 정의 → 추가 CSS 로 이동합니다. 여기에 추가하려는 실제 CSS를 입력합니다. 이를 돕기 위해 Jetpack의 CSS 편집기는 색상을 사용하여 선택기, 속성 및 값을 쉽게 구분할 수 있도록 합니다.

CSS를 추가하거나 편집할 때 변경 사항을 저장하기 전에 미리 볼 수 있으므로 실제 웹 사이트에 적용하기 전에 변경 사항이 어떻게 보일지 정확히 알 수 있습니다. Jetpack은 마지막 25개의 CSS 수정본을 저장하므로 새로운 디자인이 마음에 들지 않으면 이전 디자인으로 되돌릴 수 있습니다. 맞춤 CSS 사용에 대해 자세히 알아보세요.

CSS로 사이트를 맞춤설정하는 5가지 방법

웹사이트의 모든 단일 항목에는 선택기가 있으므로 CSS를 사용하여 거의 모든 것을 변경할 수 있습니다. 선택기를 찾는 방법을 배우고 싶다면 이것은 훌륭한 튜토리얼입니다. 하지만 CSS가 이미 제공된 상태에서 지금 당장 할 수 있는 5가지 변경 사항이 있습니다.

타이포그래피

가장 일반적인 CSS 사용 중 하나는 사이트 타이포그래피 또는 글꼴의 스타일을 지정하는 것입니다. 사이트 전체에서 제목(제목 1, 제목 2 등)의 색상과 크기를 모두 변경하려면 이 코드를 사용하고 원하는 대로 값을 수정합니다.

위의 예는 제목 1을 수정합니다. 제목 3과 같은 다른 제목의 색상과 글꼴 크기를 변경하려면 h1 선택기를 h3 으로 바꾸고 크기와 색상을 적절하게 조정합니다.

여러 제목의 색상을 변경하려면 선택기를 쉼표로 구분합니다.

더 큰 효과를 위해 모든 제목을 대문자로 만들려면 다음을 사용하세요.

연결

하이퍼링크는 사이트 방문자가 클릭할 수 있는 텍스트를 즉시 알 수 있도록 일반 텍스트와 구별되어야 합니다. 색상을 수정하고 밑줄을 추가하여 링크를 돋보이게 만드세요.

(링크에 밑줄을 긋고 싶지 않으세요? 아래의 "text-decoration: underline;"을 삭제하세요.)

누군가가 링크를 가리킬 때 링크의 색상이 변경되도록 하려면 선택기에 ":hover"를 추가하세요.

기울기

블로그 게시물과 페이지에서 글머리 기호 목록을 많이 사용하는 경우 약간의 CSS를 사용하여 나머지 콘텐츠와 더 두드러지게 만드십시오.

글머리 기호를 원으로 만들고 글꼴 두께, 색상 및 크기를 변경하려면 다음 코드를 사용하십시오.

이러한 속성 중 하나만 변경하려는 경우 수정하려는 항목과 관련된 줄만 포함합니다.

더 많은 옵션을 원하십니까? CSS-Tricks.com은 추가 팁 및 단축키와 함께 목록에 대한 모든 스타일 선택(글머리 기호에 정사각형 또는 이미지 사용과 같은)을 설명합니다.

메뉴 항목

많은 테마가 여러 기본 메뉴 옵션을 제공하므로 사이트에 가장 적합한 것을 선택할 수 있습니다. 그러나 메뉴 스타일을 더 사용자 정의하려면 어떻게 해야 합니까?

위의 예에서 우리는 CSS를 사용하여 메뉴 항목에 사용자 정의 녹색 배경을 추가하고 사용자가 각 항목 위에 마우스를 올리면 텍스트 색상을 변경합니다.

사이드바 위젯

사이드바 위젯은 유용한 콘텐츠를 보여주는 좋은 방법이므로 사이트의 나머지 부분에서 눈에 띄도록 할 수 있습니다. 다음 코드를 사용하여 사이드바 위젯 뒤에 배경을 추가하고 텍스트 주위에 패딩(여분 공간)을 추가합니다.

전체 사이트 대신 특정 페이지에 CSS 적용:

위의 모든 CSS 스니펫은 사이트 전체에 적용되며 모든 페이지와 해당 항목이 표시되는 모든 위치에서 해당 항목을 수정합니다. 하나의 특정 페이지나 게시물에만 CSS를 적용하고 싶다면?

WordPress는 각 페이지를 할당하고 WordPress 대시보드에서 찾을 수 있는 고유한 ID를 게시합니다.

1. 사용자 지정하려는 페이지 또는 게시물로 이동하고 대시보드 상단의 검은색 막대에서 페이지 편집 을 클릭합니다.
2. URL 표시줄에서 "?post=74"와 같은 것을 찾습니다. 수
   그러나 "74"는 게시물 또는 페이지 ID에 따라 변경됩니다.

특정 페이지 또는 게시물에 CSS를 적용하려면 ".page-id-"와 함께 CSS에 번호를 추가하세요. 이 페이지에서만 헤더 1 글꼴 색상을 변경하려면 다음을 사용합니다.

기억하십시오: 미리보기는 당신의 친구입니다!

CSS에 대한 경험이 많지 않은 경우 사이트를 엉망으로 만들 수 있는 변경 작업에 대해 긴장할 수 있습니다. 괜찮아요! 편집할 때 변경 사항의 미리보기가 실시간으로 나타납니다.

코드를 가지고 놀고 원하는 대로 수정하십시오. 업데이트된 CSS 모양이 만족스러우면 저장 및 게시 를 클릭하세요!

변경 사항을 저장할 때마다 기록하는 CSS 기록 기능도 있습니다. 즉, 마음이 바뀌면 빠르게 되돌릴 수 있습니다. 이렇게 하려면 사용자 지정 프로그램 하단에서 전체 기록 보기 를 클릭합니다. 되돌리려는 날짜와 시간을 선택하고 이 개정판 복원 버튼을 클릭합니다.

추가 CSS 리소스

• 16진수 코드는 글꼴이나 배경을 수정할 때 사용할 색상을 지정합니다. 어떤 것을 사용해야 할지 잘 모르겠다면 HTML 색상 코드가 훌륭한 솔루션을 제공합니다. 색상 선택기를 탐색하여 완벽한 음영을 찾은 다음 생성된 16진수 코드를 복사하여 붙여넣습니다.
• CSS-Tricks.com은 초보자부터 전문가까지 다양한 CSS 코드 스니펫을 제공합니다. 튜토리얼, 비디오 및 가이드를 찾아 더 자세히 알아볼 수도 있습니다.
• W3Schools는 CSS 예제 및 연습을 위한 편리한 리소스입니다.
• 워드프레스닷컴은 CSS 기본 사항 및 미디어 쿼리를 사용하여 특정 장치를 기반으로 CSS를 설정하는 방법에 대한 정보를 제공합니다.
• Upwork.com은 CSS 프로젝트를 도울 수 있는 프리랜스 전문가를 제공하는 WordPress 파트너입니다.

WordPress 사이트 사용자 정의 시작

기본 CSS를 배우는 가장 좋은 방법은 실험을 시작하는 것입니다. 위에 나열된 모든 코드는 필요에 맞게 사용자 정의하거나 조정할 수 있습니다. 기본으로 사용한 다음 색상 전환, 글꼴 크기 변경 또는 원하는 기타 수정을 시작하십시오!

Jetpack의 사용자 정의 CSS 편집기를 사용하면 미리 보기 도구 및 롤백 기능 덕분에 사이트 손상에 대한 걱정 없이 사용자 정의에 먼저 뛰어들 수 있습니다. 추가 보호를 위해 실시간으로 작업을 자동으로 백업하고 원 클릭 복원을 포함하는 Jetpack 백업을 활성화하십시오.

다른 Jetpack 디자인 기능에 대해 자세히 알아보고 Jetpack Custom CSS를 시작하십시오.