스팀잇 글 작성 문법 [HTML]

안녕하세요 ayogom 입니다.
어제 스팀잇 글 작성 문법 [마크다운편]에 이어서 오늘은 HTML을 통한 작성 방법입니다. 사실 스팀잇에서는 이 두가지를 혼합 사용이 가능하기 때문에 어쩌면 생각보다 예쁜 글을 쓸수 도 있습니다. 예를들면 예전에 @kyunga 님이 작성해 주신 [이지스팀잇] 마크타운, 고오급 편집팁 (2) - 템플릿 대방출 을 참고 하시면 멋진 포스팅을 하실 수 있죠. 그러한 멋진 포스팅이 바로 HTML 베이스로 작성된 글입니다. 꼭 한번 읽어보시길 추천해드립니다.

작성 기준은 마크다운과 같은 형태로 가겠습니다. HTML 문법은 기본적으로 <속성></속성닫기> 형태로 작성이 됩니다.

먼저 큰 글씨 사용법


마크다운에서는 #을 쓰는 것으로 HTML에서는 <h1> </h1> 을 사용합니다. 그리고 h뒤에 오는 숫자에 따라 크기가 달라집니다.

예를들자면

1을 사용


<h1> 1을 사용</h1>

2을 사용


<h2> 2을 사용</h2>

3을 사용


<h3> 3을 사용</h3>

4을 사용


<h4> 4을 사용</h4>
5을 사용

<h5> 5을 사용</h5>
6을 사용

<h6> 6을 사용</h6>

근데 뭐가 좀 이상하죠? HTML문법은 라인 뛰어쓰기가.. 기본 패시브로 좀 있습니다 ㅠ

인용문자 사용법


마크 다운의 ''>''과 같은 형태로 HTML에서는 이렇게 사용합니다
잛은 인용문은

"을 사용한 것이 아니에요
<q> "을 사용한 것이 아니에요</q>

긴 인용문은

">" 와 동일하죠?
<blockquote>
">" 와 동일하죠?
</blockquote>

