티스토리 블로그를 운영하다 보면 글쓰기 창 상단에 위치한 "HTML" 버튼을 한 번쯤 눌러보게 된다.
처음에는 단순히 텍스트와 이미지를 올리는 것만으로도 충분하지만, 어느 순간부터는 글의 구조나 스타일을 더 자유롭게 다듬고 싶어지는 욕심이 생긴다.
그런 이유로 티스토리 HTML 작성의 기본부터 차근차근 정리해보려 한다.
1. HTML이란 무엇인가
HTML은 HyperText Markup Language의 약자로,
웹 페이지의 구조를 구성하는 언어다.
블로그 글, 이미지, 링크, 문단, 제목 등 우리가 웹에서 보는 모든 콘텐츠는
HTML 태그를 통해 구조화되어 있다.
가장 가까운 예로, 우리가 일반 편집기로 작성한 글도
HTML로 보면 <p>, <strong>, <img> 같은 태그들로 이루어져 있다.
2. 티스토리에서 HTML 작성이 필요한 순간
티스토리 글쓰기 도구는 이미 충분히 기능적이지만,
아래와 같은 경우에는 HTML을 직접 손보는 것이 유리하다.
- 특정 텍스트에 고유한 스타일을 주고 싶을 때
- 외부 콘텐츠(YouTube, 지도 등) 삽입이 꼬였을 때
- 정렬이 어긋날 때 수동으로 조정할 때
- 글의 구조를 미세하게 다듬고 싶을 때
3. 꼭 알아야 할 기본 HTML 태그
가장 자주 쓰이는 HTML 태그 몇 가지만 익혀두면,
보편적인 글 작성에 큰 도움이 될 것이다.
- <p> : 문단
- <br> : 줄바꿈
- <strong> : 굵은 글씨
- <em> : 기울임
- <a href=""> : 링크 삽입
- <img src=""> : 이미지 삽입
- <ul>, <li> : 목록 만들기
아래는 링크 삽입 사용 예시이다.
<a href="https://www.example.com">여기를 클릭하세요</a><a href="https://www.example.com">
<img src="https://example.com/image.jpg" alt="예시 이미지">
</a>
4. HTML 편집 시 주의할 점
- 태그의 열림과 닫힘을 꼭 확인할 것 (<p></p>, <a></a>)
- 복잡한 태그 구조에서는 주석을 활용할 것 (<!-- 설명 -->)
- HTML 수정 후에는 ‘미리보기’를 꼭 눌러볼 것
- 글쓰기 도중 코드가 사라지는 현상에 대비해 수시로 저장할 것
5. HTML을 배워야 할까?
대부분의 블로거들이 일반 글쓰기로도 훌륭한 글들을 많이 작성하고 있고, 당연히 필수는 아니다.
하지만 기본적인 태그 구조를 이해하고 몇 가지 편집을 직접 해볼 수 있다면,
일반 글쓰기에서 오는 제약을 많이 줄일 수 있어 답답함을 해소 할 수 있다.
나도 HTML을 아주 잘 알지는 않지만,
필요한 순간에 조금씩 손을 대보니 이제는 나름 그 흐름을 이해하게 되었다.
앞으로도 이렇게 손을 대보는 일련의 과정들을 기록해 두면 좋을 것 같다는 생각이 들어,
이 글을 시작으로 [HTML] 시리즈를 차근차근 작성해 볼 계획이다.