일단 이미 업로드 기초이자 이미지 업로드에 주로 쓰이는 Imgur에 대해 알려드리겠습니다.
이런게 있는데요
일단 둘 중에 암거나 해도 크게 상관될건 아니지만 일단 자신의 기기에 있으신 파일을 올리는 거로 가정하고'Computer'을 눌러 주세요.
(근데 사실대로 말하자면 그냥 파일을 홈페이지로 드래그해도 됨니다...;;;)
각 버튼의 용도는 이미 적혀있으니 생략 하겠습니다.
궁금하면 직접 해보시든가...
만약 올리실 이미지를 다 올리셧으면 'Start Upload'를 눌러 주세요.
근데 "어라?! 나 이미지 여러개 올렸는데?! 혹시 일일이 하나씩 올려야돼?!"
출쳐:Futurama
...라며 위에 있는 짤같이멘붕하실 성격 조급하실 분을 위해 미리 설명을 드리자면
요로콤 뜰건데요.
왼쪽 위를 보시면 요런게 있을 껍니다.
<요거요거
여기서 선택 하실수 있습니다.
물론 회원가입을 하시거나 큐글이나 트뤼터, 페붘, 야훗 같은 곳에 계정이 있으시다면 로그인을 하시면
왜? 뭐요?
이렇게 이미지들을 관리 할수 있습니다!
나중에 이미지가 필요할때(덧글 이미지 올리기 등)에 유용하게 쓰일수 있습니다.
암튼 이제 이미지를 올리시면 옆에 주소들이 적혀 있는걸 제가 알려드리겠습니다.
왜? 뭐? 왜?
일단 제가 아는 한에서 알려드리자면 맨위에 Link, Direct Link, HTML Image 를 알려 드리겠습니다.
(사실 그외는 제 경험상 쓰인적이 전혀 없습니다.)
Link는 알다시피 그냥 이미지 링크 이고요.
Direct Link는 오유 덧글 창에 적으시면 제아무리 큰이미지라도 올릴수 있습니다!
(물론 Imgur 특정상 5MB가 한계인게 함정<프리미엄으로 업글 해도 10MB...>)
마지막으로 HTML Image는 게시물 작성시 많이 쓰일 껍니다.
이거는 오유에 게시물을 작성할때 보시면 왼쪽 아래에 연필하고, <>, 돋보긔가 있습니다.
<요거
이중에 <>를 클릭 하시고 복사하신걸 붙여 넣으시면 됩니다.
이제 대충 기초는 다 설명 해드린거 같으니 이제 여러분들의 게시물을 이~뿌~게 꾸며줄 꼬릿말 HTML들을 알려드리겠습니다.☆
=======================================================================================================================================
<추천,반대,뒷북>
<style>#okNokBookDiv img:nth-child(1){width: 0px;height: 0px;padding-left:114px;padding-top:136px;background: url("추천 이미지 주소") no-repeat;}#okNokBookDiv img:nth-child(2){width: 0px;height: 0px;padding-left: 114px;padding-top: 136px;background: url("반대 이미지 주소") no-repeat;}#okNokBookDiv a img:nth-child(1){width: 0px;height: 0px;padding-left: 114px;padding-top: 136px;background: url("뒷북 이미지 주소")no-repeat;}
</style>
일단 추천과 반대, 뒷북 설정을 알려드리겠습니다.
일단 제가 각 버튼들을 만들때는 이미지 크기를 115 x 135 정도로 맞추고 만들었습니다.
(제 추천, 반대 버튼은 지금은 HTML충돌인지 뭐 때문에 문위크<?!>추는 뒷북 버튼 밖에 없지만여...)
만일 이미지들을 만들어 위에 알려준대로 imgur에 올려
Direct Link에 쓰인 주소를 각 용도에 맞게 붙여 넣기를 해주시면
이렇게 꾸며집니다.
이로써 여러분들의 게시물의 빼퓰러스함(?!) 레벨이 한층 상승 되었습니다!
(사실 Fabulous임...)
자, 이제 다음으로 가보겠습니다!
=======================================================================================================================================
<닉넴>
<STYLE>#login_span span b a:before{content: "상단 닉넴 앞에 ";}#memo_insert_form div b:before{content: "하단 낙네임 앞에";}#memo_insert_form div b:after{content: "하단 닉네임 뒤에";}</STYLE>
이게 뭐냐면여
가끔 어떤분들 게시물에 들어가면 닉넴 앞에 뭐라 써있는걸 보셨을 껍니다.
<상단 버젼
<하단에 덧글 버젼
이건 그냥 붉은 표시 되어 있는 부분에 입력시면 됩니다.
특히 하단은 아래 같이 여러가지로 응용이 가능합니다.
EX)
=평상시
=도움 요청 할때
=쫠라톤 할때<?>
암튼 덧글란은 여기 까지입니다.
이로써 여러분들의 게시물이 가진 유니크함이 업 했습니다!
그럼 다음으로 가시죠
=======================================================================================================================================
<덧글 이미지>
<STYLE>textarea{background:url("이미지 주소"); border-width:1; border-color:#3594FC; border-style:solid;}</STYLE>
요거는 덧글창을 꾸밀때 쓰이는 겁니다.
EX)
(크기 조절 Fail)
제껀 824 x 100인데 여러분은 좀더 늘려주시는게 좋을거 같습니다.;
아무튼 적용법은 앞서 말한 버튼 이미지 적용법과 같습니다.
고로 생략하겠습니다☆
귀찮은건 안비밀
=======================================================================================================================================
<뒷 배경>
<style>div.whole_box {background-image:url(이미지 주소);background-attachment: fixed;background-repeat;} </style>
<뒷배경(스크롤 움짤 버젼)>
<style>div.whole_box {background: url('움짤 주소'); background-attachment: fixed; background-repeat: no-repeat; background-position: bottom left; background-size: 200px;}</style>
가끔가다보면 게시물 뒤에 뭔가 화려한 배경이 있잖아요.
그걸 꾸며주는 HTML입니다.
일단 제가 HTML을 두개 입력해놨는데요
하나는
이렇게 일반적으로 꾸며주는 HTML이고요
또하나는
움짤이 스크롤을 내리면 움직이지만, 스크롤이 멈추면 멈추게 만들어주는 HTML입니다.
취향대로 골라주시면 됩니다!
=======================================================================================================================================
<게시판 정보>
<STYLE> div.writerInfoBgMiddle {background-image:url(http://i.imgur.com/uQpb1hD.png); background-repeat: repeat; background-position: middle;} table { background-color: transparent; } td { background-color: transparent; } </STYLE>
<게시판 정보 뒷배경>
<STYLE> div.writerInfoBgRight {background-image:url(http://i.imgur.com/Ojw5Sy7.png); background-repeat: repeat; background-position: middle;} table { background-color: transparent; } td { background-color: transparent; } </STYLE>
<STYLE> div.writerInfoBgLeft {background-image:url(http://i.imgur.com/Ojw5Sy7.png); background-repeat: repeat; background-position: middle;} table { background-color: transparent; } td { background-color: transparent; } </STYLE>
이거는 둘이 셋트인 HTML입니다.
일단 위에 꺼는
이렇게 게시판 정보창을 이렇게 만들어 줍니다.
이미지 크기는 대충 800*300정도면 적당할거 같습니다.
그 아래꺼는
정보창 옆에 나란히 있는 것들 입니다. 기둥같은 이미지로 꾸미면 좋을거 같습니다.^^
==============================================================★뽀너스!☆==============================================================
<오유 타이틀, 뒷북, 닉넴, 덧글 입력>
<p></p><style>div.okNokBookDiv>a>img{position:relative;z-index:10000;animation:mymove 3s linear infinite; /*W3C and Opera*/-moz-animation:mymove 3s linear infinite;-moz-animation: myfirst 3s linear infinite; -webkit-animation: myfirst 3s linear infinite; -o-animation: myfirst 3s linear infinite; }@-webkit-keyframes myfirst {0%{left:230px ;top:0}100%{left:-500px;top:0px}}#okNokBookDiv a img{content:url("뒷북 이미지");}#logo_line1 a img{content:url("오유 타이틀 이미지<모바일>");}#login_span span b a:before{content: "상단 닉네임 앞";}#memo_insert_form div b:before{content: "하단 닉네임 앞";}#memo_insert_form img{content:url("덧글 입력 창");}#logoDiv_white a img{content:url("오유 이미지 타이틀<데스크 탑>");}</style>
이거는 각각 붉은 색으로 써잇는 곳에 알맞은 이미지를 넣어 주시면 됩니다.
다른건 다 알려드려서 생략하고 오유 타이틀은
뭐... 달라진거 있는게 보이시나여?
<요거요...
저거 은근 눈치 못챈 분이 많아서 슬펐던 거 입니다.ㅠㅠ
바꾼지 3주 정도 되었지만 소수의 분들만 뒷북만 언급해주고 저건 언급안해줘서... 크흡...
흠흠...사적인 이야기는 넘겨두고, 저렇게 오유 타이틀을 바꿔주는 강크려한 HTML입니다!
하지만 대부분 눈치를 못 채는게 함정...
암튼, 크기는 각각 모바일은 228*33, 데스크 탑은 380*66입니다.
제가 일단 예시 이미지를 드릴테니 이걸 참고 해주세요.^^
덧글 입력은 이렇게 변합니다.
이상하게 저렇게 두개가 되네요;;;
물론 오른쪽만 정상 작동 됩니다.
덧글 입력창의 크기는 221x24입니다.
아래는 마찬가지로 참고 이미지 입니다.^^ 알아서 사포질해서 쓰셔주세요...
원래 글자 없던건 사라져서...
ㅠㅠ
※참고로 이걸 적용시키면 이상하게 추천, 반대 버튼이 사라짐니다. 또한 이상하게 원래 오유 타이틀이 모바일에선 변경이 안되네요.
그렇다고 저 부분을 지우지 않는게 좋습니다. 안그러면 데스크 탑도 안됩니다.※
참고로 아래에 적어 놓은 HTML은 어떤분의 게시물에서 꺼내와 참고했던 HTML입니다.
<p></p><style>div.okNokBookDiv>a>img{position:relative;z-index:10000;animation:mymove 3s linear infinite; /*W3C and Opera*/-moz-animation:mymove 3s linear infinite;-moz-animation: myfirst 3s linear infinite; -webkit-animation: myfirst 3s linear infinite; -o-animation: myfirst 3s linear infinite; }@-webkit-keyframes myfirst {0%{left:230px ;top:0}100%{left:-500px;top:0px}}#okNokBookDiv a img{content:url("뒷북");}#logo_line1 a img{content:url("오유 타이틀(모바일) ");}#login_span span b a:before{content: "닉넴 상단";}#memo_insert_form div b:before{content: "닉넴 하단 앞";}#okNokBookDiv img{content:url("추전, 반대");}#memo_insert_form img{content:url("덧글 입력 창");}#logoDiv_white a img{content:url("오유 타이틀(데스크 탑)");}#okNokDiv img{content:url("추전, 반대");}#okNokBookDiv img{content:url("추천, 반대");}</style>
<☆지진☆>
<div></div>
<link rel="stylesheet" type="text/css" href="https://dl.dropboxusercontent.com/u/209802803/shake.css" />
<div class="shake"></div>
넵, 게시물을 좌우로 쉐킷!쉐킷!을 해줘서 지진 일어난거 같은 효과를 주는 HTML입니다.
장난으로 적용시켜주면 좋을거 같습니다.^^
(다만 이게 게시물 번호를 누르고 들어오면 적용이 안되네여.)
<알면 좋(을거 같)은 사이트>
들어가시면
이렇게 있는데요.
여기가셔서 여러가지 기능들은 직접가서 체험해보세요.^^
따... 딱히 귀찮서 그런게 아냐!(뿌끄...<?!>)
=======================================================================================================================================
<후기>...랄까?
후... 이 게시물이 아마 제가 그동안 작성했던 오유 게시물 중에서도 제일 오래걸리고 힘들었던 게시물이 였던거 같네요.
아마 7시 쯤에 작성을 했으니 밥먹고 뭐한 것만 빼도 2시간은 걸렸네요;;;
아무튼 감히 제주제에 여러분들을 가르치는게 우숩네요. ^^;
사실 저는 프로그래밍쪽으로는 전혀 관련이 없는 (굳이 말하자면)에체능쪽 입니다.
여기 쓰인 정보들은 제가 여러 게시물에서 적용된 것들을 가져와봐서 여러번 적용해보고 나온 경험상의 정보입니다.
그런 이유로 많이 틀리거나 그런 부분이 생길 것입니다.;;;
만일 제 게시물에 지적할부분이 있다면 따끔한 지적 부탁드리겠습니다.
암튼 그리고, 이게시물을 작성하면서 꾀나 즐거웠던거 같았습니다.^^
작성하면서 최대한 재미있게 적을려고, 쉽게 이해될 수 있는 방법들을 생각 했지만
아마 포게님들은 지루하게 읽으셨을거 같네요. ^^;
그래도, 제 팬픽보다 이게 훨배 재미있네요.ㅋ
아무튼... 네, 이걸로 많은 분들이 잘 이용해주셨으면 좋겠네요.
그럼 이만 물러나겠습니다.
그럼 이만갑오개혁!☆
(뿅☆)
