HTML을 연습하는 가장 쉬운 방법(feat. 티스토리)

 

HTML을 연습하는 방법에는 여러 가지가 있다. 예전에는 Atom을 많이 썼다고 하데 요즘은 비주얼스튜디오코드를 이용하는 사람들이 많은 것 같다.(사실 나도 잘 모른다.) 이런 코드 편집기들은 깔끔하게 코드를 보여주지만, 단점이 있다면 죄다 영어로 되어 있고 컴퓨터에 뭔가를 설치해야 한다는 것이다. 초보자들에게는 작은 것 하나하나가 다 진입장벽이다. HTML의 개념을 뭔지 모르고 이 글을 보는 사람이라면 아래 글을 참고하자.

• HTML의 개념

티스토리는 카카오 아이디만 있으면 되기 때문에 접근성이 뛰어나고 한국어로 되어 있다. 그래서 오늘은 티스토리로 HTML을 연습하는 방법에 대해 이야기해보고자 한다. 일단 티스토리 블로그를 만든다. 카카오 아이디로 만들 수 있다.

• 티스토리 접속하기

티스토리를 만들었다면, 관리 버튼을 클릭한다. 관리 버튼이 어디 있는지 모르겠다면 티스토리 주소 뒤에 /manage 를 붙여주는 방법도 있다.

https://주소.tistory.com/manage

‘쓰기’ 를 클릭한다.

위와 같이 기본 화면이 나온다.

우측 상단에 있는 기본모드를 클릭하면, HTML 모드로 볼 수 있는 버튼이 등장한다.

HTML모드를 누르면 자동으로 다크모드로 변한다.

여기에서 우리가 알고 있는 HTML 코드들을 입력해 보자. 입력할 것이 없다면 간단히 따라해보자.

나는 아래 항목을 복사-붙여넣기 하였다.

<ol>

<li>물을 끓인다.</li>

<li>스프를 넣는다.</li>

<li>면을 넣는다.</li></ol>

그리고 이 상태에서 다시 우측 상단의 ‘기본모드’를 클릭하면

이렇게 입력한 HTML이 출력된다.

완전 야매이긴 한데 그래도 엄청 쉽기도 하고 빠르게 내가 쓴 값의 결과를 확인할 수 있어 좋다.(티스토리의 HTML을 다른 곳에 그대로 복사 붙여넣기 하는 것은 추천하지 않는다. 이유를 알 수 없지만 티스토리의 HTML에는 기본적으로 알수 없는 무언가가 덕지덕지 붙는 경우가 있기 때문이다. 간단한 공부 용도 정도로만...)