html 이미지 넣기 및 가운데 정렬 방법

html 이미지 넣기 및 가운데 정렬 방법

html은 전세계 홈페이지와 블로그 등 각종 사이트들을 작성하는데 꼭 필요한 웹언어 중 하나입니다. 현재는 html5버전을 사용하고 있으며 각종 사이트 제작시 공통된 웹표준을 사용함으로써 전 세계 사이트 어디를 방문해도 접속이 안 되거나 하는 일은 없습니다. 요즘 각종 사이트나 블로그, 커뮤니티 활동을 하면서 웹상에 이미지를 넣어야 하는 경우가 종종 있는데 별도 에디터에서 이미지 넣기가 제공되지 않는 경우 이미지를 삽입하거나, 수정하는 방법 등 html 이미지 넣기 및 가운데 정렬 방법을 소개해 드리도록 하겠습니다.

이미지 넣는 방법은 hml초창기부터 변함없이 img라는 태그를 사용하고 있습니다. img는 image의 약자입니다. 이 태그를 사용하여 웹 상에 이미지를 올릴 수 있으며, 호스팅 서버에 있는 이미지 파일 혹은 다른 웹사이트 등에 있는 이미지 주소를 이용해 이미지를 원하는 위치에 넣을 수 있습니다.

1. html 이미지 넣기 방법

먼저 이미지 태그 사용 방법 부터 알아보도록 하겠습니다.

이미지를 넣기 위해서 태그를 사용해야 하는데요! html태그는 꺽쇠(<, >)를 이용해 이 문장이 태그라는 것을 표시합니다. 꺽쇠 안에 img라는 태그를 넣어 준 뒤 src에 이미지가 있는 주소(경로)를 넣어줘야 합니다. 이 주소는 이미지가 저장되어 있는 주소를 말하는데요! 본인이 이미지를 저장한 호스팅 혹은 다른 사이트에 있는 이미지 주소로 넣을 수 있습니다. 예를 들어 제 블로그에 aaa.jpg라는 그림파일을 불러오려면 아래와 같이 본문(Body)에 태그를 삽입해 주면 됩니다.

<img src="http://divorce-joseph.tistory.com/aaa.jpg"></img>

2. 이미지 사이즈 조절하기

이미지 사이즈는 태그에 가로와 세로 사이즈를 지정해 줌으로써 변경 가능합니다. 

이미지 주소 뒤나 앞쪽에 가로(width)와 세로(height) 속성을 추가하여 이미지 크기를 조절 할 수 있습니다. 이미지 크기는 픽셀(Pixel)단위 또는 비율(%) 등을 사용합니다. 픽셀은 정확한 크기를 지정 할 때 사용하며 비율은 화면에서 어느 정도 크기로 보여줄 것인지를 설정할 때 주로 사용합니다.

이미지 크기를 조절한 예를 보여드리겠습니다.

600 * 400 픽셀		300 * 200 픽셀

똑같은 사진이지만 픽셀 크기를 얼마로 지정하느냐에 따라 위 사진 좌측과 우측처럼 이미지 크기 차이가 나게 됩니다. 픽셀로 지정할 경우에는 단위인 px를 입력하지 않아도 되지만 비율로 입력하실 경우에는 꼭 %단위를 사용해 주셔야 합니다.

3. html 이미지 가운데 정렬 방법

html에서 이미지를 가운데 정렬하고 싶다면 center태그를 이용해야 합니다.

center태그로 가운데 정렬하고자 하는 태그로 감싸 주시면 됩니다. 앞쪽과 뒤쪽에 똑같이 center태그를 사용하되 뒤쪽에는 /를 넣어줌으로써 여기까지만 가운데 정렬하라는 명령을 내립니다. html은 시작태그와 종료태그가 있는데 종료할 경우에 /를 사용합니다. 부엉이 사진을 태그로 가운데 정렬을 시키면 아래처럼 화면 가운데에 이미지가 배치됩니다.(모바일에서는 이미지가 꽉 찬 화면으로 보일 수도 있습니다.)

오늘은 html 이미지 넣기 및 가운데 정렬 방법에 대해 알아봤습니다. html은 아주 간단한 구조로 되어 있기 때문에 조금만 공부하시면 쉽게 사용 할 수 있습니다. 하나씩 하나씩 배워간다는 개념으로 공부해 보세요.