안녕하세요 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>
리스트 사용법
<li>리스트1</li>
<li>리스트2</li>
<li>리스트3</li>
참 쉽죠? 하지만 HTML에서는 좀더 고급 스럽게 쓸 수 있습니다.
-
Lorem
- Lorem
- Ipsum
- Dolor
-
Ipsum
-
Lorem
- Lorem
- Ipsum
- Dolor
- Ipsum
- Dolor
-
Lorem
- 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="<img class="markdown-img-link" src="https://steemitimages.com/0x0/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탄