PDF 다운로드
PDF 다운로드
HTML에서 <font> 태그를 이용해서 글자 색깔을 바꿀 수 있지만 이 방법은 HTML5에서는 더 이상 지원되지 않는다. 대신, 기초 CSS를 이용해 웹페이지 상에서 다양한 색깔로 글자를 나타내는 방식을 배워볼 것이다. CSS를 사용하면 여러 브라우저에서 모두 호환이 가능하다.
단계
-
HTML 파일을 연다. 글자 색깔을 바꾸는 가장 좋은 방법은 CSS를 이용하는 것이다. 이전 버전의 HTML <font> 은 HTML5에서 지원이 되지 않는다. 따라서 페이지 구성요소를 꾸미는 데 가장 좋은 방법은 CSS를 이용하는 것이다.
- 외부 스타일시트(별도의 CSS 파일)를 이용해 작업이 가능하다. 아래는 외부 스타일 시트를 사용했을 때 HTML 파일의 예시이다.
-
마우스 커서를 <head> 태그에 둔다. 외부 스타일시트를 사용한다면 이 태그 안에서 스타일 지정이 가능하다.
-
외부 스타일시트를 새로 만드려면 <style> 이라고 친다. <style>태그는 <head>태그 안에 있다. <style>태그 안에 있는 CSS로 인해 페이지 상의 여러 요소들을 적용할 수 있다. 모두 마치면, HTML 파일이 아래처럼 보여야 한다. [1] X 출처 검색하기
<!DOCTYPE html> < html > < head > < style > </ style > </ head >
-
글자 색깔을 바꾸고 싶은 요소를 입력한다. <style> 섹션을 이용해 페이지 상의 다양한 요소를 지정할 것이다. 예를 들면, 페이지 상 본문의 스타일을 바꾸고 싶다면, 아래처럼 입력한다.
<!DOCTYPE html> < html > < head > < style > body { } </ style > </ head >
-
그 다음 color: 을 입력한다. 이는 구성요소에 속하는 것이다. color: 는 해당 요소에 어떤 글자 색깔을 입힐 것인지를 보여준다. 아래 예를 보자. 이렇게 하면, 본래 지정 요소였던, 모든 본문 글의 글자 색깔을 바꾸게 된다.
<!DOCTYPE html> < html > < head > < style > body { color : } </ style > </ head >
-
글자 색깔을 친다. 색깔을 입력할 수 있는 방법엔 3가지가 있다. 이름을 치거나, 헥스값을 입력하거나, RGB값을 입력한다. 예를 들어, 파란색을 원한다면, blue , rgb(0, 0, 255) , 또는 #0000FF 라고 칠 수 있다.
<!DOCTYPE html> < html > < head > < style > body { color : red ; } </ style > </ head >
-
여러 요소를 바꾸려면 다른 구분값을 더하면 된다. 페이지 상의 각각 다른 부분의 글자 색깔을 바꾸기위해서 여러 구분값을 사용한다.
<!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 >
-
구성 요소를 바꾸는 대신 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 >
광고
-
HTML 파일을 연다. 인라인 스타일 속성을 이용해 페이지 상 한 구성 요소의 스타일을 바꿀 수 있다. 스타일 상 한 두가지 변화를 줄 때 매우 유용하다. 하지만, 광범위하게 여러 스타일을 지정할 땐 추천하지 않는다. 복잡한 스타일을 변경할 때는 위에 제시된 방법을 사용하자. [2] X 출처 검색하기
-
바꾸고 싶은 구성 요소를 찾는다. 인라인 스타일 속성을 이용해 해당 요소의 글자 색깔을 바꿀 수 있다. 예를 들면, 특정 머리글의 글자 색깔을 바꾸고 싶다면, 파일에서 먼저 이 구성 요소를 찾자.
<!DOCTYPE html> < html > < body > < h1 > 여기가 당신이 바꾸고 싶은 머리글 요소이다 </ h1 > </ body > </ html >
-
해당 요소에 스타일 속성을 더한다. 바꾸고 싶은 요소의 시작 태그 내부에 style="" 라고 친다.
<!DOCTYPE html> < html > < body > < h1 style = "" > 여기가 당신이 바꾸고 싶은 머리글 요소이다 </ h1 > </ body > </ html >
-
"" 속성 안에 color: 라고 친다. 예를 들면 아래와 같다.
<!DOCTYPE html> < html > < body > < h1 style = "color:" > 여기가 당신이 바꾸고 싶은 머리글 요소이다 </ h1 > </ body > </ html >
-
바꾸고 싶은 색깔을 입력한다. 색깔을 입력할 수 있는 방법엔 세 가지가 있다. 이름을 치거나, 헥스값을 입력하거나, RGB값을 입력한다. 예를 들어, 노란색으로 바꾸고 싶다면, yellow; , rgb(255,255,0); , 또는 #FFFF00; 라고 친다.
<!DOCTYPE html> < html > < body > < h1 style = “color:#FFFF00;" > 이 머리글은 이제 노란색이다 </ h1 > </ body > </ html >
광고
팁
- HMTL에서 지원하는 헥스값(코드)이나 색깔 이름의 목록은 다음의 링크에서 확인 가능하다. http://www.w3schools.com/colors/colors_names.asp
광고
출처
이 위키하우에 대하여
이 문서는 10,904 번 조회 되었습니다.
광고
