워드프레스에서 글자 크기를 변경하는 것은 웹사이트의 가독성을 향상시키고 디자인을 개선하는 데 중요한 요소입니다. 이 글에서는 기본편집기와 단축키, 추가CSS를 사용해 워드프레스에서 글자 크기를 어떻게 변경하는지 알아보겠습니다.
1. 소제목 글자 크기(폰트 사이즈) 변경 방법
블로그 글에 소제목을 사용하는 것은 몇 가지 중요한 이유가 있습니다:
- 조직화: 소제목은 글의 구조를 명확하게 하여 독자가 내용을 쉽게 이해하고 추적할 수 있게 합니다.
- 가독성 향상: 소제목은 글을 섹션으로 나누어 독자가 원하는 정보를 빠르게 찾을 수 있도록 도와줍니다.
- SEO (검색 엔진 최적화): 검색 엔진은 소제목을 사용하여 글의 주요 내용을 파악하고, 중요한 키워드를 강조하여 검색 결과에서의 가시성을 높입니다.
이러한 이유로, 블로그 글 작성 시 소제목을 적절히 활용하는 것이 좋습니다. 그럼, 소제목의 글자 크기를 변경할 수 있는 3가지 방법을 알아보겠습니다.
1.1. 기본 편집기 사용
- 글 쓰는 곳 위에 보면 편집기 메뉴가 있습니다. 그중 단락(아래 사진 참고) 아이콘을 클릭한 후 제목(북마크 아이콘)을 클릭합니다.
- 헤딩요소라는 회색 글자나 나타나고 글자 크기가 커진 것을 확인 할 수 있습니다.
- 편집기에는 H2로 기본 세팅이 되어 있습니다. H2를 누르면 H3, H4 등으로 변경할 수 있습니다.
1.2. 단축키 사용
편집기를 사용하지 않고 단축키를 사용해 제목 글자 크기를 지정해 주면, 시간을 절약하고, 더 원활하게 글을 쓸 수 있습니다.
- H2: Alt + Shift + 2 또는 ## + 스페이스바
- H3: Alt + Shift + 3 또는 ### + 스페이스바
- H4: Alt + Shift + 4 또는 #### + 스페이스바
- H5: Alt + Shift + 5 또는 ##### + 스페이스바
- H6: Alt + Shift + 6 또는 ###### + 스페이스바
여기서 잠깐! 왜 H1은 없죠?
글에서 H1 태그는 가장 중요한 제목을 나타내는 역할을 합니다(본문 쓰는 곳 위에 있는, 제목을 쓰는 곳이 H1 태그입니다). 이는 검색 엔진이 글의 내용을 분석할 때 중요한 역할을 하며, 글의 주요 제목을 나타내는 데 사용됩니다.
그러나 하나의 글에 H1 태그를 여러 번 사용하면, 검색 엔진이 글의 가장 중요한 내용을 제대로 파악하기 어렵습니다. 검색 엔진은 글의 가장 중요한 내용을 H1으로 인식하므로, H1이 여러 개 존재한다면 어떤 내용이 가장 중요한지 파악하기 어렵습니다. 따라서 한 글에 H1 태그는 제목에 하나만 사용하고, 본문에서는 H2, H3 등의 하위 제목 태그를 사용하는 것이 좋습니다.
또한, H1 태그는 웹 접근성을 높이는 데도 중요한 역할을 합니다. 시각 장애인이나 스크린 리더 사용자 등이 웹 사이트를 이용할 때 해당 태그를 통해 페이지의 구조를 파악하여 문맥을 더 쉽게 이해할 수 있습니다.
따라서, 포스팅에서 H1 태그는 한 번만 사용하는 것이 검색 엔진 최적화 (SEO)에 좋고, 웹 접근성을 높이는 데도 도움이 됩니다.
1.3. 추가 CSS 넣기
- 워드프레스 왼쪽 메뉴에서 디자인을 클릭합니다.
- 중간쯤에 있는 사용자 정의하기를 클릭합니다.
- 가장 아래에 있는 추가 CSS를 클릭합니다.
- 화면의 왼쪽에 숫자와 함께 하얀 공간이 나타납니다. 아래의 코드를 복사하여 붙여넣기 합니다.
h2 {
font-size: 32px;
color: #353535;
}
h3 {
font-size: 28px;
color: #353535;
}
h4 {
font-size: 26px;
color: #353535;
}
h5 {
font-size: 24px;
color: #353535;
}
h6 {
font-size: 22px;
color: #353535;
}
font-size 옆에 있는 숫자를 다르게 입력해서 글자 크기를 바꿀 수 있습니다. 더불어 글의 색상도 바꿀 수 있도록 코드를 만들어 넣어두었습니다. 색의 번호는 아래 링크에서 확인 및 복사하여 바꿀 수 있습니다.
https://www.html-color-codes.info/Korean
5. 마지막으로 코드를 붙여넣기 한 상단에 위치한 발행함 버튼을 눌러 적용시킵니다.
2. 본문 글자 크기(폰트 사이즈) 변경 방법
1.1 기본 편집기
- 글자 크기를 변경할 문장(블록)을 선택하면, 오른쪽 메뉴가 글에서 블록으로 바뀝니다.
- 그중 서체에서 S/M/L/XL로 글자 크기를 변경할 수 있습니다.
- 그 선택사항 오른쪽 위에 조절바 아이콘(파란색 네모)을 클릭하면 본인이 원하는 사이즈를 직접 입력할 수도 있습니다.
1.2 단축키 사용
글을 적는 공간에서 엔터를 치면 기본 본문 글자 크기로 글을 쓰기 때문에 본문 단축키는 많이 쓰이지는 않습니다만, 소제목을 본문 사이즈로 바꾸고 싶을 때 단축키를 활용하면 유용합니다.
- H6: Alt + Shift + 0
1.3 추가 CSS 넣기
소제목과 같은 순서대로 추가 CSS를 엽니다. 그리고 아래의 코드를 복사 및 붙여넣기 하면 됩니다. 참고로 /* 본문 폰트 */ 입력한 코드를 알아볼 수 있도록 추가 설명을 해놓은 것입니다. H태그(헤딩요소, 소제목)의 경우는 알아보기 쉬워서 따로 설명을 안 썼습니다.
/* 본문 폰트 */
p {
font-size: 22px;
color: #353535;
}
마치며
워드프레스에서 글자 크기를 조절하는 것은 웹사이트의 가독성과 사용자 경험을 향상시키는 중요한 요소입니다. 오늘 소개해 드린 기본 편집기의 사용법, 유용한 단축키, 그리고 추가 CSS를 통한 조정 방법을 통해 방문자들이 콘텐츠를 더 쉽게 읽고, 정보를 더 빠르게 소화할 수 있도록 해보세요.
이 글과 함께 보면 좋은 글
워드프레스를 더 쉽게 할 수 있는 방법?
크라우드웨이즈(cloudways)에서 25 달러 크레딧 받고 시작하세요!
저도 사용하고 있는데, 다른 거 신경 쓸 필요없이 글쓰기에 집중할 수 있어 좋아요. 아래의 제 추천인 링크로 들어가시면 25불 혜택 받고 시작하실 수 있어요👍
크라우드웨이즈로 워드프레스 쉽게 시작하기