티스토리 뷰

안녕하세요! 

부트스트랩이라는 기능을 이용하면 다음과 같은 디자인을 누구나 쉽게 만들 수 있습니다.

티스토리에서 글쓰기 작성시 좀 더 쉽고, 깔끔하고, CSS를 몰라도 쉽게 사용할 수 있도록 만든 티스토리용 부트스트랩입니다. 원래 부트스트랩은 트위터에서 만든 CSS 프레임웍입니다. 티스토리에도 이런 기능이 있었으면 하는 마음에서 만들어 보게 됐습니다. 아직 만들고 있는 단계이고 실험적인 단계이므로 버그가 있을 수 있습니다. 아무쪼록 많은 도움이 됐으면 좋겠습니다.


사용방법

사용방법은 다음과 같습니다.
  • 우선 소스를 다운 받고 연동 작업이 필요합니다. 한번만 연동하면 다양한 디자인의 구성을 표현 할 수 있습니다.
  • 이 방법을 사용하기 위해서는 html에 모드에서 작업을 해야 하며 p태그는 사용하지 않습니다.
  • HTML태그 작성시 제일 상위 태그에 websboot라고 클래스를 생성하고 작성합니다. 그래야 최대한 깨지는 현상을 막을 수 있습니다.

주의 사항

  • 기존의 CSS랑 이름이 겹칠 경우 디자인과 구조가 깨질 수 있습니다.
  • 이 방식은 디자인에 집중하였기 때문에 웹 표준 준수사항과 맞이 않을 수 있습니다.

티스토리용 부트스트랩 예시

티스토리용 부트스트랩을 이용하시면 다음과 같은 화면의 디자인을 쉽게 구성할 수 있습니다.

제목 표현 방법 자세히 보기
h1 : 제목의 크기를 설정합니다.
h2 : 제목의 크기를 설정합니다.
h3 : 제목의 크기를 설정합니다.
h4 : 제목의 크기를 설정합니다.
h5 : 제목의 크기를 설정합니다.
h6 : 제목의 크기를 설정합니다.


텍스트 표현 방법 자세히 보기
mark : 글씨를 강조할 때 표시합니다.
bold : 글씨를 볼드체로 나타내고 싶을 때 사용합니다.
italic : 글씨를 기울이고 싶을 때 사용합니다.
dot : 글씨에 점선으로 표현하고 싶을 때 사용합니다.


텍스트 정렬 방법 자세히 보기
left : 글씨를 오른쪽으로 정렬합니다.
center : 글씨를 가운데로 정렬합니다.
right : 글씨를 왼쪽으로 정렬합니다.


리스트 표현 방법 자세히 보기
리스트는 이런식으로 표현됩니다.
  • 리스트 스티일은 이런식으로 표현됩니다.
  • 리스트 스티일은 이런식으로 표현됩니다.
  • 리스트 스티일은 이런식으로 표현됩니다.
  • 리스트 스티일은 이런식으로 표현됩니다.
  • 리스트 스티일은 이런식으로 표현됩니다.

리스트가 2단 구조인 경우는 이렇게 표현됩니다.
  • 리스트 스티일은 이런식으로 표현됩니다.
    • 여기는 리스트 2단 구조입니다.
    • 여기는 리스트 2단 구조입니다.
    • 여기는 리스트 2단 구조입니다.
  • 리스트 스티일은 이런식으로 표현됩니다.
  • 리스트 스티일은 이런식으로 표현됩니다.
  • 리스트 스티일은 이런식으로 표현됩니다.
  • 리스트 스티일은 이런식으로 표현됩니다.

리스트가 3단 구조인 경우는 이렇게 표현됩니다.
  • 리스트 스티일은 이런식으로 표현됩니다.
    • 여기는 리스트 2단 구조입니다.
      • 여기는 리스트 3단 구조입니다.
      • 여기는 리스트 3단 구조입니다.
      • 여기는 리스트 3단 구조입니다.
      • 여기는 리스트 3단 구조입니다.
    • 여기는 리스트 2단 구조입니다.
    • 여기는 리스트 2단 구조입니다.
  • 리스트 스티일은 이런식으로 표현됩니다.
  • 리스트 스티일은 이런식으로 표현됩니다.
  • 리스트 스티일은 이런식으로 표현됩니다.
  • 리스트 스티일은 이런식으로 표현됩니다.


주의 표시 방법 자세히 보기
alert blue1 : 이것은 주의 및 주목을 위한 표시 방법입니다.
alert blue2 : 이것은 주의 및 주목을 위한 표시 방법입니다.
alert blue3 : 이것은 주의 및 주목을 위한 표시 방법입니다.
alert blue4 : 이것은 주의 및 주목을 위한 표시 방법입니다.
alert blue5 : 이것은 주의 및 주목을 위한 표시 방법입니다.
alert blue6 : 이것은 주의 및 주목을 위한 표시 방법입니다.
alert blue7 : 이것은 주의 및 주목을 위한 표시 방법입니다.


알림 뱃지 자세히 보기
글씨 옆에 작은 라벨을 표현할 때 사용합니다. New
글씨 옆에 작은 라벨을 표현할 때 사용합니다. New
글씨 옆에 작은 라벨을 표현할 때 사용합니다. New
글씨 옆에 작은 라벨을 표현할 때 사용합니다. New
글씨 옆에 작은 라벨을 표현할 때 사용합니다. New
글씨 옆에 작은 라벨을 표현할 때 사용합니다. New


문장 속에서 쓰는 뱃지 자세히 보기
문장 속에서 표현할 때 사용합니다.
문장 속에서 표현할 때 사용합니다.
문장 속에서 표현할 때 사용합니다.
문장 속에서 표현할 때 사용합니다.
문장 속에서 표현할 때 사용합니다.
문장 속에서 표현할 때 사용합니다.


알약 뱃지 자세히 보기
문장 속에서 표현할 때 사용합니다.
문장 속에서 표현할 때 사용합니다.
문장 속에서 표현할 때 사용합니다.
문장 속에서 표현할 때 사용합니다.
문장 속에서 표현할 때 사용합니다.
문장 속에서 표현할 때 사용합니다.


링크 뱃지 자세히 보기
문장 속에서 표현할 때 사용합니다.
문장 속에서 표현할 때 사용합니다.
문장 속에서 표현할 때 사용합니다.
문장 속에서 표현할 때 사용합니다.
문장 속에서 표현할 때 사용합니다.
문장 속에서 표현할 때 사용합니다.


버튼 표시 방법 자세히 보기
button
button
button
button
button
button
button
button
button
button
button


큰 버튼 표시 방법 자세히 보기
button
button
button
button
button
button
button
button
button
button
button


작은 버튼 표시 방법 자세히 보기
button
button
button
button
button
button
button
button
button
button
button


버튼 한줄에 표시하는 방법 자세히 보기
  • 네이버 블러그 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
  • 트위터 공유하기
  • 트위터 공유하기
댓글
Total
Today
Yesterday