HTML 완전 기초 1탄 - HTML 기본 tag (for text)

티스토리는 기초 Html을 익히기 매우 적합한 환경이다.

내가 쓰는 글을 기본모드 대신에 HTML로 변경 한 후 확인 해 볼 수 있기 때문에,

한 번 씩 HTML 태그로 변경해 가면서 html이 어떤 구조로 적용되어 있는지 보기 편하다.

 

맨 첫 포스팅은 정말 너무나 기본적이고, 어디에선가 한 번쯤은 본적이 있는듯한 태그들을 위주로 알아보자.

안녕에 대해서 알아봅시다.
한국어 : 안녕하세요
영어 : HI
불어 : Bonjour

위의 정말 간단한 텍스트를 기반으로 아래 HTML 태그가 어떤 식으로 변해가는지 확인해 보자.

1. 제목만들기

안녕에 대해서 알아봅시다.

한국어 : 안녕하세요 영어 : HI 불어 : Bonjour

' 안녕에 대해서 알아봅시다. ' 는 문장의 제목이다. 
아래 한국어 : 안녕하세요.... 등의 문장보다 글씨가 좀 더 크고 굵다.

워드 사용을 할 때 처럼 글씨를 굵게 처리하고, 폰트를 크게 하면 되겠지만, 
HTML은 제목을 표시하는 태그가 따로 있다. 

바로, 안녕에 대해서 알아봅시다 앞에 붙은 <h2> 이다.
Heading 은 총 6단계로 구성되어 있다. 

 

Heading level1

Heading level2

Heading level3

Heading level4

Heading level5

Heading level6

 

h1>h2>h3>h4>h5>h6 숫자가 커질수록 반대로 글자는 작아진다.

 

생활코딩 저자가 말하길

웹페이지의 검색률을 높이기 위해서 우리는 제목 태그를 적극 활용해야 한다. 

누군가 HTML을 검색했을 때,

내 글의 제목은 <h1>HTML</h1> 이야 라고 당당하게 말하고 있는 블로그와 

단순하게, 텍스트를 굵게 하고 폰트를 크게 키운 (- 웹 알고리즘은 제목인지 본문 글인지 분간할 수 없는) 블로그 중에,

당연히 제목으로 표시해둔 블로그의 검색 노출이 우선순위를 가지게 될 것이다.

2. 줄 바꾸기

맨 위의 예시에서는 '한국어 : 안녕하세요 영어 : HI 불어 : Bonjour ' 줄 바꿈이 없는 문장을 사용했다. 

해당 문장은 단순하게 텍스트로만 구성되어 있다, 

한국어 :안녕하세요

영어 :HI 

불어 :Bonjour

한국어 : 안녕하세요
영어 : HI
불어 : Bonjour

줄을 바꾸는 방법은 두가지가 있다.

1. <p></p> tag 이용

2. <br> tag 이용

p tag의 경우는 paragraph의 약자로 문단 단위로 줄 바꿈을 하는 것을 말한다.

1번 예시는  ' 한국어 : 안녕하세요 영어 : HI 불어 : Bonjour '  라인이 통째로 한 문단이 되는 것이고 

2번 예시는 한국어 / 영어 / 불어가 각각 한 문단이 되는 것이다. 

한국어 :안녕하세요

영어 :HI 

불어 :Bonjour

3번 예시의 경우에 한국어/영어/불어가 한 문단으로 되어 있지만, 각각 한국어/영어/불어 뒤에 <br> 이라는 줄바꿈 태그를 
추가 함으로써, 1번 예시와는 다르게 줄이 바뀐 것을 볼 수 있다 .

한국어 : 안녕하세요
영어 : HI
불어 : Bonjour

보통 p 는 단락을 구성하고 있기 때문에 처음과 끝을 명확하게 해줘야 해서 닫힘 태그를 사용하지만, 
br의 경우에는 문장의 끝자락에 추가하여 enter처럼 줄바뀜이 되는 것이기 때문에 따로 닫힘 태그가 필요없다 .

 p 태그와 br 태그가 가끔 구분이 안가는 곳도 있기는 한데,

티스토리의 경우 두 태그의 차이를 확연하게 비교 할 수 있다. 

p 태그와 br 태그가 가끔 구분이 안가는 곳도 있기는 한데,
티스토리의 경우 두 태그의 차이를 확연하게 비교 할 수 있다. 

위 두 문장의 차이를 확연히 구분 하고 어디서 부터 어디까지 p 태그가 적용되었고, 어떤 문장에 br이 적용되었는지 알 수 있다면, 
포스팅의 내용을 완전히 이해한 것이다.

 p 태그와 br 태그가 가끔 구분이 안가는 곳도 있기는 한데,

티스토리의 경우 두 태그의 차이를 확연하게 비교 할 수 있다. 

p 태그와 br 태그가 가끔 구분이 안가는 곳도 있기는 한데, 
티스토리의 경우 두 태그의 차이를 확연하게 비교 할 수 있다. 

좀 더 눈에 띄게 티가 나도록 인용문구를 추가해서 비교해 보겠다.

3. 텍스트 효과

한국어 : 안녕하세요
영어 : HI
불어 : Bonjour

HTML은 구지 외우려 하지 않아도 인터넷에 조금만 검색해도 텍스트 태그 설명이 잘 되어 있다. 

우리가 워드를 사용하면서 단축키로 ctrl + B 하면 글자가 굵게 변하고 ctrl + U 하면 글자에 밑줄이 그어진다. 

또한 ctrl + I 하면 이태리체로 바뀐다. 

html도 똑같다고 생각하면 된다. 굵게 표시되기를 원하는 글자에 앞에 <b> 그리고 끝날 때 </b>로 꼭 닫아주면, 

원하는 효과를 줄 수 있다.