안녕하세요!

새로 오셨군요. 커뮤니티에 참여하시려면, 이 버튼 중 하나를 눌러 주세요!

full league table >

게시판에 사진 올리기 방법 소개

edited January 2016 in Notice
안녕하세요, hanqsun입니다.

ARSENAL KOREA SUPPORTERS CLUB (A.K.A 애쉬버튼)의 게시판에
이미지 업로드 하는 방법이 업데이트 되었다고 하여서 소식을 전하려고 합니다.

본래 애쉬버튼은 이미지 올리기가 아스날 챔스 우승하는것 만큼 까다롭기로 유명하죠.
ㄷㄷㄷ 
아무도 직접 본 적이 없는...
게임에서만 가능한...

무튼 아직도 완벽하게 뭔가가 되는건 아니지만, 그래도 어느정도 가능해져서 그에대해서 간단히 소개하려고 합니다.

(본 글은 PC버전에서 사용하시는 용도로 작성합니다.)
일단 에쉬버튼의 글쓰기 보드는 두가지가 있습니다.

쉽게말하면 스타일이 적용된 버전적용되지 않은 버전! 바로 두가지입니다.

스타일 적용: 한글이나 워드에서 보이는 것 처럼 글씨 크기나 색 정렬법들이 바로바로 적용되어서 보여지는 것.

스타일이 적용되지 않은 것: 쉽게 생각하면 html 소스코드를 직접 치는것.

우리는 먼저 스타일이 적용되지 않은 버전 을 이용해서 이미지를 넣는 방법을 설명드리겠습니다.

왜냐하면 스타일이 적용되지 않은 버전을 통해서는 drag&drop을 통해서 이미지를 바로 업로드 할 수가 있습니다~!

먼저 두가지 모드를 전환하기 위해서는 '소스코드보기'라는 아이콘을 눌러줘야 합니다.




글쓰는 창 맨 위를 보면 요렇게 생긴 모양의 아이콘이 있습니다.
저게 바로 '소스코드보기' 입죠.

저걸 누르면 흔히 html이라고 하는 스타일이 적용되지 않은 버전 의 글들이 보이는것입니다.

ex) 
<div style="background-color: transparent !important;">먼저 두가지 모드를 전환하기 위해서는&nbsp;<u><b>'소스코드보기'</b></u>라는 아이콘을 눌러줘야 합니다.</div><div style="background-color: transparent !important;"><br></div><div>글쓰는 창 맨 위를 보면 요렇게 생긴 모양의 아이콘이 있습니다.</div><div>저게 바로 <u><b>'소스코드보기'</b></u> 입죠.</div>

그런다음 여기서 깜빡깜빡 거리는 키보드 커서를 움직여서 이미지를 넣을 곳에 위치시킵니다.

저는 "글쓰는 창 맨 위를 보면..."의 앞에다가 이미지를 넣으려고 합니다.
그럼 위의 예시에서 ...<br></div> 과 <div>글쓰는 창... 사이에 커서를 가져다 놓습니다.

ex) 
<div style="background-color: transparent !important;">먼저 두가지 모드를 전환하기 위해서는&nbsp;<u><b>'소스코드보기'</b></u>라는 아이콘을 눌러줘야 합니다.</div><div style="background-color: transparent !important;"><br></div>  <div>글쓰는 창 맨 위를 보면 요렇게 생긴 모양의 아이콘이 있습니다.</div><div>저게 바로 <u><b>'소스코드보기'</b></u> 입죠.</div>

빨갛게 된 부분에요~

그리고 내 컴퓨터 바탕화면이나 폴더에 있는 이미지를 글쓰는 창 안으로 drag&drop 합니다.

그럼 하단에 썸네일 이미지가 업로드 되는 모습이 보일겁니다.



썸네일 밑의 파란색 바가 가득 찬 후에
내가 넣으려던 (커서가 있었던) 곳에 이미지 태그( <img src="주소" alt="" width="" height="" )가 적용되면 이미지 삽입이 완료됩니다.

