|
|
안녕하세요~!! 여러분들이 기다리시던 HTML 문서 만들기 강좌 시간이 찾아왔습니다~
지난 강좌에서는 HTML 문서을 위해 필요한 서식, 글꼴, 목록 관련 기본 태그에 대해서 공부해 보았는데요.
아직 까먹지 않으셨죠?
저도 어떻게 하다보니 강좌를 하게 되었지만... 실력이 미천하여 아직도 매일 매일 공부하고 있습니다~
머리가 나쁜지 안쓰면 까먹게 되드라구요ㅠ 여러분들도 퐈이팅 하셔서 꾸준히 공부하시기 바랍니다.
모르는 부분이 있으면 댓글이나 방명록에 궁금사항 남겨주시구요.
|
지난 글 보기 |
학습 목표
● 배경색,배경 이미지,텍스트 부분 색상 지정하기 등 BODY 관련 태그 사용법을 익힌다.
이번 강좌에서는 HTML 문서에서 가장 중요한 부분인 <BODY>...</BODY> 에 관련된 태그들에 대해서 배워보도록
할텐데요... 본문 내용으로 들어가기에 앞서 위의 HTML 기본 문서 구조를 다시한번 보시기 바랍니다.
BODY 태그 기능 및 속성 알기
BODY는 문서의 실제적인 내용을 담고 있는 부분으로 브라우저에 보이는 모든 내용을 말합니다.
따라서, <BODY>...</BODY> 태그 안에서 지정된 속성은 문서 전체에 영향을 미칩니다.
이해를 돕기위해 제 블로그 메인화면을 캡쳐해서 올려봤는데요.
<BODY>...</BODY> 태그 안에 들어가는 모든 명령어나 그림 파일들이 빨간색 박스 안에 표시되어 나타납니다.
이해가 되셨나요?
|
<BODY>...</BODY> 태그 - 기능 : 본문 내용을 담고 있는 부분 - 속성 : BACKGROUND="그림파일", BGCOLOR="#색상", TEXT="#색상", LINK="#색상", ALINK="#색상", VLINK="#색상" |
그럼, 위에 설명된 BODY 태그들을 하나씩 배워보도록 할까요?
BGCOLOR는 배경색을 지정하고 BACKGROUND는 배경을 이미지로 지정하는 방법으로
웹 문서에 색다른 분위기를 한번 연출해 보도록 하겠습니다.
단색으로 배경 지정하기먼저 HTML 문서 배경을 파란색으로 나타내 보도록 하겠습니다.
메모장을 열어 위에 적힌 소스를 그대로 입력하고 확장자를 html 로 지정한 후 저장 합니다.
이때, 파일명은 자신이 원하는 어떤 이름을 사용해도 상관없습니다. 위 첨부된 파일을 열어 자신이 실행한 웹브라우저 배경화면과 같은지 확인 합니다.
파란색 배경 지정하기.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"를 사용해도 결과는 같습니다.
이미지로 배경 지정하기이번에는 이미지를 배경으로 지정해 보도록 하겠습니다.
이미지 배경(그림파일)은 <BACKGROUND> 태그를 사용합니다.
<BACKGROUND>는 <BODY BACKGROUND="이미지 파일경로/파일이름"> 형식으로 지정하면 됩니다.
그리고 현재 작성하고 있는 HTML파일과 이미지 파일이 다른 폴더 안에 있다면 경로를 지정해 주어야 합니다.
작업을 하기에 앞서 아래 첨부한 배경화면 압축파일을 바탕화면에 저장한 후, 압축을 풀어주세요.
street.zip그리고, 작업의 편의를 위해 street 폴더 안에 있는 street.jpg 그림파일을 바탕화면으로 옮깁니다.
위 작업이 모두 완료되었다면 메모장에 위에 적혀진 소스를 입력한 후, 바탕화면에 '이미지 배경 지정하기.html' 로
저장합니다. 저장이 완료 되었다면 아래 '이미지 배경 지정하기'를 눌러 결과를 대조해보시기 바랍니다.
그림과 똑같이 웹브라우저 바탕화면에 이미지가 표시되었다면 제대로 입력하신 겁니다.
혹여라도 본인 모니터의 픽셀에 따라 그림이 바둑판 배열로 나올 수도 있고,
한 화면에 그대로 나올 수도 있으니 그림과 똑같지 않더라도 놀라지마세요...
그리고 메모장으로 입력한 HTML 문서와 첨부된 street.jpg 파일은 반드시 바탕화면에 있어야 합니다.
이유는 절대경로와 상대경로의 차이 때문인데요... 이것은 차후에 설명드리겠습니다.
BODY에 텍스트(TEXT) 색상 지정하기<TEXT> 태그는 본문전체의 글자색을 지정합니다.
<BODY> 태그 안에 삽입하고 색깔을 지정하게 되면 table 작성시 <TD>태그안에 하나하나 색깔을 정해주지 않아도 됩니다.
메모장에 위 소스를 입력한 후 아래 첨부 파일을 열어 결과를 확인합니다.
글자색이 파란색으로 나왔다면 제대로 하신 겁니다.
그리고 다음강좌에 배우게 될 <BODY> 태그의 링크 색깔을 지정해주는 속성으로 다음과 같은 태그를 이용하여
● <LINK> : 하이퍼링크를 표현하는 색상,
● <ALINK> : 하이퍼링크를 마우스로 누를 때의 색상,
● <VLINK> : 이미 방문한 링크의 색상.
● <ALINK> : 하이퍼링크를 마우스로 누를 때의 색상,
● <VLINK> : 이미 방문한 링크의 색상.
링크에 대해 다양한 색상을 지정 할 수 있습니다.
글을 마치며..
글 작성하기가 만만치 않네요...ㅠ 나름 힘 좀 들였습니다!!
잘 보셨다면 추천 한방 눌러주시는거 잊지 마시구요~
다음강좌에서는 홈페이지 만들 때 필수적인 사항으로 중요한 부분인 하이퍼링크 사용하는 방법에 대해서
공부해 보도록 하겠습니다. 그럼 다음 시간에 뵈요~^^
| 퐌다의 추천 도서 |
댓글