티스토리 뷰

반응형

html 이미지 삽입을 하는 방법으로써 해당 소스를 사용하는법인 가운데정렬과 크기인 사이즈를 조절하여서 넣기에 대해서 알아봤다. 다른 곳에 있는 사진이나 개인 클라우드에 있는 것을 본인의 홈페이지 혹은 블로그(Blog)에 공유하기 위해서 대부분 이 HTML 코드를 사용하곤 한다.

html 이미지 링크를 삽입하고 다 만들었는데 나중에 원본 파일을 올린 사람이 그 사진을 삭제하게 되면 본인이 걸어둔 링크(HTML 코드) 또한 사라지게 되니 꼭 기억하도록하자.


1) 기본 코드

어떤 사진을 퍼올 때 마우스 오른쪽 클릭을 하고 이미지 주소를 복사하고 html 이미지 링크 삽입코드 사이에 넣는다.

<img src="이미지 주소">

위 코드 안에 적혀있는 [이미지 주소]라는 글자들을 삭제하고 가지고 올 사진의 경로를 붙여넣기하면 된다. 위 html 이미지 넣기 삽입코드는 사진의 원본 크기를 있는 그대로 복사를 하는 것이다.


2) 사이즈 크기를 조절하는 코드

본인의 글쓰기 에디터에 붙여 넣을 사진의 크기를 조절할 수도 있다. 이 방법은 대체적으로 큰 사진을 줄일 때 쓰인다. 작은 것을 크게 만들면 해상도에 문제가 생겨서 화질이 너무 좋지 않으니 참고를 하면 되겠다.

<img src="이미지 주소" width="250" height="250">

width그리고 height 뒤에 있는 숫자 250을 본인이 맞추고 싶은 숫자로 변경을 해서 쓰면 된다.

3) 중앙으로 위치를 이동시키기

html 이미지 가운데정렬을 하는 방법은 center(센터=중간)만 기억하면 된다. 아래의 코드를 보면 쉽게 이해가 될 것이다.

<center><img src="이미지 주소"></center>

앞에는 / ☜가 없고 뒤에는 /center가 있는데 이 것만 기억을 하여주면 된다. 만약에 <cetner>이라는 것을 넣는게 귀찮다면 html 편집기에 링크 코드를 삽입하고 글쓰기로 돌아와서 뜨는 사진을 중앙 정렬시켜줘도 된다.


반응형
댓글