티스토리 뷰
블로그의 카테고리에 IT공부방 > HTML에 보시면 이미지 삽입 하는 방법이 있습니다. 그리고 추가로 HTML에서 이미지 크기 조절하는 방법을 배우기 위해서 이미지 삽입부터 다시 살펴 보도록 하겠습니다. 컴퓨터 프로그램 배우기에 있어서 반복학습은 상당히 중요합니다. 계속하면 할수록 익혀지니까요.
HTML 편집기는 노트++ 프로그램을 사용하여 보겠습니다. 저번에 말씀 드렸듯이 메모장에서도 HTML의 편집이 가능합니다. 저장을 .html로 해주시면 되거든요. 하지만 프로그램을 사용하는 것이 보기가 더 좋으므로 프로그램을 사용합니다.
HTML의 기본구조는 <!doctype html>부터 시작해서 </html>로 마무리가 됩니다. 여기서 헤드 부분과 바디 부분이 나뉘고 특히 바디 부분에 수많은 정보가 들어갑니다. 기본구조를 기본으로 익히고 이미지 크기 조절을 해 보겠습니다.
이미지 삽입은 <img src="파일명.xxx"> 를 적어주시면 삽입 할 수 있습니다. 이때 주의 할 점은 꼭 파일명 뒤에 무슨 파일인지를 뜻하는 .jpg나 .gif같은 파일 형식을 적어주시기 바랍니다. 원하는 크기로 넣고 싶을 때는 폭과 높이를 적어주시면 됩니다.
이미지는 위의 바디 부분에 넣을 수 있습니다. 우리가 보는 페이지 상에 나타날 수 있는 것이지요.
<img 라는 명령어를 통해서 이미지를 넣겠다는 것입니다. src는 내가 이미지의 경로를 설정해 주는 것 입니다. width는 폭을 설정하고, height는 높이를 설정합니다. 만약 width와 height를 넣지 않는다면 원본사진 크기 그대로 삽입이 되는 것이고, 높이와 폭을 설정해주시면 설정한 대로 삽입되게 됩니다.
원하는 이미지를 넣으려면 src 에 적어놓은 파일명과 실제 존재하는 파일명이 같아야 출력 할 수 있습니다. 그리고 같은 폴더 안에 넣어 주어야 출력이 가능합니다.
실제 출력 이미지를 보고 설명 드리겠습니다.
실제 위의 <img src="1.jpg" width="300" height="200"> 에서 <img src="1.jpg" width="500" height="300">의 명령으로 바꾸니까 이미지 크기가 저렇게 조절 되었습니다. 이미지 크기 줄이는 것은 간단하죠?
★ 이미지 크기 조절하는 법 이외의 다른 태그들 설명
WIDTH : 폭, 넓이를 조정합니다. - 위의 설명
HEIGHT : 높이를 조정합니다. - 위의 설명
VSPACE : 이미지의 상하 여백을 조정합니다. <img src="xxx.xxx" vspace="5"> 상단기준
HSPACE : 이미지의 좌우 여백을 조정합니다. <img src="xxx.xxx" hspace="5"> 좌측기준
BORDER : 이미지의 외곽선을 그려줍니다. <img src="xxx.xxx" boder="5"> 이런식으로 지정해 주면 외곽선이 나타난다. 기본적으로 블랙 색상입니다.
ALIGN : 이미지의 정렬을 말합니다. 기본적으로 왼쪽 정렬합니다. <align="right, left, center">로 표시한다. 기본적으로 왼쪽 정렬입니다.
아래는 위의 태그들을 이용한 이미지 출력이 어떻게 되었는지를 보여주는 것 입니다.
아직까지는 HTML이 생각보다 쉬운데요. 계속해서 추가로 포스팅하면서 HTML부터 시작해서 Javascript 그리고 C언어까지 공부해 볼 예정입니다. 아마 javascript로 넘어 가면서 부터 상당히 어려워질 것 같은데요. 그래도 같이 이겨 내셔야겠지요? 컴퓨터와 소통하는 언어를 배움으로써 내가 생각했던 안드로이드 어플도 만들고 나만의 티스토리 블로그로 탈바꿈하는 날이 오기를 바랍니다.
이전의 이미지 삽입하기 글과 HTML기초에 대해서 공부하실분은 IT공부방의 HTML을 보시면 되겠습니다. 어릴적 HTML을 공부하고 티스토리를 시작하면서 새롭게 공부하는 것이기 때문에 이 글을 보아주시는 분들과 함께 공부하면 더 습득이 빠를 것 같습니다.
'Blog > 웹언어' 카테고리의 다른 글
| HTML기초 이미지에 링크 걸기 방법 (3) | 2017.05.16 |
|---|---|
| HTML기초 테이블 태그로 표 만들기 방법 (0) | 2017.04.22 |
| HTML기초, 순서와 목록을 만드는 태그 (0) | 2017.04.20 |
| HTML기초, 기초태그 제목태그 배우기 (0) | 2017.04.08 |
| HTML기초, 기초지식과 이미지 삽입하기 (0) | 2017.04.04 |