-
[기초태그강좌] 이미지 삽입 태그IT 배우기/컴퓨터, 스마트폰 활용 2010. 10. 11. 11:03
이미지의 경우 기본적으로 바로 올리는 것이 가장 좋습니다. 속칭 X박스를 방지하기 위해서지요~ 링크를 걸어서 이미지를 올릴 경우 원본이 사라지거나 링크 주소가 바뀔경우 X박스로 보여집니다.
그래서 온라인상 이미지일 경우 <다른 이름으로 그림저장>또는 화면캡쳐 등을 활용하여 자신의 PC에 다운을 받았다가 다시 올리는 것을 권장합니다. 메일, 게시판의 경우 첨부기능이 있기 때문에 그것을 활용하면 됩니다. 그것이 정 안될 경우 아래 태그를 활용해서 링크를 걸어 봅시다.
[이미지 링크 기본 태그]
<img src="이미지 주소">
쉽죠? 이미지 주소의 경우 필요한 이미지에 마우스를 위치하고 오른쪽클릭 속성으로 들어가보시면 확인 가능합니다. 몇가지 추가적인 태그를 살펴볼까요...
[이미지 크기 정하기]
<img src="이미지 주소" width="400" height="150">
▶ width 명령어가 가로, height 명령어가 세로크기를 의미합니다. 기본적으로 px로 설정되어 있기때문에 가로 400px, 세로 150px 크기로 보여집니다. (숫자 뒤에 px를 적어주셔도 됩니다) 참고로 크기는 퍼센트% 로 적어도 됩니다. (%로 지정하면 해당페이지 크기가 100%기준이 됩니다)
[이미지 위치 정렬하기]<img src="이미지 주소" align="left"> 좌측 정렬
<img src="이미지 주소" align="center"> 중앙 정렬
<img src="이미지 주소" align="right"> 우측 정렬
<img src="이미지 주소" valign="top"> 상단 정렬
<img src="이미지 주소" valign="middle"> 중간 정렬
<img src="이미지 주소" valign="bottom"> 하단 정렬
[테두리 넣기]<img src="이미지 주소" border="7">
▶ border 명령어는 테두리 두께를 얘기합니다. "7" 이라는 두께의 테두리가 생성됩니다. 일반적으로는 border="0" 을 많이 적어주고 필요할 경우 수치를 적습니다.
[alt문자열 넣기] - 마우스가 이미지에 올라갔을때 뜨는 설명글입니다. 안적어주셔도 상관없습니다.
<img src="이미지 주소" alt="설명글">
▶ 그림에 마우스를 가져가면 "설명글" 이라는문자가 뜹니다.
2009/09/28 - [IT강좌/태그-이정도는 알자] - [기초 태그강좌] HTML 문서의 기본 구조
반응형'IT 배우기 > 컴퓨터, 스마트폰 활용' 카테고리의 다른 글
[기초태그강좌] 멀티미디어(음악,동영상) 태그 (0) 2010.10.11 [기초태그강좌] 링크 -클릭하면 넘어가기 (2) 2010.10.11 [기초태그강좌] HTML 문서의 기본 구조 (0) 2010.10.11 안드로이드에서 티스토리 글쓰기 가능해졌다 (2) 2010.08.09 안드로이드 게임 소개 FarmFrenzyLite (0) 2010.05.20