안녕하세요. @anpigon입니다.
스팀잇은 허용한 HTML 태그와 속성만 입력할 수 있도록 되어있습니다. 그래서 스팀잇 소스를 분석하여 사용 가능한 HTML 태그와 속성을 파악하여 정리하였습니다.
스팀잇에서 사용가능한 HTML 태그는 아래와 같다. 아래에 포함되지 않은 HTML 태그는 사용할 수 없다.
, , ,
, , ,
,
,
,
,
,
,
,
,
, ,
, , , , ,
, , , , , , , ,
HTML태그에 허용되는 속성(Attribute)은 다음과 같다. 속성을 사용할 수 있는 태그만 표시하였다.
태그 속성 설명 ``src
src에 사용 가능한 도메인ㆍhttps://w.soundcloud.com/player/?url=…ㆍhttps://player.vimeo.com/video/28530912…ㆍhttps://www.youtube.com/embed/yUjlBfmkO6…
`
|class|class에 사용 가능한 스타일pull-right,pull-left,text-justify,text-rtl,text-center,text-right,videoWrapper,phishy`※ div.class 스타일에 대해서는 아래에서 다시 설명하겠다.
``
style
style에 사용 가능한 스타일 text-align:right
``
src, alt
``
href
href에 사용 가능한 스킴(Scheme)http://, https://, steem://
각 태그에 대한 설명
각 HTML 태그에 대한 간략한 설명과 예제를 살펴보자.
, 태그
는 취소선,은 삭제선을 의미한다. 그러나 HTML 렌더링 결과는 동일하다. 마크다운은 ~~를 사용한다.
취소선
삭제선
~~마크다운 표현식~~
[IMAGE: https://imgur.com/Wpq7WMK.png]
, 태그
는 윗첨자(super subscript),은 아랫첨자(subscript)를 의미한다. 스팀잇에서 작은 글자를 표현할때 많이 사용한다.
윗첨자윗첨자
아랫첨자아랫첨자
[IMAGE: https://imgur.com/Bj7hvIu.png]
, 태그
는 Italic를 뜻하며 *이탤릭체 또는 기울임체*라고 한다.은 Emphasize를 뜻한다. 그러나 HTML 렌더링 결과는 동일하다. 마크다운은 * 또는 _를 사용한다.
Italic
Emphasize
*마크다운 표현식*
_마크다운 표현식_
[IMAGE: https://imgur.com/SV2Ss3L.png]
, 태그
, 는 글자를 강조할때 사용한다. 마크다운은 ** 또는, __를 사용한다.
Strong
Bold
**마크다운 표현식**
__마크다운 표현식__
[IMAGE: https://imgur.com/2G9CKcY.png]
`,
` 태그
`는 짧은 인용문,
는 긴 인용문에 사용한다. 마크다운은 긴 인용문에>`를 사용한다.
짧은 인용문
추구할 수 있는 용기가 있다면 우리의 모든 꿈은 이뤄질 수 있다.
– 월트 디즈니
> 마크다운 표현식에서는 인용문을 이렇게 사용한다.
\- 안피곤
[IMAGE: https://imgur.com/j20z2mj.png]
`` 태그
``은 동영상을 삽입할 때 사용한다. 하지만, 현재는 Soundcloud, vimeo, Youtube에 업로드한 동영상만 사용 가능하다. 아래와 같은 embed 코드는 동영상 제공 사이트에서 가져올 수 있다.
> 참고로 Youtube와 vimeo는 URL만 입력하면 ``으로 자동 변환된다.
`` 태그
이미지를 삽입할 때 사용한다. 마크다운으로 표현하면 이다.
> 이미지도 URL만 입력하면 `로 자동 변환된다. 단,"https://imgur.com/a2cMI4Q.png"와 같이 URL이jpg, jpeg, gif, png, svg, ico, tif, tiff` 로 끝나는 경우에만 자동 변환된다.
`
태그의class` 스타일
에 사용가능한 스타일에 대해서 차례대로 살펴보자.
pull-right
div를 오른쪽으로 float한다.
오른쪽에 출력
[IMAGE: https://imgur.com/M6vNxZ3.png]
pull-left
div를 왼쪽으로 float한다.
왼쪽에 출력
[IMAGE: https://imgur.com/NBaTluy.png]
text-justify
텍스트를 양쪽 정렬한다.
텍스트 양쪽 정렬
[IMAGE: https://imgur.com/a57ILkB.png]
text-center
텍스트를 가운데 정렬한다. ``와 동일하다.
텍스트 가운데 정렬
[IMAGE: https://imgur.com/w41GGZB.png]
text-right
텍스트를 오른쪽 정렬한다.
텍스트 오른쪽 정렬
[IMAGE: https://imgur.com/XoutMMq.png]
> 결과만 봤을때는 text-right와 pull-right와 동일하다고 생각 할 수 있다. 하지만, 두 스타일의 용도와 정렬 방식은 다르다. text-right는 내부 항목들을 오른쪽으로 정렬한다. 그리고 pull-right는 영역을 오른쪽에 출력한다.
text-rtl
글자 방향을 오른쪽에서 왼쪽으로 표시한다. 특수문자가 왼쪽으로 표시되는 것 말고는 text-right와 차이가 거의 없어 보인다.
글자 방향을 오른쪽에서 왼쪽으로...
[IMAGE: https://imgur.com/VocbxDx.png]
phishy
phishy는 글자색을 빨간색으로 표시해준다.
빨간색
[IMAGE: https://imgur.com/lNxJBas.png]
응용해보기
위의 스타일을 응용하면 아래와 같은 표현도 가능하다. 이렇게 까지 사용할 일은 없다고 생각되지만, 재미를 위해서 만들어 보았다.
문장에서 가운데 글자를
빨간색
으로 강조하고 싶다.
[IMAGE: https://imgur.com/eb2QVK7.png]
또는,
1 단계
눈을 감는다
➔
2 단계
잡념을 없앤다
➔
3단계
잠을 잔다
마지막 단계
꿈을 꾼다
[IMAGE: https://imgur.com/keDs0AE.png]
여기까지 읽어주셔서 감사합니다.
