스토브

얼마 전 열심히 테스트 글을 작성했는데, 보지 말아 달라는 글 제목과 달리 엄청나게 많은 사람들이 봐 버린 참사가...

아무튼 해당 글에서 이런 저런 테스트를 마치고, 그나마 사용 할만한 팁을 몇 개 뽑아 봤습니다.

한번 사용해 보시면 아시겠지만, html 소스를 직접 만져야 하다 보니 상당히 귀찮은 건 어쩔 수 없습니다.

■ 접고 펼치기

<details><summary>펼치기 버튼</summary>숨겨진 내용</details>

■ 이미지 꾸미기

<img src="이미지 주소" id="이미지id" articleid="글id" communitykey="indie" class="fr-fic">

바로 위에 보이는 게 “일반적인 이미지 소스의 구성"입니다.

여기 사이에 (위치는 <괄호> 속이면 어디든 괜찮습니다.) style=”다양한 값”을 추가해 주시면 될 뿐입니다.
이것 만으로도 정말 편하고 다양하게 이미지에 효과를 주실 수 있습니다. 동시에 적용할 수도 있습니다.

추천은 그림자와 모서리 둥글게 2종을 동시에 사용한 아래 코드를 복사해 놨다가,
필요한 이미지에만 해당 코드를 붙여 넣는 방법으로 이용하기 좋습니다.

style="filter: drop-shadow(gray 1px 1px 3px); border-radius: 8px;"

> 사용 예시

미디어 보기 미디어 보기 미디어 보기 미디어 보기 미디어 보기 미디어 보기

순서대로 블러 처리, 기울기, 비틀기, 그림자, 둥근 모서리, 둥글게

style="filter: blur(2px);"
style="transform: rotate(10deg);" - 라운지에서 사용불가
style="transform: skew(-10deg);" - 라운지에서 사용불가
style="filter: drop-shadow(gray 1px 1px 3px);"
style="border-radius: 8px;"
style="border-radius: 100%;"

일부 이미지는 잘 보이라고 외곽선(border:1px solid black)을 추가로 넣었습니다.

■ 글상자 만들기

<div style="overflow:auto; margin:auto; width:90%; border: 2px ridge aliceblue; border-radius:8px; background: darkslateblue; padding:10px; color: whitesmoke;">본문 작성</div>

활용도가 높은 글상자 태그 입니다. 갑자기 복잡해 보이긴 하지만, 하나씩 끈어 보면 어렵지 않고,
자유로운 커스터마이징이 가능하니, 이런 저런 값을 조정하면서 원하는 스타일의 글 상자를 만들어 보세요!

· overflow: auto;
스크롤 표시를 숨기기 위한 & 유연한 글 상자를 만들기 위한 부분입니다. 그냥 두세요^^

· margin : auto;
강제로 가운데 정렬을 하기 위한 꼼수입니다. 그냥 두세요 ㅎㅎㅎ

· width : 90%;
가로 길이를 입력하는 부분입니다. 휴대폰에서 볼 경우 70% 이하로 하거나 350px 이상으로 하면 보기 좋지 않으니, 이 값에 유의해 주세요.

· border : 2px ridge aliceblue;
글 상자를 감싸는 테두리입니다. 각각 두께, 형태, 색상을 의미하며 색상코드(샾 코드)를 사용하셔도 됩니다.

· border-radius : 8px;
 글상자의 모서리를 둥글게 만드는 스타일 입니다. 마음껏 조절해도 괜찮고, % 값으로 입력하셔도 됩니다. 100%하면 구체 글상자가 만들어집니다.

· padding:10px;
글 상자 안쪽의 여백입니다. 좁아 보이시면 조절하셔도 좋습니다.

· background: darkslateblue;
글 상자의 배경 색상입니다.

 
· color : whitesmoke;
글 상자 내의 글자 색상입니다.

· text-shadow: 0 0 6px gray;
글 상자 내의 글자 그림자입니다.

> 사용 예시를 참고해서 자신만의 멋진 글상자를 만들어 보세요!

이 내용은 추천하지 않지만, 몇몇 분들에게는 정말 매우 유용할 것입니다.
스토브 기본 서체의 단점이 폰트 웨이트가 너무 높아서, 일반 서체와 볼드체가 거의 차이가 없다는 단점이죠.

