HTML에서 배경색깔 바꾸기

HTML에서 <font> 태그를 이용해서 글자 색깔을 바꿀 수 있지만 이 방법은 HTML5에서는 더 이상 지원되지 않는다. 대신, 기초 CSS를 이용해 웹페이지 상에서 다양한 색깔로 글자를 나타내는 방식을 배워볼 것이다. CSS를 사용하면 여러 브라우저에서 모두 호환이 가능하다.

방법 1

방법 1 의 2:

CSS 사용하기

PDF 다운로드

1
HTML 파일을 연다. 글자 색깔을 바꾸는 가장 좋은 방법은 CSS를 이용하는 것이다. 이전 버전의 HTML <font> 은 HTML5에서 지원이 되지 않는다. 따라서 페이지 구성요소를 꾸미는 데 가장 좋은 방법은 CSS를 이용하는 것이다.
- 외부 스타일시트(별도의 CSS 파일)를 이용해 작업이 가능하다. 아래는 외부 스타일 시트를 사용했을 때 HTML 파일의 예시이다.
외부 스타일시트를 사용한다면 이 태그 안에서 스타일 지정이 가능하다.
3
외부 스타일시트를 새로 만드려면 <style>이라고 친다. <style>태그는 <head>태그 안에 있다. <style>태그 안에 있는 CSS로 인해 페이지 상의 여러 요소들을 적용할 수 있다. 모두 마치면, HTML 파일이 아래처럼 보여야 한다.^{[1]X출처 검색하기}
```
<!DOCTYPE html><html><head><style></style></head>
```
4
글자 색깔을 바꾸고 싶은 요소를 입력한다. <style> 섹션을 이용해 페이지 상의 다양한 요소를 지정할 것이다. 예를 들면, 페이지 상 본문의 스타일을 바꾸고 싶다면, 아래처럼 입력한다.
```
<!DOCTYPE html><html><head><style>body {}</style></head>
```
5
그 다음 color: 을 입력한다. 이는 구성요소에 속하는 것이다. color:는 해당 요소에 어떤 글자 색깔을 입힐 것인지를 보여준다. 아래 예를 보자. 이렇게 하면, 본래 지정 요소였던, 모든 본문 글의 글자 색깔을 바꾸게 된다.
```
<!DOCTYPE html><html><head><style>body {color:}</style></head>
```
6
글자 색깔을 친다. 색깔을 입력할 수 있는 방법엔 3가지가 있다. 이름을 치거나, 헥스값을 입력하거나, RGB값을 입력한다. 예를 들어, 파란색을 원한다면, blue, rgb(0, 0, 255), 또는 #0000FF라고 칠 수 있다.
```
<!DOCTYPE html><html><head><style>body {color: red;}</style></head>
```

How.com.vn 한국어: Step 7 여러 요소를 바꾸려면 다른 구분값을 더하면 된다.

페이지 상의 각각 다른 부분의 글자 색깔을 바꾸기위해서 여러 구분값을 사용한다.

<!DOCTYPE html><html><head><style>body {color: red;}h1 {color: #00FF00;}p {color: rgb(0,0,255)}</style></head><body><h1>이 머리글은 녹색으로 변한다</h1><p>이 문단은 파란색으로 변한다</p>이 본문 글자 색깔은 빨간색으로 변한다</body></html>

8
구성 요소를 바꾸는 대신 CSS 클래스를 지정한다. 클래스를 지정한 뒤 원하는 요소에 적용하면 그 즉시 클래스 스타일이 바뀐다. 예를 들면, 아래 파일에서 “.redtext" 클래스를 원하는 구성 요소에 적용시키면, 해당 요소는 곧바로 빨간색으로 변한다.
```
<!DOCTYPE html><html><head><style>.redtext {color: red;}</style></head><body><h1 class=“redtext">이 머리글은 빨간색으로 변한다</h1><p>이 본문은 그대로이다.</p><p class=“redtext">이 본문은 빨간색으로 변한다</p></body></html>
```
광고

방법 2

방법 2 의 2:

인라인 스타일 속성 사용하기

PDF 다운로드

인라인 스타일 속성을 이용해 페이지 상 한 구성 요소의 스타일을 바꿀 수 있다. 스타일 상 한 두가지 변화를 줄 때 매우 유용하다. 하지만, 광범위하게 여러 스타일을 지정할 땐 추천하지 않는다. 복잡한 스타일을 변경할 때는 위에 제시된 방법을 사용하자.^{[2]X출처 검색하기}
2
바꾸고 싶은 구성 요소를 찾는다. 인라인 스타일 속성을 이용해 해당 요소의 글자 색깔을 바꿀 수 있다. 예를 들면, 특정 머리글의 글자 색깔을 바꾸고 싶다면, 파일에서 먼저 이 구성 요소를 찾자.
```
<!DOCTYPE html><html><body><h1>여기가 당신이 바꾸고 싶은 머리글 요소이다</h1></body></html>
```
3
해당 요소에 스타일 속성을 더한다. 바꾸고 싶은 요소의 시작 태그 내부에 style="" 라고 친다.
```
<!DOCTYPE html><html><body><h1 style="">여기가 당신이 바꾸고 싶은 머리글 요소이다</h1></body></html>
```

"" 속성 안에 color: 라고 친다. 예를 들면 아래와 같다.

<!DOCTYPE html><html><body><h1 style="color:">여기가 당신이 바꾸고 싶은 머리글 요소이다</h1></body></html>

5
바꾸고 싶은 색깔을 입력한다. 색깔을 입력할 수 있는 방법엔 세 가지가 있다. 이름을 치거나, 헥스값을 입력하거나, RGB값을 입력한다. 예를 들어, 노란색으로 바꾸고 싶다면, yellow;, rgb(255,255,0);, 또는 #FFFF00;라고 친다.
```
<!DOCTYPE html><html><body><h1 style=“color:#FFFF00;">이 머리글은 이제 노란색이다</h1></body></html>
```
광고