강좌 잘 쓰는 법 (Image) (3)

 

지난번에는 파워포인트를 활용해서 화살표를 쉽게 넣는 법을 써봤습니다.

쉬울 수도 있지만, 관심이 없는 경우 어려운 항목일 수도 있습니다.

 

이번에는 이미지 배치에 대해서 한번쯤 생각해보는 시간을 가져보도록 하겠습니다.

 

 

1. 이미지 크기

 

강좌를 쓰면서 이미지를 올릴 때, 본문 아래 [파일 첨부]를 활용해서 올립니다.

 

이때 편집하지 않은(크기가 다른) 이미지를 올리게 되면 아래와 같이 배치되게 됩니다.

 

 

실제 이미지가 위와 같이 올라가면 크게 상관은 없지만,

때로는 이미지의 크기가 너무 커서 화면을 넘어가는 경우가 있습니다.

 

글을 쓰는 게시글의 가로사이즈는 700 픽셀 정도인데..

그 이상의 이미지를 올리다보면 이미지도 축소되고 보기에 좋지 않게 배치되는 경우가 많습니다.

 

위와 같은 이미지들이 아래와 같이 배치되면 조금 더 깔끔하지 않을까요?

 

 

방법은 간단한 합니다.

이미지를 올린다음, 아래와 같이 HTML 편집기를 눌러줍니다.

 

 

그림을 삽입하면 아래와 비슷한 내용을 볼 수 있습니다.

이미지 이름과 경로, 그리고 사이즈가 나타나 있습니다.

 

<img alt="Aqua Blue.jpg" src="files/attach/images/583/200/563/Aqua%20Blue.jpg" width="2560" height="1600" editor_component="image_link"/>

 

여기서 사이즈를 나타내는 width 와 height 를 수정해주면 됩니다.

단, 주의할 것은 원래 크기와 게시글에 나타날 사이즈의 비율을 적어줘야합니다.

 

예를 들어, 위와 같이 2560 크기를 600 으로 크기를 나타나게 하려면, width="600" 으로 설정해주면 됩니다.

 

하지만, 애매한게 height 는 어떻게 써야할까요?

변경 전 가로 크기인 2560를 600 으로 나누면, 2560/600 = 4.266... 으로 나옵니다.

이 공식을 그대로 대입해서 세로 크기인 1600을 4.266 으로 나눠서 375를 입력해주면 됩니다.

 

그림이 많아질수록 매번 계산하고 수정하는 일은 상당히 귀찮은 일입니다.

 

그래서... 간편하게 height를 수치를 빼면 됩니다.

 

조금 의아한 부분이 있지만, height를 부분을 삭제하면 지정된 width 에 맞게 크기 비율을 알아서 조절해줍니다.

 

<img alt="Aqua Blue.jpg" src="files/attach/images/583/200/563/Aqua%20Blue.jpg" width="2560" height="1600" editor_component="image_link"/>

 

위의 내용을 아래와 같이 바꾸면 일정한 크기의 이미지로 나타나게 할 수 있습니다.

 

<img alt="Aqua Blue.jpg" src="files/attach/images/583/200/563/Aqua%20Blue.jpg" width="600"  editor_component="image_link"/>

 

아래 그림과 같이 일정한 크기로 나타나는 그림을 이미지 편집 없이 html 태그만을 사용해서 쉽게 변경할 수 있습니다.

 

 

다음엔...

 

글 내용은 얼마 안되지만, 위와 같이 간단한 수정으로 훨씬 더 보기 좋고 정렬된 강좌를 보여줄 수 있는 것을 알아보았습니다.

조금 더 나은 글을 위해서 조금만 더 시간을 투자하고 노력을 하면 좋을 거 같습니다.