워드프레스 CSS 코드 추가 (사용자 정의 CSS 코드 한줄로 정렬)

 

 

웹사이트나 블로그를 관리하면서 디자인은 매우 중요한 부분입니다. 워드프레스는 많은 사용자들이 선택하는 플랫폼 중 하나이며, 이를 통해 디자인을 개선하거나 변경하기 위해 CSS 코드를 활용하는 경우가 많습니다. 이 글에서는 워드프레스 css 코드를 사용하는 방법에 대해 살펴보겠습니다.

 

1. 워드프레스 css 코드

워드프레스 테마를 사용하면 디자인이 이미 설정되어 있지만, 맞춤 CSS를 추가하여 테마를 수정할 수 있습니다.
아래는 예시 코드입니다.

 

① 헤더 디자인 수정 예시

/* 헤더 배경색과 높이 조정 */
.site-header {
background-color: #3498db;
height: 80px;
}

/* 헤더 로고 이미지 크기 조정 */
.site-logo img {
width: 150px;
height: auto;
}

/* 헤더 고정 */
.site-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
/* 추가적인 스타일링을 원하는 대로 작성 */
}

 

② 글꼴 및 텍스트 스타일 변경 예시

/* 글꼴 변경 */
body {
font-family: 'Open Sans', sans-serif;
}

/* 제목 스타일 변경 */
.entry-title {
font-size: 28px;
color: #333;
text-transform: uppercase;
}

 

③ 메뉴 및 네비게이션 스타일링 예시

/* 메뉴 배경색과 텍스트 색상 변경 */
.main-navigation {
background-color: #fff;
}

.main-navigation ul li a {
color: #444;
}

/* 메뉴 호버 효과 추가 */
.main-navigation ul li a:hover {
color: #3498db;
}

 

④ 제목 h태그 css

/* h1 태그 스타일 */
h1 {
font-size: 36px;
color: #333;
font-weight: bold;
/* 추가적인 스타일링을 원하는 대로 작성 */
}

/* h2 태그 스타일 */
h2 {
font-size: 30px;
color: #444;
font-weight: bold;
/* 추가적인 스타일링을 원하는 대로 작성 */
}

/* h3 태그 스타일 */
h3 {
font-size: 24px;
color: #555;
font-weight: bold;
/* 추가적인 스타일링을 원하는 대로 작성 */
}

/* h4 태그 스타일 */
h4 {
font-size: 20px;
color: #666;
font-weight: bold;
/* 추가적인 스타일링을 원하는 대로 작성 */
}

/* h5 태그 스타일 */
h5 {
font-size: 18px;
color: #777;
font-weight: bold;
/* 추가적인 스타일링을 원하는 대로 작성 */
}

/* h6 태그 스타일 */
h6 {
font-size: 16px;
color: #888;
font-weight: bold;
/* 추가적인 스타일링을 원하는 대로 작성 */
}

 

⑤ 레이아웃 및 반응형 디자인 예시

/* 레이아웃 조정 */
.content-area {
width: 70%;
float: left;
}

.sidebar {
width: 30%;
float: right;
}

/* 모바일 화면 대응 */
@media screen and (max-width: 768px) {
.content-area, .sidebar {
width: 100%;
float: none;
}
}

 

⑥ 추가적인 커스터마이징 예시

/* 푸터 디자인 변경 */
.site-footer {
background-color: #f2f2f2;
padding: 20px;
text-align: center;
color: #777;
}

2. 반응성 고려와 미디어 쿼리 활용

다양한 화면 크기에 대응하기 위해 CSS에서 미디어 쿼리를 사용하여 반응성을 고려해야 합니다.
예를 들어, 모바일 화면에서 헤더의 높이를 조정하려면 다음과 같이 작성할 수 있습니다.

/* 모바일에서 헤더 높이 조정 예시 */
@media screen and (max-width: 768px) {
.site-header {
height: 100px;
}
}

 

3. 웹 표준 준수와 크로스 브라우징

CSS를 작성할 때 웹 표준을 준수하고, 여러 브라우저에서 일관된 디자인이 보이도록 테스트하는 것이 중요합니다.

 

4. 사용자 정의 CSS 코드 한줄로 정렬

/* 헤더 배경색과 높이 조정 */
.site-header {
    background-color: #3498db;
    height: 80px;
}

/* 헤더 로고 이미지 크기 조정 */
.site-logo img {
    width: 150px;
    height: auto;
}

/* 헤더 고정 */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    /* 추가적인 스타일링을 원하는 대로 작성 */
}

/* 글꼴 변경 */
body {
    font-family: 'Open Sans', sans-serif;
}

/* 제목 스타일 변경 */
.entry-title {
    font-size: 28px;
    color: #333;
    text-transform: uppercase;
}

/* 메뉴 배경색과 텍스트 색상 변경 */
.main-navigation {
    background-color: #fff;
}

.main-navigation ul li a {
    color: #444;
}

/* 메뉴 호버 효과 추가 */
.main-navigation ul li a:hover {
    color: #3498db;
}

/* h1 태그 스타일 */
h1 {
    font-size: 36px;
    color: #333;
    font-weight: bold;
    /* 추가적인 스타일링을 원하는 대로 작성 */
}

/* h2 태그 스타일 */
h2 {
    font-size: 30px;
    color: #444;
    font-weight: bold;
    /* 추가적인 스타일링을 원하는 대로 작성 */
}

/* h3 태그 스타일 */
h3 {
    font-size: 24px;
    color: #555;
    font-weight: bold;
    /* 추가적인 스타일링을 원하는 대로 작성 */
}

/* h4 태그 스타일 */
h4 {
    font-size: 20px;
    color: #666;
    font-weight: bold;
    /* 추가적인 스타일링을 원하는 대로 작성 */
}

/* h5 태그 스타일 */
h5 {
    font-size: 18px;
    color: #777;
    font-weight: bold;
    /* 추가적인 스타일링을 원하는 대로 작성 */
}

/* h6 태그 스타일 */
h6 {
    font-size: 16px;
    color: #888;
    font-weight: bold;
    /* 추가적인 스타일링을 원하는 대로 작성 */
}

/* 레이아웃 조정 */
.content-area {
    width: 70%;
    float: left;
}

.sidebar {
    width: 30%;
    float: right;
}

/* 모바일 화면 대응 */
@media screen and (max-width: 768px) {
    .content-area, .sidebar {
        width: 100%;
        float: none;
    }
}

/* 푸터 디자인 변경 */
.site-footer {
    background-color: #f2f2f2;
    padding: 20px;
    text-align: center;
    color: #777;
}

/* 모바일에서 헤더 높이 조정 예시 */
@media screen and (max-width: 768px) {
    .site-header {
        height: 100px;
    }
}

 

 

CSS는 워드프레스 사용자들에게 디자인을 개선하고 커스터마이징하는 강력한 도구입니다.
그러나 올바른 선택자 사용, 미디어 쿼리를 활용한 반응성 고려, 웹 표준 준수 등을 염두에 두는 것이 중요합니다.
앞서 소개드린 CSS들을 통해 워드프레스 사이트의 디자인을 개선함으로써 사용자들에게 더 나은 시각적 경험을 제공할 수 있습니다.

 

 

워드프레스 목차 플러그인 (쉬운목차_ Easy Table of contents)

워드프레스 목차 플러그인 (쉬운목차_ Easy Table of contents)

 

워드프레스 사이드바 고정 방법 (플러그인, css 코드, JavaScript)

워드프레스 사이드바 고정 방법 (플러그인, css 코드, JavaScript)