- 일반 게시물(나눔방 및 문서타입의 게시물)의 경우 -
사진이나 이미지를 첨부하여 올리실 때 알아두면 매우 편리한 웹상식입니다.
이미지(사진) 올리기(업로드) 및 화면에 이미지 표시 방법
사용자 권한에 따라 글쓰기가 가능한 곳에서는 댓글을 제외하고는 이미지 파일 등 첨부파일의 업로드가 다음과 같은 조건하에서 가능합니다.
- 이미지 파일 타입은 확장명이 jpg jpeg gif png 만 허용합니다.
- 첨부할 모든 파일은 반드시 영문을 사용해야 하며, 파일 이름간 공백을 사용을 피해주십시요. 공백은 underscore(_)나 hyphen(-)을 이용하여 공백없이 파일이름을 정확히 표기해주십시요.
- 이미지 파일은 여러개를 올릴 수도 있으나 한번에 5MB 까지만 허용합니다.
- 이미지 파일의 가로가 500 픽셀을 넘으면 자동으로 500 픽셀로 리사이즈를 합니다. 이미지의 사이즈를 리사이징하는 이유는 사용자가 이 보다 큰 사이즈의 사진을 업로드할 경우 웹화면이 오른쪽으로 늘어나 보기가 안좋아지는 것을 방지하기 위함입니다.
- 이미지 파일의 세로가 1000 픽셀을 넘으면 자동으로 1000 픽셀로 리사이즈를 합니다.(세로의 경우는 세로 사이즈가 긴 도표 등과 같은 이미지를 첨부할 경우를 고려하여 1000 픽셀로 제한했습니다.
이런 기능으로 인해, 해상도가 높은 디지털 카메라를 이용해서 찍은 사진도 별도의 사진 크기나 파일 사이즈를 편집하지 않고 직접 올리셔도 서버에서 알아서 조정을 하므로, 편리하게 사진을 올릴 수 있습니다.
이미지를 첨부하고 나면, 글을 올리기 전에 이미지는 이미 웹서버의 files 라는 폴더에 저장됩니다. 그러므로, 글을 쓰실때 다음과 같은 간단한 HTML 코드를 삽입하여 주시면, 첨부한 그림이 글 내용에 표시됩니다.
<img src="/files/test_image.jpg">
참고로 img 란 HTML에서 널리 사용하는 이미지 tag이며, src 를 이용하여 이미지의 위치를 표시해줍니다. 모든 첨부파일은 files 라는 폴더에 저장되므로, files 앞과 뒤에 / 하고, 내가 첨부한 파일명을 써주시면 간단합니다.
가로가 500 픽셀이 넘는 이미지를 자동으로 500으로 줄여주므로, 사용자가 이미지를 편집하는 부담을 갖지 않고, 웹에 보기좋게 표시될 것입니다.
아래 예를 들어 보았습니다.
옵션에 있는 "파일 첨부"에서 testing_image.jpg 란 파일을 첨부하고 이 페이지 내용에 끝부분에 다음과 같은 코드를 삽입하였습니다.
<img src="/files/test_image.jpg">
그랬더니 아래와 같은 멋진 이미지가 나옵니다. 원래 이 이미지 사이즈는 649X429 인데 resizing이 자동으로 되었습니다. 충분히 이해하시겠죠? 원래 사이즈가 실제로 줄어 서버에 저장되므로 원본 파일을 잘 보관하도록 하십시요.
