티스토리 블로그의 장점은 내가 사용하는 스킨의 기본 틀 아래 글을 쓸 때 HTML과 CSS를 활용하여 레이아웃을 내 스타일대로 꾸밀 수 있다는 장점이 있습니다. 초반에 블로그를 시작할 때 어떤 블로그를 이용할까 고민하다가 티스토리 블로그를 선택하게 된 이유 중의 하나이기도 합니다.
HTML과 CSS를 잘 몰라도 조금만 검색하여 활용만하면 기존의 것도 내 스타일대로 조금은 바꿀 수 있다는 것입니다.
글을 쓸 때 거창하게 소설처럼 쓰지 않더라도 서론 본론 결론으로 나누어 쓰게 되는데 보통 [텍스트 상자가 필요한 이유] 처럼 서식을 활용한 소제목을 쓰게 됩니다. 그러나 소제목안의 글 내용도 분류하는 경우가 있는데 그럴 때 단순히 숫자 1. 2. 3. 이라던가 a. b. c. 처럼 뭔가 단순하게 하는 것보다는 그래도 글상자를 활용하게 되면 덜 밋밋하게 됩니다.
텍스트 박스를 활용한 예제입니다.
우선 html의 소스는 다음과 같습니다. 우선 아래의 첨부파일을 받으시면 됩니다. 내용을 복사하여 블로그관리-서식쓰기-서식으로 저장하시면 되는데, 소스를 서식으로 저장할 때는 글쓰기 모드를 html로 변환시켜 저장하셔야 합니다.
<div class="note1">
<p>여기다 글을 쓰세요</p>
</div>
다음은 css의 소스입니다. 역시 첨부된 파일을 별도로 받으시면 됩니다. 소스의 내용을 복사하여 블로그관리-html편집-CSS탭에 빈 공간을 확보하여 입력-저장하시면 됩니다. CSS내용 중 @font-face } 밑에 빈 공간에 입력하셔야 하는데, 만약 @font-face가 없으면 최상단 내용 중 @charset "utf-8"; 보다 밑에 빈 공간 { } 부분을 피하고 입력하셔야 합니다.
.note1 { //note1이란 이름을 변경하셔도 됩니다.
position:relative;
background:#B2CCFF;
width:300px;
max-width: 100%;
text-align: center;
padding: 12px;
color:black;
}
.note1:before { //note1부분도 동일한 이름으로 변경하셔야 합니다.
content:"";
position:absolute;
top:0;
right:0;
border-width:0 16px 16px 0;
border-style:solid;
border-color: #FFFFFF #FFFFFF #0054FF #0054FF;
background: #0054FF;
display:block; width:0;
}
css에서 note1부분의 이름을 변경하실 때 html의 div class=" "안의 부분도 동일한 이름으로 변경하셔야 소스를 호출할 수 있습니다.
[ 소스 내용 - note 1]
background : 박스 배경색인데 html 색상표로 변경 가능합니다.
widht : 박스 가로사이즈이며 숫자 부분을 변경 가능합니다.
text-align : 글씨의 배열인데, left(왼쪽정렬)/right(오른쪽정렬)/justify(양쪽정렬) 입니다.
color : 글씨 색입니다. blue/red 등으로 변경 가능합니다.
[소스 내용 - note 1:before]
border-color : 박스의 접힌 부분인데, #FFFFFF는 블로그 배경이 흰색이라 변경 안하셔도 됩니다.
#0054FF(background와 함께) 박스 접힌 부분의 색인데, 변경 가능합니다.
먼저 블로그 관리자모드-스킨편집-html편집-css탭으로 이동하셔서 빈 공간을 확보하시면 됩니다.
빈 공간을 확보 후 css 소스를 입력 후 확인을 누르시면 됩니다.
새로운 글쓰기로 들어가신 후 - html모드로 변환하여 html 소스를 입력 후 글 쓰는 부분에 원하는 문구를 입력하신 후 완료를 누르시면 됩니다.
사용하시는 스킨과 폰트에 따라 달라보일 수가 있으며, 반응형으로 만들어져서 디바이스 화면에 따라 사이즈가 달라 보일 수 있습니다.
티스토리 블로그 글 순번에 대하여 (0) | 2020.04.22 |
---|---|
5K/8K란 무엇일까요 (0) | 2020.04.22 |
HTML과 CSS (0) | 2020.04.22 |
스크롤바 홈 버튼 만들기 (0) | 2020.04.22 |
HTML로 글상자 만들기-[기본 박스] (0) | 2020.04.22 |