제5장 BODY 태그 활용
[학습목표]
배경색,배경 이미지,텍스트 부분 색상 지정하기 등 BODY 관련 태그 사용법을 익힌다.
지난강좌에서는 기본태그 사용법을 요약정리를 해 보았습니다. 이번강좌는 <BODY>...</BODY> 에 관련된 태그들에 대해서 배워 보도록 할까요?
BODY는 문서의 실제적인 내용을 담고 있는 부분으로 브라우저에서 보이는 모든 내용을 말합니다.<BODY>...</BODY> 태그 안에서 지정된 속성은 문서 전체에 영향을 미칩니다.
<BODY>...</BODY> 태그
- 기능 : 본문 내용을 담고 있는 부분
- 속성 : BACKGROUND="그림파일", BGCOLOR="#색상", TEXT="#색상",
LINK="#색상", ALINK="#색상", VLINK="#색상"
하나씩 배워 보도록 할까요?
BGCOLOR는 배경색을 지정하고 BACKGROUND는 배경을 이미지로 지정하는 방법으로 웹 문서에 색다른 분위기를 한번 연출해 보도록 하지요.
1 단색으로 배경지정하기
먼저 문서 배경색을 노랑색으로 지정해 봅시다.
<HTML>
<HEAD>
<TITLE> 단색 배경 지정하기 </TITLE>
</HEAD>
<BODY BGCOLOR="YELLOW">
바탕색의 변화
</BODY>
</HTML>
결과확인 을 클릭해 보시면 노랑색으로 배경색이 나타났지요?
위에서 보는 바와 같이 색상의 영문이름으로 지정할 수도 있지만, 색깔은 16진수로 표현할 수 있어요.RGB값으로 6자리 16진수로 표현하는 데,
- 앞 자리 두자리는 Red
- 가운데 두자리는 Green
- 뒤 두자리는 Blue를 표현하지요.
검정색 #000000 ~ 흰색 #ffffff 까지 표현할 수 있는 데, 예를 들어 Red : FF0000, Green : 00FF00, Blue : 0000FF, Black : 000000, White : FFFFFF, Gray : 888888, Yellow : FFFF00, Cyan : 00FFFF 등으로 지정할 수 있다는 얘기지요.
그래서, 위에서 BGCOLOR="YELLOW" 대신에 BGCOLOR="#FFFF00"를 사용할 수 있다는 것 입니다.
아래 칼라테이블을 클릭하시면 다양한 색상표를 볼 수 있어요.
☞ RGB 색상표를 참고해 보세요.
2 이미지로 배경지정하기
이번엔 이미지를 배경으로 지정해 볼까요?
<BACKGROUND>는 <BODY BACKGROUND="이미지 파일경로/파일이름"> 형식으로 하면 되구요.현재 작성하고 있는 HTML파일과 이미지 파일이 다른 폴더 안에 있다면, 경로를 지정해 주어야 합니다.
<HTML>
<HEAD>
<TITLE> 이미지 배경 지정하기 </TITLE>
</HEAD>
<BODY BACKGROOUND="img.gif">
<FONT COLOR="WHITE">이것은 배경화면 입니다.<FONT>
</BODY>
</HTML>
그러면 결과확인 을 해 볼까요? 이젠 단색배경이 아니라 이미지로 배경이 지정 되었지요.
3 텍스트 색상 지정하기
<TEXT> 태그는 본문전체의 글자색을 지정합니다.
<body> 태그 안에 삽입하고 색깔을 지정하게 되면 table 작성시 <td>태그안에 하나하나 색깔을 정해주지 않아도 되지요.
다음강좌에서 배우게 될 링크의 색깔을 지정해주는 속성으로
- <LINK>는 하이퍼링크를 표현하는 색상,
- <ALINK> 하이퍼링크를 마우스로 누를 때의 색상,
- <VLINK> 이미 방문한 링크의 색상으로 색깔을 설정할 수 있습니다.
어때요? 재미있죠!
그럼, 다음강좌에서는 홈페이지 만들 때 필수적인 사항으로 중요한 부분인 다른 하이퍼링크 사용하는 방법에 대해서 공부해 보도록 하지요. 기대하세요~~
댓글 없음:
댓글 쓰기