리스트 사용법

  • 리스트1
  • 리스트2
  • 리스트3
  •  <li>리스트1</li>
     <li>리스트2</li>
     <li>리스트3</li>
    

    참 쉽죠? 하지만 HTML에서는 좀더 고급 스럽게 쓸 수 있습니다.

    1. Lorem
      1. Lorem
      2. Ipsum
      3. Dolor
    2. Ipsum
      • Lorem
        • Lorem
        • Ipsum
        • Dolor
      • Ipsum
      • Dolor
    3. Dolor
      <ol>
          <li>
            Lorem
            <ol>
              <li>Lorem</li>
              <li>Ipsum</li>
              <li>Dolor</li>
            </ol>
          </li>
          <li>
            Ipsum
            <ul>
              <li>
                Lorem
                <ul>
                  <li>Lorem</li>
                  <li>Ipsum</li>
                  <li>Dolor</li>
                </ul>
              </li>
              <li>Ipsum</li>
              <li>Dolor</li>
            </ul>
          </li>
          <li>Dolor</li>
        </ol>
    

    복사해서 쓰세요 ㅎ 들여쓰기도 이렇게 가능 해집니다. 스팀잇 문제중 하나인 숫자 넣는 부분도 이렇게 하면 해결 되죠

    강조하기

    기울린 글
    기울린 글
    기울린 글

    <i>기울린 글</i>
    <em>기울린 글</em>
    

    2가지 모두 가능

    진한글
    진한 글
    진한 글

    <strong>진한 글</strong>
    <b>진한 글</b>
    

    취소선 넣기

    취소선
    삭제선

    <strike>취소선</strike>
    <del>삭제선</del>
    

    표 만들기

    <table>
        <tr>
            <th>표</th>
            <th>만</th>
            <th>들</th>
            <th>기</th>
        </tr>
        <tr>
            <td>이</td>
            <td>렇</td>
            <td>게</td>
            <td>요</td>        
        </tr>
    </table>
    

    여기서 지난 시간에 정렬 하는 부분에 대해서 추가 해봅니다. HTML 문법에서는 정렬이 매우 쉽습니다.

    오른쪽정렬

    <div class='pull-right'>
    오른쪽정렬
    </div>
    <br>
    
    왼쪽정렬

    <div class='pull-left'>
    왼쪽정렬
    </div>
    <br>
    
    가운데정렬

    <div class='text-center'>
    가운데정렬
    </div>
    <br>
    

    *<br> 의 경우 엔터를 의미하는데, 속성 값에 의해서 넣었습니다. 왜 넣어야 하는지는 한번 써 보시면 압니다.

    위의 표에 혼합해서 사용하시면 표 내에서 원하는 위치로 글을 표시 할 수 있습니다

    구분선 넣기


    <hr>
    

    링크 걸기

    네이버

    <a href="naver.com">네이버</a>
    

    이미지 넣기

    <img src="https://cdn.steemitimages.com/DQmUt3jb1Gphfe3xE17Mn13tTdHg8q9GzFQdKZKP7eNYXgM/image.png">
    


    그리고 이제부터는 HTML에만 있는 문법입니다. 위에 표 부분에 있는 정렬 부분도 마찮가지 이고요.


    텍스트 가운데 정렬

    <center>
    텍스트 가운데 정렬
    </center>>
    


    글을 오른쪽에서 왼쪽으로 쓰기
    <div class='text-rtl'>
    글을 오른쪽에서 왼쪽으로 쓰기</div>
    <br>
    


    빨간색으로 글쓰기

    <div class='phishy'>
      빨간색으로 글쓰기
    </div>
    <br>
    



    아마 읽으시면서 느끼셨겠지만 일부는 마크다운이 편하고 일부는 HTML문법이 편하고 그렇습니다. 그래서 혼용해서 쓰는게 제일 좋습니다 예쁘게 작성하는 방법으로써는요 하지만 귀찮아서 결국 편하게 씁니다... 편한게 최고죠! 다음편에서는 편하지만 예쁘게 글 쓰는 법에 대해서 알려드리겠습니다~

    작성 예정인 글 List

    • Nodejs 를 이용한 스팀 API 사용해보기
    • @tipu 사용법 2탄
    • Steemit wallet의 History 부분
    • 스팀잇 글 작성 문법 [마크다운편]
    • 스팀잇 글 작성 문법 [HTML 편]
    • 스팀잇 내에서 이모지 사용법

    누군가에게는 도움이 될 수 있는 글

    스팀잇 기본 이야기

    스팀잇 심화 이야기

    스팀잇 보상과 연결되는 이야기

    해킹과 관련된 이야기

    Sort:  

    고급진 정보 감사합니다~^^

    [US$80.50](▼16%)[SONGJING]SONGJING SJ-125E 제습기 / 송징 SJ-125E 제습기 / 36평적용 / 165W 고출력 / 대용량 물탱크 / 관부가

    WWW.QOO10.COM

    @ayogom transfered 3 KRWP to @krwp.burn. voting percent : 5.73%, voting power : 80.05%, steem power : 1769082.87, STU KRW : 1200.
    @ayogom staking status : 600 KRWP
    @ayogom limit for KRWP voting service : 2.4 KRWP (rate : 0.004)
    What you sent : 3 KRWP
    Refund balance : 0.6 KRWP [53789397 - be8376bc81f3850359b029077d2e4818d99cb9eb]

    start success go! go! go!

    고맙습니다.

    오호~~~ 좋은정보 감사합니당 html로 써봐야겠어요 +_+

    감사합니다. 많이 배워야 겠네요.

    @ ayogom, 게시 할 때 사용할 수 있도록 지식을 공유해 주셔서 감사합니다.
    gesi hal ttae sayonghal su issdolog jisig-eul gong-yuhae jusyeoseo gamsahabnida.