티스토리 텍스트 박스 만들기

티스토리 텍스트 박스 만들기

자동으로 텍스트 박스를 만들기 위한 방법을 소개해 드립니다. 텍스트박스 만들기 순서는 아래에서 설명할게요.

 

1. 첫번째

텍스트 박스 CSS 설정을 해주셔야 합니다.

(a)안에는 원하시는 글자 입력하세요. 나중에 글작성할때 필요합니다.

.(a)-box {
    position: relative;
    border: 1px solid #1e73be;
    padding: 10px;
    margin-top: 20px;
    margin-bottom: 20px;
    z-index: 1;
    border-radius: 10px;
}

위 코드 내용을 설명해드릴게요.

 

 

border는 박스 테두리입니다.

 

사진에서 보다싶이 해당 코드를 지우면 박스가 없어져요. solid #코드는 테두리 색상입니다. 색상을 알고 싶으시면

 

색상팔렛트 : 네이버 통합검색

여기서 색을 선정하셔서 코드 입력 해주시면 됩니다.

 

 

padding은 박스에서 텍스트까지의 간격입니다.

 

원하는 만큼 설정해주시면 간격이 벌어지는 것을 보실수 있어요.

 

 

 

margin-top과 margin-bottom은 박스 위 아래 간격입니다.

간격을 벌리면 글과 간격을 설정 할수 있어요. 간격을 많이 벌리면 가독성이 올라 갈수있겠죠?

 

 

border-radius는 박스 라운드입니다.

 

이렇게 설정하면 각진 모서리에 라운드를 줄수 있습니다.

position: relative;

z-index: 1; 는 다른 테그들 보다 위로 올라오게 하기 위한 코드입니다. 그냥 입력하시면 됩니다.

 

이렇게 설정해주시면 CSS코드는 완성이 됩니다. 이것을 어디에 입력 하나면.

 

 

티스토리 > 스킨편집 > html편집 > CSS 쪽으로 가서 해당 코드를 입력 하시면 됩니다. 해당 코드는 CSS맨아래에 추가로 넣어주고 저장하시면 끝이 납니다.

 

 

글작성에 적용하시려면

 

 

글작성 HTML 들어가서

<div class="(a)-box">
텍스트 입력</div>

이렇게 입력하시고 글작성 하시면 됩니다.

 

 

(a)는 위에서 설명 드렸다 싶이 본인이 설정하고 싶은것으로 하시면 됩니다.