인라인블록
블로그에 글을 작성할 때 인라인 블록을 사용하는 이유는 다음과 같습니다.
- 텍스트와 함께 사용 가능: 인라인 블록은 텍스트와 함께 사용할 수 있습니다. 이는 글의 일부분에서 특정 부분을 강조하거나, 링크를 삽입하는 등의 작업에 유용합니다.
- 이미지와 함께 사용 가능: 이미지를 인라인 블록으로 삽입하면 텍스트와 함께 자연스럽게 흐르며, 레이아웃을 깔끔하게 유지할 수 있습니다.
- 간단한 스타일링: 인라인 블록을 사용하여 텍스트나 이미지에 간단한 스타일을 적용할 수 있습니다. 예를 들어, 글에서 특정 부분을 굵게 표시하거나, 링크를 다르게 스타일링하는 등의 작업이 가능합니다.
- 레이아웃 유연성: 인라인 블록을 사용하여 여러 요소들을 수평으로 나란히 배치하거나, 텍스트와 이미지를 함께 배치하는 등의 다양한 레이아웃을 구성할 수 있습니다.
이러한 이유들로 블로그에 글을 작성할 때 인라인 블록을 사용하면 보다 다양하고 풍부한 콘텐츠를 제공할 수 있으며, 독자들에게 더 흥미로운 글을 전달할 수 있습니다.
자바스크립트
// -------- 글자 코드 박스 설정하기 -------- //
const article = document.querySelector('.tt_article_useless_p_margin');
article.querySelectorAll('p s, li s, table s').forEach((el) => {
if (el.children.length > 0) {
if (el.querySelector('span')?.style?.color) el.querySelector('span').classList.add('textBlock');
else el.classList.add('textBlock');
} else {
el.classList.add('textBlock');
}
});이렇게 티스토리에 바로적용가능 하도록 스크립트를 만들었습니다. 이 스크립트의 사용방법은 티스토리에서 새로운 글을 작성하실 때 텍스트 가운데 선을 긋는 아이콘(취소선)을 선택하여 사용가능합니다.
자바스크립트 설명
이 스크립트는 특정 클래스(.tt_article_useless_p_margin)에 속한 요소들을 선택하고, 선택된 <p>, <li>, <table> 태그 안의 <s> 태그들을 찾습니다. 그런 다음, 각 <s> 태그에 대해 아래 정보와 같은 수행을 합니다.
1. 만약 태그 안에 자식 요소가 있다면,
- 태그가 스타일 속성으로 색상을 가지고 있는 경우, 그 안의 태그에 textBlock 클래스를 추가합니다.
- 그렇지 않으면, 태그에 textBlock 클래스를 추가합니다.
2. 만약 태그 안에 자식 요소가 없다면,
- 태그에 textBlock 클래스를 추가합니다.
이렇게 함으로써, 페이지의 특정 부분에서 태그에 대해 특정한 스타일 또는 클래스를 적용할 수 있습니다.
스크립트 디자인 CSS
.tt_article_useless_p_margin .textBlock {
margin: 0 2px;
color: #e96900;
padding: 2px 5px;
font-size: 0.9em;
border-radius: 5px;
background-color: #f8f8f8;
position: relative;
border: #f0f0f0 1px solid;
}스크립트가 준비되었으니, 이젠 스크립트로 만들어지는 클라스에 디자인을 해야 합니다. 위 css코드는 완성된 모습을 보여드리기 위해 임으로 만든 css코드입니다.
완성된 모습
A,S,D,F박스 안에 입력된 텍스트
이런 식으로 인라인블록처럼 만들 수도 있으며, 박스 안에 입력된 텍스트도 만들 수 있습니다. 자신의 블로그(사이트) 글 작성 스타일에 맞게 스크립트 또는 CSS를 수정하셔서 사용하시면 되겠습니다.
마무리
티스토리 블로그에 글을 작성하기 위해 서식을 사용하기도 하는데, 서식 사용하는 것도 귀찮을 때 이런 방법을 알아두면 좋습니다. 부득이하게 스킨을 교체한다거나 할 때 잘못된 서식으로 작성된 글은 하나씩 수정을 해야 하지만 스크립트로 작성된 글은 스크립트만 수정하면 돼서 어떻게 보면 블로그를 관리하는데 더 좋은 장점을 가지고 있습니다.
