[블로그 글쓰기]-HTML 과 Tag 정보

글쓰기

이글은 PC에서 작성되었습니다.

안녕하세요 오늘 오전에 외출을 나갔다오니

벚꽃이 한창입니다.

 

다들 좋은 하루 보내고 계신지요.

 

오늘은 블로그 글쓰기 특히 티스토리에서 중요한 HTML과 TAG에 대하여 알아보겠습니다.

초보 블로거로 블로그를 시작하며

처음에 홈페이지 소유확인 등을 하면서 HTML 편집을 하면서

'티스토리는 HTML과 TAG에 대한 최소한의 지식이 있어야 하겠구나'

하는 생각이 들어 간단한 HTML과 TAG에 대하여 알아보았습니다.

 

그럼 제가 공부한 정보를 공유해 보도록 하겠습니다.

HTML(HyperText Markup Language)과 TAG

HTML은 웹문서를 만들기 위한 언어의 한 종류입니다.

 

요약 웹 문서를 만들기 위하여 사용하는 기본적인 웹 언어의 한 종류이다. 하이퍼텍스트를 작성하기 위해 개발되었다.

인터넷 서비스의 하나인 월드 와이드 웹을 통해 볼 수 있는 문서를 만들 때 사용하는 웹 언어의 한 종류이다. 특히 하이퍼텍스트를 작성하기 위해 개발되었으며, 인터넷에서 웹을 통해 접근되는 대부분의 웹 페이지들은 HTML로 작성된다.

HTML은 문서의 글자크기, 글자색, 글자 모양, 그래픽, 문서 이동(하이퍼링크) 등을 정의하는 명령어로서 홈페이지를 작성하는 데 쓰인다. HTML에서 사용하는 명령어는 태그(tag)라고 하는데 꺽쇠 괄호"<>"를 사용하여 나타낸다. 일반적으로 태그는 시작과 끝을 표시하는 2개의 쌍으로 이루어져 있으나 "img", "br"등의 태그와 같이 시작 태그만으로 그 영향을 나타내는 경우도 있으며, 종료 태그의 이름은 슬래시 문자[/]로 시작된다. 이와 같이HTML로 작성된 문서를 HTML문서라 하며 이 HTML로 작성된 문서를 웹 브라우저가 해석하여 이용자에게 보여주게 된다. HTML에서는 문서가 별도의 코드(code)를 인식하여 완벽한 하이퍼텍스트를 만들 뿐만 아니라 단어 또는 단문을 인터넷의 다른 장소나 파일로 연결시킬 수 있다.

HTML은 전자 문서의 서식을 정의하기 위해 만들어졌으며, 국제표준 SGML의 부분 집합으로 정의되었다. HTML은 SGML에서 특히 하이퍼텍스트를 강조하여 만들어진 언어이며, 아스키코드로 된 일반적인 텍스트로 구성되었다. 이 언어는 별도 컴파일러가 필요치 않으며, 웹 브라우저에서 해석이 가능한 사용하기 쉬운 언어로 각광을 받고 있다.

[네이버 지식백과] HTML [Hypertext Markup Language] (두산백과 두피디아, 두산백과)

-네이버 지식백과의 HTML의 정의-

 

HTML은 간단히 말해서 웹문서를 만드는 언어의 한 종류로 우리가 티스토리를 편집할 수 있는 명령어 즉 언어 체계입니다. 그리고 TAG는 그 언어체계 속의 명령어인데 <> 꺽쇠 갈호를 통해서 여러 가지 기능을 작동하게 하는 명령어입니다.

 

간단히 티스토리를 꾸미는데 필요한 TAG에 대해서 알아보겠습니다.

 

제 경험으로는 티스토리 홈페이지에서 글쓰기를 할 때 기본 기능 가지고 모두 다 해결할 수 없는 경우가 있습니다.

 

예를 들어 본분 1 2 제목 1 2 등으로 되어있는 크기 조절 말고는 글자크기를 조절할 수 없는 거 같이 말입니다.

 

간단한 필수 태그

1. <FONT> 태그

