HTML - 그림 넣기

그림 넣기

- 이미지 넣기 및 배경색상, 배경그림, 수평선 그리기 태그
- 이미지 테두리, 넓이, 높이, 그림설명 등을 지정하는 방법

① 이미지 태그

<img src="그림주소"> - 태그가 간단하지요? 대신 그림주소를 찾는 것이 중요합니다. 방법은 원하는 그림에 마우스를 대고 우측클릭을 한후 나타나는 화면에 보이는 등록정보(properties)를 클릭하면 http://~로 시작하는 주소가 중앙에 있습니다. 그것이 바로 그림주소입니다. 그 그림주소를 복사하여 따옴표 안에 넣으시면 됩니다.
한번 해 볼까요?
다음 그림위에 마우스를 대고 우측클릭을 한후 등록정보를 보고 제가 제시한 주소가 나타나는지 확인해 보세요.
<img src="http://image.hanmail.net/hanmail/image/hanmail/daumlogo.gif">

그러나 여기서 주의할 것은 인터넷상에서 맘에 드는 그림을 보셨을때 그 그림을 임의로 사용할(예를 들어, 게시판에 올리는 정도) 것이 아니라 자신의 홈페이지에 두려고 하는 것일 경우에는 등록정보의 주소를 그냥 가져다 쓰는 것보다는 그림위에 마우스를 대고 우측클릭을 한후 중앙부분에 있는 "다른이름으로 그림저장"을 한 후 컴퓨터에 저장된 그림을 자료실로 업로드하여 자신의 주소로 만들어 쓰는 것이 안전하다는 것입니다.

② 이미지 편집

위의 명령어와 그림을 비교하면 충분히 짐작할 수 있듯이 center는 그림(글자도 마찬가지)을 중앙에 위치하게 하고 border는 그림에 보기싫은 테두리가 생길 경우 테두리를 없애주며 width는 넓이를 height는 높이를 지정하여 줍니다. 그리고 alt는 그 그림에 마우스를 대면 나타나는 그림설명입니다.
그림의 크기는 늘릴 수도 있고 줄일 수도 있으나 너무 늘리게 되면 그림이 흐려지고 그 본래 모습을 잃게 될 수 있습니다.
그리고 그림을 움직이고 싶은 경우에는 글자움직이기 태그를 그대로 이용하시면 됩니다.

③ 배경색상 바꾸기

<body bgcolor="색상명"> - 배경색상은 본문이 시작할 때 주는 명령어인 <body>안에 들어가는 것입니다. 이것은 화면전체의 색상을 바꿔주는 것으로 색상명에는 글자색상 태그에서와 마찬가지로 색상의 이름 혹은 코드를 넣으시면 됩니다.
예는 아래의 예제소스와 예제실행을 통해 확인해보세요.

④ 배경그림 바꾸기

<body background="배경그림의 주소"> - 배경그림 역시 <body> 안에 들어가는 것으로 벽지 혹은 배경그림으로 불리우는 디자인을 전체화면에 까는 것입니다. 배경그림의 주소를 얻는 방법은 그림의 주소를 얻는 방법과 같습니다.

⑤ 수평선 그리기

<hr size=3>
수평선은 가로선을 말하는 것으로 굵기와 색상 등을 조정할 수 있습니다. align은 선의 위치를 조정하는 것으로 right, left, center 등으로 조정할 수 있고 width는 선의 가로넓이를 조정하는 것으로 %로 나타내거나 그냥 수치로 나타낼 수 있습니다. 그리고 size는 선의 굵기, noshade는 그림자 없애기를 나타냅니다.
그리고 움직이는 글자 태그를 이용해 움직임을 나타낼 수도 있고 color를 이용해 색상을 바꿀 수도 있습니다.

예제소스

예제실행 - 결과를 보시려면 클릭하세요.

'컴퓨터사용팁' 카테고리의 다른 글

HTML - 링크시키기 (0)	2011.01.05
HTML - 음악 넣기 (0)	2011.01.05
HTML - 글자 폰트의 모든 것 (0)	2011.01.05
HTML - HTML의 형식 (0)	2011.01.05
윈도우 정품 혜택 알림창 안 뜨게 하기 (8)	2011.01.04

컴퓨터라이프

HTML - 그림 넣기

'컴퓨터사용팁' 카테고리의 다른 글

티스토리툴바

HTML - 그림 넣기

'컴퓨터사용팁' 카테고리의 다른 글

관련글

티스토리툴바