티스토리 에디터에서 넣을 수 있는 요소들

Posted by Readiz
2014. 3. 16. 02:49 반응형 티스토리/Tistory




  FastBoot스킨 .article 부분 수정 테스트차 포스팅합니다. 티스토리 블로그 스킨 제작을 위해서는 .article 안의 요소들도 무시할 수 없는 법인데, 그 요소들이 아래에 있습니다. 실제 적용되는 HTML요소들이 어떤 것들인지 한번 알아봅시다. 더 나아가 반응형에 부적합한 요소들이 무엇이 있는지도 살펴봅시다.






글꼴 조절 <span style>

크기 조절 <span style>

굵게<b>

밑줄<u>

기울임<i>

취소선<strike>

글색상<span style>

글배경색상<span style>

왼쪽정렬<p>

가운데정렬<p style>

오른족정렬<p style>

양쪽정렬<p style>

들여쓰기<p style>

내어쓰기<p style>

줄간격<p style>

  • 목록<ul>
  • 목록2<ul>
  1. 목록3<ol>
  1. 목록4<ol>
  1. 목록5<ol>


마이피플스티커졸려<img>

이모티콘<img>

URL(링크)<a href>

특수문자☎

테이블<table>, 폭 지정 되어 있어 반응형으로 하기 곤란

 

 

 

 

 

 

 

 

 


레이아웃<table>

역시 전체 폭이 고정되어 있어서

반응형으로 하기 곤란

하다.



색있는 박스<div style>

인용구<blockquote>


구분선(위 세개 <hr>, 아래 4개 <div>
















각주테스트입니다. 각주테스트 123[각주:1]




테스트

테스트

테스트

테스트

테스트
테스트


  1. 이것은 각주다. [본문으로]
이 댓글을 비밀 댓글로
  1. 티스토리 기본 테이블 반응형됩니다.
    max-width 속성 넣어보세요

    요즘은 파운데이션 기능인 블록그리드를 쓰고 있지만 이전에 적었던 글들이 테이블로 레이아웃이 짜진게 간혹있는데 다 수정하기 귀찮아서 CSS로 다 반응형 만들어 버렸습니다.
    • 한번 해봐야겠네요.. ㅎㅎ
      근데 어찌되었든 간에 max-width를 넣어버리면 3단 같은 경우 모바일에서 아주 읽을 수가 없는 레이아웃이 되어버릴 것 같습니다.
    • 미처 생각못했던 방법이네요 ㅎㅎ 파운데이션도 이전에 알려 주셔서 함 봤었는데... 이해 및 활용을 못해서 방치해두고 있었네요... 한번 더 가서 자세히 살펴 봐야겠어요
    • 제 경험으로는 부트스트랩보다 파운데이션이 저한테 더 잘 맞더군요
      블로깅 할때 유용할만한 기능도 많이 포함되어 있는것 같고요

      솔직히 부트스트랩은 대형 웹사이트 용에 가깝지 블로그 용도로는 글쎄? 싶을 기능들이 꽤 많이 있습니다.
      저는 만약 반응형 블로그를 만든다면 파운데이션이나 퓨어, 그럼비를 추천하고 싶습니다.
      극단적으로 그리드만 쓰실분들은 HTML5 보일러 플레이트도 좋고요
    • Estoque님 덕분에 저도 배우고 갑니다.
      Bootstrap에서 덜어내야할 부분이 굉장히 많더군요. 저도 최근에서야 알았네요. 결국 범용 라이브러리란 대형화 -> 작은 버전으로 쪼개짐을 반복하는게 아닌가 싶네요.
  2. 저도 이 글을 기점으로 삼아서, 마크다운에서 사용되는 HTML 태그와 티스토리에서 사용되는 태그들과의 상호 연관성에 대해서 함 다뤄 봐야겠네요.... 마크다운 문법이 글쓰기는 참 좋은데, 티스토리 에디터랑 만나면 궁합이 맞지가 않아서 ㅎㅎ
    • 마크다운.. ㅎㅎ 배워볼 엄두가 안납니다~ ㅋㅋ 세팅을 또 해야되니.. 글 전달은 다음에디터로도 아직까지는 충분하다고 느끼고 있네요.
    • 저는... 글을 한번 쓰기 시작하면... 장문이 되다보니,,, 실수하는 경우도 많은데,,, 마크다운 문법으로 글을 쓰면 그러한 부분들을 보완해주는 거 같아서... 초안은 마크다운 에디터로만 작성을 하고 있네요 ㅎㅎ

      html 추출해서 티스토리 에디터에 붙혀넣기 했을 때... html 도 깔끔하게 정돈되고 ㅎㅎㅎ

      웹 쪽은........... 배워야 할게 끝도 없는거 같아요

      html,css,javascript,서버쪽, 포토샵쪽, 기타등등... 넘 많네요 ㅜㅜ;;

      특히 요즘은 웹 앱이라는게 유행해서 그런지......... 배워야 할게 더 많아진거 같아요 ㅎㅎ
  3. 안녕하십니까?

    본문 마지막에 보면
    테스트라고 해서 좌측에 | 모양과 아래쪽에 밑줄이 들어 가 있는 형태를 어떻게 나타낸 것인지요?
    소스로 보면 <h1> ... ,<h6> 로만 보이는데,,,

    알려 주시면 알될까요?