티스토리 꾸미기 - 내 블로그는 내가 직접 꾸미자

※ 프로그래밍 지식이 없으신분들 기준에서는 다소 많은 시간이 걸릴수도 있습니다. ※

## 글을 보시기전 결과 ##

## 이제 시작 해보자 ##

필자가 자주 사용하는 css 라이브러리 Semantic UI로 진행을 하곘습니다.

Semantic UI를 사용하는 이유는 디자인이 이쁘고 사용하기 간편하기 때문입니다.

기타적으로는 CLASS, ID 값에 대한 설정이 생각보다는 많이 안겹쳐서 그래요.

우선, Semantic UI 여기를 눌러 사이트에 접속을 해주세요.

그런뒤 Get Started를 눌러주세요.

이제, 아래쪽에 Download Zip을 눌러주세요.

압축을 열게 되면, semantic.min.js, semantic.min.css 파일이 있습니다.

해당하는 파일만 필요하니 두개만 압축을 풀어서 꺼내주세요.

이제, 바탕화면에 압축을 푸시고 확인을 해주세요.

이제, 티스토리 관리자 페이지로 이동을 하신뒤 스킨 편집을 눌러주세요.

HTML 편집을 눌러주세요.

파일 업로드를 눌러주세요.

하단에 추가를 눌러주세요.

아까전에 압축을 푼 semantic.min.css, semantic.min.js를 선택 하시고 열기를 눌러주세요.

파일 두개가 추가가 된것을 확인해주세요.

이제, 오른쪽 상단의 저장을 눌러주세요.

HTML을 눌러주세요.

</head> 태그 위에 아래의 소스코드와 같이 작성 해주세요.

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<link rel="stylesheet" href="./images/semantic.min.css">
    <script src="./images/semantic.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

다시 저장을 눌러주세요.

다시, semantic-UI사이트로 돌아 오신뒤 Button을 눌러주세요.

<> 를 클릭해주세요.

빨간색 칸으로 쳐둔곳을 복사해주세요.

티스토리 게시글 쓰기로 들어와 HTML을 눌러주세요.

이제, 값을 입력 해주세요.

여기서, 다시 포스팅으로 돌아오면 텍스트 문구만 나오는게 정상입니다!

미리보기를 눌러 주세요.

위와같이 버튼이 출력이 된다면 CSS 라이브러리가 추가 된것 입니다.

## 포스팅을 마치며 ##

나머지 관련된 디자인은 찾아보시고 응용 하시면 될꺼 같아요.

만약, 블로그에 스타일 시트를 넣은 후에 문제가 생긴다면 빼주시는걸 추천 합니다.