안녕하세요 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 편]
• 스팀잇 내에서 이모지 사용법

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

스팀잇 기본 이야기

• 복잡한 키&패스워드는 그만 손쉬운 로그인 키체인의 사용법
• 계정 옆의 숫자 평판? "reputation" 이란
• [요청] 스팀엔진 사용방법
• 스팀잇 내부 거래 사이트, 마켓
• 오랜만에 스팀잇에 돌아왔더니 로그인이 안됩니다 (Logging in with non-posting key)
• 스팀잇에 기존 사용하던 트론 지갑을 연결하는 방법
• 스팀 체인의 패스워드 / 키의 역활
• [요청] 스팀엔진 Explorer 가 접속이 되지 않아요
• Steemit의 태그 사용법과 커뮤니티스 사용법
• Steemit 프로필 변경 방법
• 스팀파워 임대가 안된다 왜?
• 스팀잇 계정 만들기
• 스팀잇 저장 보상의 종류와 뭐가 좋을지
• 스팀잇 속닥속닥 비밀 메모 사용하기!
• 스팀/스달 입금, 출금 그리고 업비트 이용방법
• 갑자기 steemit 사이트가 접속이 안된다면?
• 스팀잇 내에 붉은 글씨 사용법
• Steem체인의 또하나의 커뮤니티 "zzan"
• Steem체인의 또하나의 커뮤니티 "sct"
• 스팀잇 지갑에 접속이 되지 않을 때
• 스팀잇 글 작성 문법 [마크다운편]

스팀잇 심화 이야기

• 스팀의 인플레이션에 대해서
• 하루에 스팀 리워드 풀에 포함되는 스팀은 얼마나 될까?
• 하루에 도대체 어느정도의 스팀은 생성될까요?
• 내가 보팅 했더니 보상이 떨어졌다? 왜?
• 스팀달러가 1달러를 유지하는 방법
• 글이 써지지 않아요 왜? Resource Credits!? Your transaction failed to process
• 스팀잇 에서의 $ 는 USD(미국달러) 인가요?
• 스팀은 DPOS 기반의 블록체인입니다. 그럼 DPOS가 뭔가요?
• 증인에 역활은 무엇일까
• 스팀 증인 노드 세팅하기 1탄
• 스팀 증인 노드 세팅하기 2탄

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

• 보팅 금액 계산해 보기 1부
• 보팅 금액 계산해 보기 2부
• 효율적인 보팅 방법
• Krwp 보팅 수익 분석 해보기
• Upvu 보팅 수익 분석 해보기
• @tipu 사용 방법 1탄

해킹과 관련된 이야기

• 해킹 이야기 1. 해킹을 당하기 전에 준비할 사항들
• 해킹 이야기 2. 해킹을 당해서 비번이 바뀌었을 때, 계정을 복구하는 방법
• 해킹 대비법