태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.

[왕초보 홈페이지 만들기 강좌 ①] HTML이란 무엇인가?
http://blog.hostit.co.kr/82

[왕초보 홈페이지만들기 강좌 ②] 나모 웹 에디터란 무엇인가?
http://blog.hostit.co.kr/83

[왕초보 홈페이지 만들기 강좌 ③] 기본적인 HTML 문서의 구조
http://blog.hostit.co.kr/105

[왕초보 홈페이지 만들기 강좌 ④] HTML 태그의 기초를 익혀보자! 기본 HTML 태그
http://blog.hostit.co.kr/118




안녕하세요~

그 동안 강좌 보고 많이 연습하셨나요?

그런데 지금까지 성실하게 따라오신 분이라면 아마 우리가 글자만 다루고 있었다는 것을 아실 거에요.

그런데 많은 홈페이지들은 아래와 같이 글과 그림이 어우러져 있는 형태가 대부분이죠~

 

 

 

 

 

오늘은 이렇게 그림을 넣고, 그림 바로 옆에 글자가 들어갈 때 이를 정렬하는 방법에 대해서 배워볼 거에요 ^^!

잘 따라오세요~!!

 

 

 

 

원하는 이미지를 내 홈페이지에 넣기

 

1. 원하는 이미지 위에서 오른쪽 단추를 누르고 ‘속성’을 클릭합니다.

 

 

 

 

 

 

2. ‘주소’란에 나와 있는 주소를 쭉 드래그한 후 복사합니다.

 

 

 

 

 

 

3. 그림을 넣는 태그인 <img src=”주소”>의 주소 부분에 복사한 주소를 넣어줍니다.

큰따옴표(“  “)를 쓰지 않으면 안되니 주의해주세요~

 

 

 

 

 

 

4. 아래와 같이 이미지가 뜨게 됩니다.

 

 

 

 

 

 

이미지 크기 조절하기

 

1. <img> 태그 아래에 넓이인 width와 height의 숫자를 넣어 줍니다. 단위는 픽셀입니다~

아래의 그림처럼 %로 지정할 수도 있는데, 100%는 현재 익스플로러 창에 꽉 차는 양을 의미합니다.

 

 

 

 

 

2. 아래와 같이 나타납니다.

 

 

 

 

 

3. %로 이미지 크기를 지정한 아래의 그림은 익스플로러 창 크기에 따라 크기가 바뀝니다.

 

 

 

 

 

그림 설명 넣기

 

1. <img> 태그의 속성에 alt=”그림 설명”을 넣어줍니다.

 

 

 

 

 

2. 아래와 같이 그림 위에 커서를 갖다대고 있으면 내가 입력한 그림 설명이 나옵니다~

 

 

 

 

테두리 넣기

 

 

1. <img> 태그 속성에 border를 추가합니다. 숫자가 높을수록 테두리가 두꺼워지고,

border 속성을 아예 쓰지 않거나 0으로 지정하면 테두리가 없어집니다.

 

 

 

 

 

2. 예제에서처럼 border를 10으로 지정하면 아래처럼 굵은 테두리가 됩니다.

 

 

 

 

 

 

그림과 글자 정렬하기

 

 

 

1. <img> 태그에 align 태그를 넣습니다. top은 위, middle은 중간, bottom은 아래를 가리킵니다.

 

 

 

 

2. 글씨와 그림의 관계가 보입니다.

 

 

 

 

 

이제는 그림을 넣은 홈페이지도 얼마든지 만들 수 있겠죠?

마치 어린 아이가 자라나듯이, 우리가 만들고 있는 홈페이지도 점점 더 내용이 풍성해지는 기분이에요!

다음 시간에 또 알찬 강좌로 찾아뵙겠습니다 ^^!

 

 

 

 

www.hostit.co.kr

Posted by 호스트잇