태터데스크 관리자

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

태터데스크 메시지

저장하였습니다.

[왕초보 홈페이지 만들기 강좌 ①] 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 호스트잇

댓글을 달아 주세요

  1. 어머나! 2012.07.05 14:11  댓글주소  수정/삭제  댓글쓰기

    다음 강좌가 너무 기다려지네요!! 유용한 정보 너무 감사드립니다 ㅎㅎㅎ

  2. burberry trench coat 2013.01.06 03:24  댓글주소  수정/삭제  댓글쓰기

    http://www.ghdspainv.com/ planchas ghd asintió con la cabeza: "¡Yo sé que yo era su hermana, fue llevado hasta el grande, así que me dicen" A pesar de la gran verdad que ya se sabe, pero a menudo ghd recordado Yuan Chen dijo estas palabras, el tipo de expresión seria mi corazón siempre está palpitante olas.

    A los ojos de http://www.ghdspainv.com/ ghd baratas siempre hermana también!ghd un retraso, se puede adivinar fácilmente, pero quiere Yueya aseguró carácter Yuan Chen, dijo estas palabras, que nunca le hará daño enero elegante, pero también advirtió a su propio sentido interno de impulso, no dejar que los sentimientos de Yueya todo un cambio cualitativo!

    Pero, obviamente, http://www.ghdspainv.com/ ghd españa el sabor fundamental niña tonta no sale detrás de las palabras sentimientos.No se pudo evitar sentir un poco incómodos amantes muy clued en ghd desdén.Como el amor, el amor al amor, y no tiene que preocuparse acerca de cuáles son las reglas de la clase, ghd los dos encuentran ningún problema en realidad no también el peligro de que se divide a su familia!

  3. ghd 2013.01.10 09:26  댓글주소  수정/삭제  댓글쓰기

    Mais http://www.uggfranceba.com/ chaussures ugg n'ont tout simplement pas lui donner une chance, et directement tourné vers les enfants Fei dit solennellement: «Les enfants Fei, vous voulez à envisager de quitter Su roi je peux vous donner pour trouver une épouse royale dans le passé, ne laissez pas que vous avez été lésée, ces jours-ci? "

    " http://www.uggfranceba.com/ bottes ugg pas cher" enfants Fei soudainement vidé un grand visage rouge reproche pleuré.»Sa sœur-frère, vous ne pouvez pas faire cela" ugg soudain anxieux, les enfants Fei il ne peut absolument pas être Yisow au fléau.Vous pouvez lui faire savoir à la fin: «Pourquoi pas moi?" Ugg foudroya du regard, ce regard sans fin pour faire un ressentiment se tourna vers la route Fei acte d'accusation enfants, "fei enfants, Su roi ce gamin trop authentique. Que se passe-t-il?"

    «Quelles sont les choses?" Fei enfants est extrêmement simple, facile http://www.uggfranceba.com/ bottes ugg affecter l'esprit subconscient suivre son train de pensée aller."Est, sa sœur-frère, et je veux savoir Le frère du roi faire quelque chose en fin de compte, fait cela vous tellement en colère," Jing Xin hâte suivie questionnement, mais elle a également appelé ugg suivre son évolution, il serait de tentative peu, cependant Jing Xin connaissez vaguement, même ce qu'on appelle sa sœur-frère ne sera pas en colère.