홈페이지에서 글자 정렬과 색깔은 어떻게 바꾸나요?
워드프레스 빌더(Fusion Builder, Elementor,WPBakery 등)로 워드프레스 홈페이지를 구축하게 되면, 글자 크기, 색깔, 글자 굵기와 같은 것들을 원하는 곳에 적용하기가 쉽지 않을 때가 있습니다. 이럴때, 알아두면 좋은 CSS를 정리해보았습니다.
설명에 들어가기에 앞서 CSS는 무엇인가에 대해 간략히 설명하고 진행해보겠습니다.
CSS란?
어려운 말로 설명해봤자 대부분 여느 블로그들에서나 볼 수 있는 글과 같은 내용이기 때문에 이런 설명보다는 좀 더 쉬운 개념으로 이야기해보겠습니다. CSS는 컴퓨터 언어로, HTML이라는 언어로 만들어 놓은 기본 뼈대에 CSS라는 영어 명령어를 치면 우리가 원하는 디자인으로 변환해주는 코드입니다. 예를 들어 내가 글자크기를 변경하고 싶다던가, 글자의 굵기, 색깔을 변경하거나,대문자만 나오게 한다던가, 글자 폰트를 변경하는 모든 행위들이 다 CSS로 이루어 지는 것입니다. 그 외에도 그림의 테두리 주기, 이미지와 글자의 너비와 위치, 애니메이션 효과 등 수많은 디자인 요소를 반영하도록 도와줍니다. 그렇다고 이걸 다 알 필요는 없고, 우리는 홈페이지를 관리하기 위한 간단한 CSS정도만 배워보도록 하겠습니다.
CSS 코드와 뜻
| 순번 | CSS 코드 | 분류 | 기타 | ||
|---|---|---|---|---|---|
| 1 | text-align | left | center | right | |
| 텍스트 정렬 | 왼쪽 | 가운데 | 오른쪽 | ||
| 2 | font-weight | normal | bold | 100 ~ 900 | |
| 폰트 굵기 | 보통 | 굵게 | 100에서 900까지 폰트가 지원하는 굵기 100단위로 기재 | ||
| 3 | font-style | normal | italic | ||
| 폰트 스타일 | 보통 | 기울어지게 | 오른쪽 | ||
| 4 | color | 컬러 예시 보기 | |||
| 폰트 색깔 | 16진수 사용시 앞에 # 기재 | ||||
CSS 사용방법
<p style="CSS코드:분류;">코드를 사용하는 방법은 다음과 같습니다</p>- 1. 일단 작성하시고자 하는 글의 첫부분에 <p>를 써주고, 끝나는 부분에 </p>라고 써줍니다.
- 2. 그리고 앞의 <p>라고 쓰여진 부분에 p다음 한칸 띄고, style="" 이렇게 작성해줍니다.
- 3. style="" 의 따옴표 사이에 먼저 원하는 CSS코드를 작성해주시고,어떻게 보이길 원하는지 위 표의 분류를 작성해줍니다.
- 4. 코드가 끝나는 끝에 세미콜론(;)을 작성해 코드를 마무리해줍니다.
예제) "코드를 사용하는 방법은 다음과 같습니다"라는 텍스트를 가운데 정렬하고, 텍스트 중 "사용하는 방법"은 굵게 표시한 다음 "사용하는 방법"의 글씨 색깔을 토마토 색으로 적용해보시오.
코드 작성 방법
<p style="text-align:center;">코드를 <span style="font-weight:bold;color:tomato;">사용하는 방법</span>은 다음과 같습니다</p>또는
<p style="text-align:center;">코드를 <span style="font-weight:bold;color:#FF6304;">사용하는 방법</span>은 다음과 같습니다</p>위와 같이 작성할 경우 실제 보여지는 텍스트
코드를 사용하는 방법은 다음과 같습니다
이 부분만 알아도 실제로 사용하실 때 더 잘 정리된 글을 작성하실 수 있을 것입니다. 만약 이해가 가지 않는 부분이 있다면 댓글로 작성해주시면 답변 드리겠습니다. 오늘은 글작성시 자주 사용하는 CSS에 대해 알아보았습니다. 다음엔 더 좋은 글로 찾아뵙겠습니다. 감사합니다.
