블로그 포스트 텍스트박스 만들기 (css활용)

" 초보블로거들을 위한 팁! css를 활용하여
텍스트 입력기에 없는 나만의 블로그 포스트 꾸미기 두번째 팁"

초보 블로거들을 위하여 포스트 꾸미는 방법을 소개해 드리려고 합니다.
물론 티스토리, 네이버 등 블로그 텍스트입력기에 기본적으로
아주 쉽게 글씨를 꾸미거나 설정할 수 있는 기능들이 있습니다만,
거기에 더해서 약간의 독특함을 만들 수 있는 방법들을 안내드립니다.

예시 ) 배경 혹은 라인이 있는 텍스트 박스 만들기

세월이 이따금 나에게 묻는다.
사랑은 그후 어떻게 되었느냐고..
물안개 처럼
몇 겁의 인연이라는 것도
아주 쉽게 부서지더라..
세월은 온전하게 주위의 풍경을 단단하게 부여잡고 있었다.
섭섭하게도 변해버린 것은
내 주위에 없었다.
두리번 거리는 모든것은 그대로였다.
사람들은 흘렀고
여전히 나는
그 긴 벤치에 그대로였다.
이제 세월이 나에게 묻는다.
그럼 너는 무엇이 변했느냐고..

세월이 이따금 나에게 묻는다.
사랑은 그후 어떻게 되었느냐고..
물안개 처럼
몇 겁의 인연이라는 것도
아주 쉽게 부서지더라..
세월은 온전하게 주위의 풍경을 단단하게 부여잡고 있었다.
섭섭하게도 변해버린 것은
내 주위에 없었다.
두리번 거리는 모든것은 그대로였다.
사람들은 흘렀고
여전히 나는
그 긴 벤치에 그대로였다.
이제 세월이 나에게 묻는다.
그럼 너는 무엇이 변했느냐고..

세월이 이따금 나에게 묻는다.
사랑은 그후 어떻게 되었느냐고..
물안개 처럼
몇 겁의 인연이라는 것도
아주 쉽게 부서지더라..
세월은 온전하게 주위의 풍경을 단단하게 부여잡고 있었다.
섭섭하게도 변해버린 것은
내 주위에 없었다.
두리번 거리는 모든것은 그대로였다.
사람들은 흘렀고
여전히 나는
그 긴 벤치에 그대로였다.
이제 세월이 나에게 묻는다.
그럼 너는 무엇이 변했느냐고..

<style>
.textbox3 {
background-color:#ffffff;
border:1px solid #ff0000;
color:#ff0000;
font-size:15px;
font-weight:600;
line-height:30px;
text-align:center;
padding:50px;
}
</style>

<div class="textbox3">
세월이 이따금 나에게 묻는다.<br>
사랑은 그후 어떻게 되었느냐고..<br>
물안개 처럼<br>
몇 겁의 인연이라는 것도<br>
아주 쉽게 부서지더라..<br>
세월은 온전하게 주위의 풍경을 단단하게 부여잡고 있었다.<br>
섭섭하게도 변해버린 것은<br>
내 주위에 없었다.<br>
두리번 거리는 모든것은 그대로였다.<br>
사람들은 흘렀고<br>
여전히 나는<br>
그 긴 벤치에 그대로였다.<br>
이제 세월이 나에게 묻는다.<br>
그럼 너는 무엇이 변했느냐고..<br>
</div>

<3번째 빨간색 박스 샘플의 예시 코드입니다>

.textbox_3이라는 class 명으로 css를 만들어주고
div에 class="textbox_3"으로 넣어주었습니다.
1. background-color:#ffffff;
-> 배경색입니다. #ffffff;는 흰색의 색상코드 입니다.

2. border:1px solid #ff0000;
->선을 표시합니다. 사각형 박스를 만들어주며 "선두께px solid #색상값;" 순서로 입력해주시면됩니다.

3. color:#ff0000;
-> 글자 색 입니다. "#ff0000;"은 레드 입니다.

4. font-size:15px;
-> 글자 크기 입니다. 원하시는 숫자를 입력해 주시면 됩니다.

5. font-weight:600;
-> 글자 두께 입니다. 원하시는 숫자(100~900)을 입력하시거나, "light / normal / bold"를 입력해주시면됩니다.

6. line-height:30px;
-> 행간의 높이를 나타냅니다. 폰트 크기가 15px 이므로, 23~26px 가 가장 좋은 행간 입니다. 저는 시를 넣었기 때문에 30px로 해놓았습니다.

7. text-align:center;
-> 문단의 배치 입니다. left : 왼쪽정렬 / right : 오른쪽 정렬 / center : 가운데 정렬 입니다.

8. padding:50px;
-> 박스 내부의 여백 입니다. 좌,우,상,하 모두 50px 입니다.