<font> 태그는 폰트의 속성을 지정해주는 태그입니다 즉 글자의 속성을 정해주는 태그인데요

글자의 크기 및 색상을 변경할 때 사용할 수 있습니다.

 

예를 들어서

<font color="색상">내용</font> <font size="크기">내용</font> <font color="색상"size="크기">내용</font>

이런 명령어로 색상과 크기를 변경할 수 있습니다

모든 태그의 말미에는 </태크>로 태그를 닫아줘야 작동합니다.

 

사이즈 색상 지정 예제

 

위의 예제에는 html 모드에서

색상 red 사이즈 20을 설정하여

 

<font color="red"size="20">

 

을 적용해준 예입니다.

더 섬새한 컬러를 사용하고 싶으시다면

RGB 코드표를 이용하여 색상을 지정해주실 수 있습니다.

 

2. <A> 태그

<A> 태그는 링크를 연결해주는 태그입니다.

홈페이지나 다른 사이트 혹은 나의 다른 페이지를

링크하고 싶을 때 사용합니다.

 

글쓰기에 기본적으로 링크 기능이 있지만

링크에 여러 가지 태그를 사용하여

편집을 하고 싶으실 때 사용하실 수 있습니다.

태그 사용법은

<a href="연결할주소"target="연결방법"> 내용 </a>

연결 주소에는 연결할 사이트나 파일의 경로를 입력해주시고

연결방법에는 _blank를 기입해주시면 새창에 새주소가 연결이 되고

target 속성을 생략을 하시면 현제 창에 주소가 연결이 됩니다.

 

예를 들어 저의 라따뚜이 파스타 만들기의 창으로 가고 싶을 때는.

 

라따뚜이 파스타 만들기

 

이런 식으로

<font color="add8e6"><a herf="주소"target="_blank"> 라따뚜이 파스타 만들기</font></a>

 

이런 식의 명령어를 html 편집창에 넣어주시면 링크가 연결이 됩니다.

font 태그를 사용하여 색상도 바꾸어보았습니다.

 

3. <br>와 <p> 태그

 

html 문서에서는 줄 바꾸기 태그를 하지 않으면

모든 글이 한 줄로 표시가 됩니다.

 

<br> 태그는 줄 바꾸기 태그이고

<p> 태그는 문단을 지정하는 태그입니다

 

티스토리에서는 앤터를 쳐서 줄 바꾸기를 하면

자동으로 <p> 태그가 입력이 되는데요

글을 쓰시고 html 모드로 가셔서 확인해 보시면

앤터를 쳐서 줄 바꾸기를 한 곳에는 <p> 태그가 입력이 돼있습니다.

 

제가 어제 구글 애드센스 신청을 하고 왔습니다.

애드 샌스 승인방법 등의 글들을 찾아보다가

구글에서는 한문단이 끝나는 글에는 ~이다. ~다.

등 완벽한 문단을 좋아한다고 하더라고요

 

그런데 문단이 끝나지 않았을 때 ~ 요 ~ 는 등으로 끝나거나

띄어쓰기 때문에 다른 글자로 끝나는 경우에도 <p></p>

태그 때문에 문단의 끝으로 인식이 될 수도 있으니

만약 애드 샌스 승인이 나지 않으면 글들을 모두 수정해 볼 텐데요

그때는 문단의 끝이 아닌

<p></p> 부분을

<br></br>로

수정해 볼 예정입니다~ 후기는 따로 올리겠습니다.

 

---

이렇게 간단한 태그 몇 가지와 html에 대하여 알아보았는데요

티스토리 블로그를 운영하신다면 간단한 태그 정도는 숙지하셔야

티스토리를 좀 더 자유롭게 꾸밀 수 있는 기술을 습득하게 되실 겁니다.

저도 아직 초보 블로거라 다양한 태그들을 잘 사용하지 못하지만

여러 가지 태그들을 배우면서 하고 있어요

여러 가지 정보들 속속 공유해드릴 테니 함께 좋은 글을 쓰고 좋은 블로그를 만들어봅시다!!

 

항상 배우는 자세는 우리 삶에 도움을 줍니다.