폰트 요소(Font)

모두 잘 아시겠지만 글을 쓰는 기능의 요소 입니다.

간단한 기능이지만 웹제작 상 폰트만으로 디자인표현도 가능하고

어떻게 사용하냐에 따라 SEO에 영향을 주기도 합니다.

전반적 폰트메뉴

폰트요소를 올리고 폰트위를 클릭하면 폰트메뉴바가 생성됩니다.

전체 폰트 메뉴는

1. 별모양- AI로 문장 만들기(한글가능)

2.텍스트 스타일 전체,텍스트 추가 기능

3. 색상관련 기능

4. 문장 정렬

5. 순번매기기

6. 링크걸기

7. 기본설정

8. 문장복사

9. 휴지통버리기






와 같습니다.

텍스트 스타일

텍스트 스타일 전체 메뉴

위 메뉴를 보면 일반적인 워드나 문자를 사용하는 메뉴에서는 모두 동일하게 볼 수 있는

메뉴 내용입니다. 그 중에서 좀 다른 점이 있다면

우축 윗 부분에 Heading 1 이라고 되어 있는 부분인데

그건 HTML 문서형식 상 현재 글자의 역할을 정확하게 표시한 부분입니다.

이는 SEO에서 역할을 하게 되고 전체 페이지에 표현된 글자에

각각 글자의 역할이 무엇인지 표시 되어 있을때 더 좋은 SEO가 이루어졌다고 합니다

그 외 스타일 설정은 기타 다른 설정과 동일합니다.

새 글꼴 추가

텍스트 스타일 하단에 스타일 새 글꼴 추가의 + 버튼을 클릭하면

먼저 위와 같은 팝업창이 열립니다 일반적으로 한글을 추가한다면

맨 오른쪽 업로드 버튼을 클릭해야 합니다.

요소 추가 범위

업로드 시 나오는 팝업 모양

먼저 추가 팝업이 나오면 내가 사용할 글꼴이름을 적습니다.

원글자의 이름을 적지만 내가 알아보기 쉽게 적어도 됩니다.

일반적으로 한글의 경우 Pretendard 글자를 많이 사용하며 고딕 모양의 글자로

좌우균형감이 좋지만 일반적으로 나눔고딕이나 노트산스와 완전 같이 써보지 않은 한

일반적으로 잘 구분하지 못합니다.

그럼에도 프리텐다드 글자체를 사용하는 건 일반 페이지에서 깔끔한 느낌을 주기 때문입니다.

그리고 우측에 계속 버튼을 클릭하면 글꼴 파일 유형별, 사이즈별로 업로드 하게 됩니다.

글꼴 사이즈별 파일별 추가

글꼴을 웹형식의 폰트로 각각 시이즈별로 업로드해야 합니다

글꼴의 무게는 가장 얇게 부터 검정색(Black)이라고 불리는 가장 두꺼운 정도까지

업로드가 가능합니다. 일반적으로 3단계 굵기인 엑스트라 라이트만 되어도 잘 보이지 않습니다.

만약 얇은 글씨를 보이게 하려면 최소 100정도 사이의 큰 글씨로 표기해야 하는데

일반적인 국내사이트에서는 자주 볼수는 없습니다. 그리고 가장 두꺼운 Black 정도의 두께도

많이 사용하지 않고 7단계 정도의 두꺼운 정도까지 일반적으로 사용한 편입니다.

글꼴은 두께별로 하나씩 설정하고 글꼴 추가 버튼을 클릭해 계속적으로 추가해 줍니다.

파일 형식은 일반적은 TTF,WOFF2가 많이 있는데 폰트도 용량을 가지고 있어

되도록이면 적은 용량의 WOFF2 사용을 권장합니다.

폰트 요소 마무리

폰트 요소의 메뉴는 일반적으로 대체적으로 공통의 UI를 가지고 있어 사용이 편리합니다

일부 전문가들은 폰트 시 헤딩 설정부분 처리하는 것이 가장 기본적인 사용법이라고 합니다

하지만 초보 입장에서는 일반적으로 그런 설정이 쉽지 않습니다.

그런 부분도 중요하지만 사용자가 쉽고 편리하고 제작하고 보여주고자 하는바를

어떻게 처리할 지가 더 중요하다고 생각합니다. 그런 내용들은 강의 부분에 SEO에서

주로 알려드리고 있으니 많은 관심 부탁드립니다.

감사합니다

플러그인에 대해

폴리랭 플러그인 (POLYL...
워드프레스 웹사이트 하나로 한국어, 영어, 일본어 등 여러 언어를 동시에 지원하는 다...
스마트 슬라이더 3 플러그인...
웹사이트 첫 화면의 메인 비주얼 배너나 이미지 슬라이드를 코딩 없이 전문 디자이너 수...
요스트SEO 플러그인(Yoa...
내 웹사이트와 블로그 글이 구글, 네이버 등 주요 검색엔진 결과 상위에 노출될 수 있...

참고 사이트 소개

SVG Repo
웹사이트를 제작할 때 메뉴 아이콘, 버튼 심볼, 서비스 특징을 설명하는 일러스트는 방...
리무브비지(Remove BG...
웹사이트를 제작할 때 상품 사진, 인물 프로필, 브랜드 로고를 깔끔하게 배치하려면 불...
캔바(Canva)
웹사이트를 만들 때 가장 큰 난관 중 하나는 로고, 메인 비주얼 배너, 블로그 썸네일...