😁 Free Talk
[FreeTalk] 스토브 인장을 만들어 봅시다! [27]
그러니깐 위와 같은 물건 말이죠.
그냥 이미지로 붙여 넣어도 되지만, 코드만으로 구성된 인장은
링크를 넣거나, 손쉽게 수시로 글을 수정하거나, 반응형 웹에서도 잘 보이는 등...
아무튼 이미지 그냥 넣는 것 보다는 좋다는 말을 정말 열심히 설명해 봤습니다.
돈과 시간을 주신다면 인장 제작기 같은 프로그램을 만들 수도 있을 것 같지만...
둘 다 없으니 그냥 장문의 글로 대신합니다.
■ 초보자를 위한 쉬운 버전
<div style="overflow:auto; width: 90%; margin: auto; border: 4px double white; border-radius: 8px; background-image: url(배경으로 사용할 이미지 주소);background-position: center ; background-size:100%; padding: 10px; color: whitesmoke; text-shadow: black 1px 0 5px;"> <div style="width:150px;height:150px;margin-left : 5px; margin-right: 20px;border-radius: 8px; border: 1px solid white; float:left;background-image: url(프로필 사진 주소);background-size:100%;"></div> <p style="padding-bottom:8px;font-size: 22px;">닉네임</p> <p>하고 싶은 말을 적어주세요.</p> <p><br></p> <a href="프로필 페이지 주소" rel="noopener noreferrer" target="_blank"><span style="color: lightcyan;">🤪 프로필 페이지</span></a> <a href="작성한 글 페이지 주소" rel="noopener noreferrer" target="_blank"><span style="color: lightcyan;">👌 작성한 글들</span></a> <a href="https://page.onstove.com/indie/global/view/10125425" rel="noopener noreferrer" target="_blank"><span style="color: lightcyan;">✨인장 만드는 법</span></a> </div>
여기서 노란색 배경으로 색칠 된 부분만 수정해 주시면 즉시 사용하실 수 있습니다.
헷갈릴 수 있는 부분과 어려울 수 있는 부분만 지적하자면...
첫번째 - 배경으로 사용할 이미지의 “인터넷 주소”를 넣어주시면 됩니다.
스토브는 “외부 이미지 사용을 막고 있습니다.” 반드시 스토브에 업로드한 이미지를 사용해야 합니다.
한번 업로드한 이미지는 계속 쓸 수 있으니, 최소 한번의 업로드가 필요하다는 말이죠.
두번째 - 프로필 사진에 표시될 이미지의 “인터넷 주소”를 넣어주시면 됩니다. 가능한 정사각형의 200*200 이하의 이미지 사용을 권장 드립니다.
프로필 주소 - https://profile.onstove.com/ko/회원번호
작성한 글 주소 - https://page.onstove.com/indie/global/activity/회원번호
마지막 줄에 (회색 칠한 곳) "✨인장 만드는 법"은 통째로 지워주셔도 됩니다.
이모티콘 - 수정이나 원하시는 이모티콘을 추가하고 싶으신 경우 "윈도우 + . " 를 누르시면 이모티콘 특문을 입력하실 수 있습니다.🫡
※ 주의 : 붙여넣기를 할 때는 반드시 모든 “엔터”를 지워주세요.
처음 등록 때는 아무 문제 없지만, 글 수정을 누르면 이 엔터를 전부 <br>(줄바꿈)으로 치환해서 인장이 박살납니다.
이렇게 한번 만들어 놓은 코드를 메모장 등에 복사해 놓으셨다가, 글 작성 후 마지막에 </> 소스를 눌러 붙여넣으시면 끝!
여기까지만 하셔도 충분하시겠지만, 조금 더 커스텀을 하고 싶으신 분은 아래를 참고해 주세요.
■ 상세한 세팅 가이드
＠＠ 첫번째 줄
<div style="overflow:auto; width: 90%; margin: auto; border: 4px double white; border-radius: 8px; background-image: url(배경으로 사용할 이미지 주소);background-position: center ; background-size:100%; padding: 10px; color: whitesmoke; text-shadow: black 1px 0 5px;">
- border : 외곽선의 스타일을 설정할 수 있습니다. “4px double white”의 3가지 값은 각각 두께, 형태, 색상을 의미합니다. 당연히 RGB 코드나 색상 코드(#000000) 무엇이든 이용하실 수 있습니다. 외곽선의 스타일은 아래 이미지를 참고해 주세요.
그런데 그냥 4px double이 가장 깔끔해요 ㅋㅋㅋㅋ 색상만 조절하시길 추천 드립니다.
- 배경 셋팅
background-image: url(배경으로 사용할 이미지 주소);
background-position: center center;
background-size:100%;
배경 이미지는 “반드시 스토브에 올려진 이미지”를 사용해야 합니다. 외부 이미지는 허용하지 않더라고요.
그리고 인장을 2개 이상 넣으면, 스토브에 올려진 이미지라도 경고가 뜹니다. 어째선진 모르겠네요;;;;;;
background-position은 X축 조정, Y축 조정을 의미합니다. px 단위로 입력하셔도 되고, 음수 (-41px)도 이용하실 수 있습니다.
background-size는 배경이미지의 크기를 배경에 맞춰 조정하는 역할 입니다. 아예 지우시면 이미지는 원본 사이즈의 배경으로 (크면 잘려서) 출력됩니다.
아래 샘플을 통해 어떤 느낌인지 확인해 보세요.
background-image: url(https://d2x8kymwjom7h7.cloudfront.net/live/application_no/119000/indie-center/indie_%EC%9D%B4%EB%B2%A4%ED%8A%B8_%EC%83%81%EC%84%B8_%EB%B0%B0%EA%B2%BD%EC%9D%B4%EB%AF%B8%EC%A7%80_pc_2560x440_ffffff_1713406747144.jpg);background-position: center center;
(background-size은 삭제)
background-image: url(https://d2x8kymwjom7h7.cloudfront.net/live/member_no/307142/application_no/96001/COVER/COVER/42/71/30/0/0/307142_1701178876890.png); background-position: -21px center; background-size: 130%;
- 폰트 색상과 폰트 그림자입니다.
color: whitesmoke;
text-shadow: black 1px 0 5px;
대부분 어두운 배경을 넣으면 흰색이나 노란색 계열이 잘 맞습니다. 그래서 폰트 색상은 흰색 계열로 잡았고, 역시나 색상코드 적용 가능합니다.
반대로 검은 계열 텍스트 색상에, 쉐도우는 밝은 색을 넣어주시면 글이 잘 보일 것입니다.
텍스트 그림자는, 각각 색상 , X축 어긋남, Y축 어긋남, 그림자 번짐을 의미합니다. 색상 정도만 조정해 주세요. 그림자가 선명하길 원하면 가장 뒤의 5px을 낮춰주세요.
＠＠ 두번째 줄
<div style="width:150px;height:150px;margin-left : 5px; margin-right: 20px;border-radius: 100%; border: 1px solid white; float:left;background-image: url(프로필 사진 주소);background-size:100%;"></div>중요한 항목은 아래와 같습니다.
border 위에서 설명한 같은 스타일입니다. 프로필 이미지를 감쌓고 있는 외곽선입니다.
border-radius 프로필 이미지의 곡률을 정합니다.
스토브 프사는 원형으로 출력되기에 100% 를 입력했지만, 원하시면 사각형에 가깝게 (8px 추천), 이외에도 원하시는 만큼 조정하시면 됩니다.
첫번째 줄에도 border-radius가 있는데 조정해 주셔도 됩니다.
그리고 border는 border-image도 사용하실 수 있는데, 이건 그냥 인터넷 검색하시고 generater 를 사용하시는 편이 좋으니 설명은 패스합니다.
@@ 링크 영역
span style="color: lightcyan;"
링크 부분에 색상을 주기 위해 추가한 영역인데, color가 폰트 색상입니다. 마찬가지로 색상코드 사용할 수 있습니다.
@@ 주의 사항
완성 후에는 “휴대폰과 라운지에서도 한번 봐 주세요.” PC와는 조금 다를 것입니다.
반응형에서 문제가 없을 코드만 사용하긴 했지만, 내용에 따라 어색해 보일 수 있습니다.
라운지에서링크 밑줄은 어떻게 해도 안사라지는 군요.
text-decoration 스타일인데.. 흠...
@@ Q&A) 이게 무슨 의미가 있나요?
자기 만족입니다. 이외에는 없습니다;;;
이외에도 막히거나 궁금하신 점은 언제든 댓글로 남겨주세요.
아는 한도에서는 답변해 드릴 수 있을 겁니다.
그리고 별거 정말 아닌 코드지만... 해당 코드의 수정 및 재배포는 자유입니다. ^^
+ 정 코드 다루기 어려우신 분은 각 항목에 채울 이미지와 내용만 댓글로 남겨주시면, 시간 날 때 만들어드릴 수도 있습니다.ㅎㅎㅎ
Reply 27
Notification has been disabled.
To enter a comment Log In Please
집념의 인장....
이런거 만드는 재미로 커뮤니티 하죠 ㅋㅋㅋㅋ
촉촉한감자칩확실히 그렇긴하죠.
이렇게 커뮤에 발을 담그기 시작하면 헤어나오지 못하는...
능력자!
저도 해봐야지 생각만 하다가 귀찮아서 ㅋㅋㅋㅋ
GIF 까지 넣어서 한번 도전 해봐야곘네요
오오 화이팅!
막히는 부분 있으면 얼마든지 댓글 남겨주세요~
컴맹인 저로서는 으윽 머리가....리뷰할때 참고해봐야겠네요!
촉촉한감자칩배경으로 사용될 이미지 주소와 프로필 사진 주소 부분이 이해가 안가서 질문 드렸습니다.
적어주신 기본틀을 복붙하고 마이 프로필 들어가서 프로필 이미지와 커버 이미지에다 마우스 우클릭을 누르고 '이미지 링크 복사'를 눌렀는데도 적용이 안되더라고요.
이미지 링크 복사 부분을 어떻게 해야 적용될까요?
아인ii고향집 다녀오느라 이제 확인을 했네요 ㅎㅎㅎ
복사한 이미지 링크를 댓글로 남겨봐 주실 수 있을까요? 붙여넣기 형태는 아마 아래와 같을 겁니다.
https://d2x8kymwjom7h7.cloudfront.net/live/member_no/307142/application_no/96001/timeline/undefined/undefined_1701226073676880.jpg
복붙 과정에서 따옴표나 괄호가 누락되는 경우가 있을 수도 있어서, 괜찮으시다면 편집하신 소스를 남겨주시면 더욱 쉽게 도움을 드릴 수 있을 것 같네요!
스토브는 왜 스크랩기능이 없는거죠? 스크랩 마려운 글인데?
극찬 정말 감사합니다.
게시판에는 없지만 라운지 기능을 사용해 보시면 어떨까요?
1. 일단 라운지에서 해당 글에 들어간다.
https://lounge.onstove.com/view/10125425
2. 글의 끝에서 우측 하단에 있는 "책갈피 모양"을 누른다.
3. 자신의 프로필(상단 메뉴의 자신 닉네임)로 들어가면 우측 메뉴에
홈 > 게임 > 게시글 > "저장" 페이지로 들어가면 조회하실 수 있습니다.
인벤에서 한창 활동할 때도 저런거 만들었었는데 ㅋㅋ
주소 복붙만 하시면 되요 ㅠㅠ 화이팅 ㅠㅠ
Reply has been hidden by writer.
어려워보이긴 하지만, 해보면 생각보다 쉽습니다 ㅎㅎㅎ
건설게임 재밌게 하신거 어떤거 있으신가요?
조금 하드한 것들인데 괜찮으시겠어요? ㅎㅎㅎㅎ
펙토리오, 세티스팩토리, 캡틴 오브 인더스트리, 쉐이프즈 io 등이 있습니다.
게임들 미리보기 -https://page.onstove.com/indie/global/view/9744264?boardKey=10005
평범하게 도시 만들기 게임이면 심시티~시티즈까지 전부 재밌게 하긴 했네요 ㅋㅋㅋ
촉촉한감자칩
이건 진짜 꿀팁이네요. 나중에 심심할 때 한번 만들어 보고 싶습니다.
글 쓰실 때 아래에 인장하나 달아놓으면 뭔가 있어보입니다 ㅋㅋㅋ
그림파일인 줄 알았는데 html, css 사용한 거 였군요