그래서 볼드넣고 색상까지 넣어야, 원하는 부분을 강조할 수 있다는 ㅠㅠ

바로, 스토브 기본 서체와는 다른 폰트를 사용하는 방법입니다.

style="font-family:궁서체;"

style="font-family:나눔고딕;"

style="font-family:굴림;"

추천하지 않는 이유는, 해당 글을 보는 분의 컴퓨터에 해당 폰트가 설치되어 있지 않다면 기본 폰트로 출력되다보니,
아예 적용되지 않는 경우도 있습니다.

자신이 작성하는 문서 전체에 적용하고 싶다면,
문서 시작과 끝을 <div>~~</div>로 감싸고, 해당 div에 위 폰트 패밀리 스타일을 넣어 주시면 문서에 통째로 적용됩니다.

지금 이 글 처럼 말이죠. 고딕 폰트를 적용해 놨습니다.
볼드가 아주 확실하게 구분되죠 ㅎㅎㅎ

■ 태그 또는 이미지 숨기기

# 을 넣어 태그를 등록하는 기능은 좋지만, 마지막 부분에 샵 태그, 그리고 하단에 자동 등록되는 태그가 중복되는 내용이 거슬릴 수 있습니다. 대부분 신경도 안쓰시는 부분이긴 한데, 웹 기획 업무를 담당했던 사람으로써는 좀 심하게 걸리는 부분입니다.

이외에 썸네일 이미지를 등록하고 싶은데, 대표 이미지 별도 등록은 좀 용량과 기능(움짤) 제한등이 있는 것도 아쉽습니다.

이런 경우, 삽입은 하되 내용을 숨기기 위한 방법입니다.

소스에 들어가서 숨기기 원하는 내용에 아래 스타일 코드를 추가하면 끝입니다.

style="display:none;"

예를 들어 태그와 같은 경우는 아래 같이 되네요.

<p>샵태그 샵태그 샵태그 샵태그</p>

를

<p style="display:none;">샵태그 샵태그 샵태그 샵태그</p> 

로... 이미지의 경우도 <img ...... style="display:none;"> 와 같은 형태로 작성하시면 됩니다.

■ 스타일 코드의 범용성에 대해서

CSS 스타일은 이미지나 div, span 구분 없이 사용할 수 있는 특성이 있습니다.
그러니 이미지 꾸미기에 사용한 다양한 스타일을, 글상자, 또는 문장이나 일부 단어에도 적용할 수 있다는 말이죠.

물론 이 모든 건 소스에서 직접 편집을 해야 한다는 단점이 있어 미리 코드에 익숙해질 필요가 있습니다.
바로 아래가 위에 나왔던 모든 코드를 한 자리에 때려박은 예시입니다 ^^

이미지 좌측 또는 우측 배치 후 글을 쓸 수 있는 기능(float)도 있었는데,
이건 라운지에서 깨져서 출력되어 버렸네요.정작 div에 float을 적용하면 잘 작동하는 걸 보면,
아마 이미지 float 스타일은 오버라이드 되는 듯 싶네요.
그냥 표 기능을 활용하시면 될 것 같습니다.

어렵게 적어 버렸지만, 그냥 사용하기에는 너무나 불편하다보니 실용성이 상당히 낮은 항목들은 뺐습니다.

위 내용과 관련하여 궁금한 점이나, 사용 중에 어떤 문제가 발생하시면 댓글 남겨주세요.

아는 한도에서는 도움을 드릴 수 있을 것입니다.

※ 주의

코드를 넣으신 다음에는 반드시 "코드에서의 줄 바꿈(엔터)을 전부 지워 주세요." 첫 등록에는 문제 없지만,

수정을 누르는 순간 코드에 있는 엔터를 전부 <br>로 치환해서 글의 양식이 부서질 수 있습니다.

여러분들의 멋진 글을 응원하며 마치겠습니다.

촉촉한감자칩

🫡🫡🫡 즐겜을 위해 하루하루 살아가고 있습니다.

미소녀 게임, 건설 경영 게임을 사랑합니다!