티스토리 HTML 태그란 무엇인가?
- Programming
- 2021. 7. 28.
티스토리 HTML 태그란 무엇인가?
a 태그 p 태그 등 티스토리 같은 블로그를 처음 시작하신 분들은 잘 모를 수 있는 내용입니다.
HTML은 쉽게 말하면 컴퓨터가 알아들을 수 있는 언어로 문서나 웹페이지를 만드는 것을 말합니다. 파이썬 C언어 등 수 많은 컴퓨터 언어 중 하나입니다.
우선은 HTML CSS Javascript 이 세가지를 이해하고 넘어가셔야 합니다.
이 세가지가 우리의 블로그를 구성하고 있는 3가지 프로그래밍, 컴퓨터 언어입니다.
HTML : 텍스트, 문서 작성
CSS : 스타일, 폼, 폰트크기, 색상 등
Javascript : 외부 자료 애드센스
블로그에서 사용할 때 크게는 3가지 부류로 나누어질 수 있지만 처음에는 HTML만 이해하시고 넘어가셔도 아무 문제없습니다. 애드센스 또한 HTML 안에 넣어서 사용하기 때문에 배우지 않으셔도 됩니다. 나중에 스스로가 흥미가 생겼을 때 조금씩 찾아보시면 됩니다.
HTML은 태그라는 형식으로 작성해 나아갑니다.
태그는 <> </> 형식으로 묶여 있습니다. 태그 하나하나 마다 각각의 의미를 가지고 있습니다. 간혹 </>로 끝나지 않고 <~~ /> 이런 식으로 하나로 묶이기도 합니다.
티스토리 블로그스팟 워드프레스 등에서 자주 사용할만한 HTML 태그에 대해서 알려드리겠습니다.
기본
기본 태그는 티스토리 글에는 들어가지 않고 관리자 > 스킨편집 > HTML 편집 쪽에 들어가는 태그들 입니다.
<html>: 메인 페이지에만 존재합니다. HTML 언어라는 것을 알리기 위해 이 태그로 전체의 코드를 둘러싸고 있습니다.
<head>: HTML 문서의 속성을 지정하기 위한 태그. 이 태그 안에 타이틀이나 메타데이터, 애드센스, 서치콘솔 등을 넣는다.
<body>: HTML 문서의 본 모양을 나타내기 위한 태그. 표시될 문서의 레이아웃을 이 태그 안에 넣으면 됩니다. 속성으로 background=배경그림, bgcolor=배경색, text=글자색, link=링크색, vlink=방문링크색, alink=활성링크색 등을 사용할 수 있지만 CSS에서 가능하므로 굳이 body 태그에 직접 속성을 지정해야 할 이유가 없습니다. 심지어 HTML5 버전으로 넘어오면서 body 안에 속성을 지정하는게. 사라졌습니다
형식
<h[1-6]>: 제목(heading)을 표시할 때 사용. <h1>이 가장 크고 <h6>이 가장 작습니다. 크기는 브라우저마다 표시하는 방법이 달라 다르게 나타날 수 있습니다. <h1>은 한 문서 안에 하나만 사용하는 것을 권장하는데 이런 SEO 부분은 다음시간에 다뤄보도록 하겠습니다.
사용 방법
<h1>1단계</h1>
<h2>2단계</h2>
<h3>3단계</h3>
<h4>4단계</h4>
<h5>5단계</h5>
<h6>6단계</h6>
<p>: 새 문단(paragraph)을 표현합니다. </p>로 닫습니다. 이 태그를 쓸 경우 기본적으로 문단 하단에 약 1줄 가량의 빈 공간이 생기기 때문에 <br>을 선호하는 경우가 많은데, 문단이라면 <p> 태그로 묶어주는 것이 올바른 사용법입니다. 티스토리에서는 관리자에서 문단 간격을 사용할지 말지를 지정할 수 있습니다.
폰트
<b>: 폰트 두껍게(bold) 효과. strong 태그와 비슷한 효과이지만 상대적으로는 두꺼움이 약한 효과입니다.
<i>: 텍스트를 기울임(italic) 표시. 기술 용어, 외국어, 일반적으로 기울임으로 사용되는 용어 등을 강조한다.
<strong>: 포함된 텍스트를 강하게 강조할 때 사용.
<em>: <strong>보다 약한 강조를 나타낼 때 사용.
<b>굵게 표시됩니다.</b>
<i>기울임꼴로 표시됩니다.</i>
<strong>강하게 강조합니다.</strong>
<em>약하게 강조합니다.</em>
이미지
<p>#png|alignCenter|width="720" height="457" data-origin-width="1126" data-origin-height="715"
alt="" data-ke-mobilestyle="widthOrigin"|||_##]</p>티스토리 이미지 태그가 기존과는 조금 달라졌습니다.
width : 보여질 넓이
height : 보여질 높이
data-origin-width : 기존 이미지의 넓이
data-origin-height : 기존 이미지의 높이
alt : 대체 설명(기본적으로 제공X)
글 중간중간에 가 들어가 있는 것을 볼 수 있는데 이것은 공백을 의미합니다. 보통 티스토리에서는 Enter 키를 눌러 줄을 만들어 주면 <p> </p> 형식으로 만들어 줍니다.
여기까지 블로그를 하시면서 기본적으로는 알고 가셔야 할 필수 태그들에 대해서 알아보았습니다. 더 많은 태그의 종류를 알아보고 싶으신 분들은 아래의 글에서 참고하시면 됩니다.
[Programming] - HTML 태그의 종류 - A to Z
HTML 태그의 종류 - A to Z
HTML 을 사용하실 때 태그의 종류와 그 용도에 대해서 알아보겠습니다. HTML은 홈페이지, 사이트 뿐만 아니라 티스토리나 블로그스팟, 워드 프레스 등의 블로그 사이트에서도 많이 활용되고 있는
coconuts.tistory.com