ex) 
<div style="background-color: transparent !important;">먼저 두가지 모드를 전환하기 위해서는&nbsp;<u><b>'소스코드보기'</b></u>라는 아이콘을 눌러줘야 합니다.</div><div style="background-color: transparent !important;"><br></div> <img src="htt p:// i.imgur.co m/Of86yrg.png" alt="" width="1064" height="361"> <div>글쓰는 창 맨 위를 보면 요렇게 생긴 모양의 아이콘이 있습니다.</div><div>저게 바로 <u><b>'소스코드보기'</b></u> 입죠.</div>

이렇게요!
꼭 이미지 태그가 삽입 된 후에~ 다른 일들(모드 전환이라든지, 다른 글을 쓴다든지의 일들)을 하시길 권합니다.

그리고 나서 '소스코드보기'를 누르면 이미지가 잘 첨부되었는지 확인 하실 수 있습니다~! ㅎㅎ

참고로 이미지 사이즈는 자동으로 조절되니 따로 손대실 필요가 없습니다. ^^

이상 간단하게 이미지 삽입법에 대해서 작성했습니다.
혹시나~ 관련해서 궁금한 부분들은 말씀 해주시면 언제든 답변 드리도록 하겠습니다!

감사합니다.

그럼 뿅!

3줄 요약.
  1.  소스코드보기 모드로 변환
  2.  이미지를 넣을 위치에 커서를 놓고 내 폴더에 있는 이미지를 drag&drop
  3.  이미지 태그가 삽입되면 업로드 끝!


  • 오오 정말 되는군요!
  • 아직 어렵네요ㅋㅋ
  • YoungHwan said:

    아직 어렵네요ㅋㅋ

    뭔가 복잡한 글들이 많아서 어려우실거에요 ㅠㅠ

    포인트는 마지막 세줄만 보시면 됩니다!!ㅋㅋㅋ
    소스코드 보기 누르고, 원하는 글씨 앞에 커서 놓고, 이미지를 드래그!!!
  • 자동으로 imgur에 업로드 되는건가요?
  • 추천 기능이 있다면 꾸욱 누르고 가고 싶은 좋은 글 입니다.

    감사합니다 ^^
  • 자동으로 imgur에 업로드 되는건가요?

    네!! 자동으로 됩니다!!!!!
  • KingHenry said:

    추천 기능이 있다면 꾸욱 누르고 가고 싶은 좋은 글 입니다.


    감사합니다 ^^
    기능 구현은!!! @avakdh 님께서!!!!!!
    ㅎㅎㅎ 감사합니다
  • 이미지 올리는 방법을 알려주셔서 감사드립니다... 근데 좀 어렵네요. 좀 더 쉬워지면 올릴 생각이 들 것 같아요.

  • 테스트입니다.

    모바일에선 이미지 올리는게 더 쉽네요!!!

  • 엣지에서 드래그 드롭 할려니 이렇게 뜹니다 확인부탁드립니다
    지금 사진 올리는 것도 캡처해서 폰으로 옮긴다음 올리는..ㅋㅋㅋ
  • YoungHwan said:


    엣지에서 드래그 드롭 할려니 이렇게 뜹니다 확인부탁드립니다
    지금 사진 올리는 것도 캡처해서 폰으로 옮긴다음 올리는..ㅋㅋㅋ

    으... 확인해보겠습니다. 수정이 쉽지 않을 수 있는데 여러가지 방법을 강구해보겠습니다.
  • 이미지 업로드 방식을 다들 아실만한 방법으로 바꿨습니다. 에디터 상단 툴바의 가장 오른쪽(이모티콘제외)의 소스보기 버튼 옆의 이미지 버튼을 누른 후 local image: browse라고 있는 버튼을 누르면 이미지 업로드가 가능합니다.

    Screen Shot 2016-03-06 at 01.05.19

    이렇게요.

  • CcxNhT7UUAAS_To

    시험해보니 잘 되는군요 ^^ 한결 쉬워졌습니다.
Sign In or Register to comment.