2. HTML 기초 | 아톰(Atom) 기본 사용법, HTML 태그, HTML 공부 방향

/* 윈도우 10에서 Atom 편집기를 사용했습니다. */

 

아톰(Atom)에서 파일 작성하는 법

 

File-Open Folder 선택해서 HTMl 파일을 저장할 폴더 선택해주자

 

 

 

생성된 폴더 우클릭-New File 선택

 

 

 

파일 이름 작성하고 엔터!

 

 

 

생성 완료!

 

 

HTML 태그

태그란?

<strong>...</strong>과 같이, 내용의 앞 뒤로 씌워서 변화를 주는 명령어. 태그를 열고, 닫는다고 표현한다.

 

▶줄바꿈 관련 태그

•  <br> : break의 약자. 단일 태그(닫는 태그 없음)이고, 태그가 있는 곳에서 한 줄 띄운다. 

• <p>...</p> : paragraph의 약자. 태그 사이에 있는 내용을 한 문단으로 처리해준다. 마지막 줄로부터 한 칸 띄워진다.

 

<br>태그와 <p>...</p>태그의 차이점을 나타내기 위해서 파일을 만들어봤다.

<br>은 그저 '한 줄 띄우기'라는 역할을 다할 뿐이다.

<p>...</p>는 태그로 감싼 문단을 서로 구분하게 해준다.

한 줄을 띄워주는 것은 <br>과 기능이 동일하지만, 코드를 봤을 때 문단이 있다는 정보를 더욱 확실하게 보여준다. 문단을 만들 때는 <p>...</p>태그를 사용하는 게 좋다.

 

 

HTML 태그 중 의미 있는 태그를 사용하면 좋다

<h3>This is headline.</h3>
<strong><span style="font-size:19px;">This is headline.</span></strong>

제목을 나타내려고 한다는 가정.

위의 코드를 편집기에 입력하고, 파일을 저장한 뒤 열어서 확인해보자.

 

 

 

두 문장은 다른 코드를 사용했지만 실행 결과를 보면 거의 똑같아보인다.

그렇다면 둘 중 어느 코드를 쓰는 게 더 나을까?

정답은 <h3>...</h3> 태그!

HTML에서 제목을 나타내는 태그는 <h>...</h>이다.

 

예를 들어, 검색엔진에서 penguin을 검색했다면

검색엔진은 제목 태그로 감싸진 <h3>penguin</h3> 페이지를 먼저 보여준다.

<strong>과 <span> 태그는 장식에 불과하기 때문에, 제목 태그가 승리한다.

 

정보화 시대에서 검색엔진에 노출되지 않는다면 존재하지 않는 정보라고 볼 수 있다.

그러므로, 태그의 의미를 알고 적절히 사용하는 게 도움이 될 것이다.

 

 

 

https://www.advancedwebranking.com/html/

The average web page from top twenty Google results

위의 사이트로 들어가면, 전세계에 있는 웹페이지들이 몇 종류의 태그로 이루어져 있는지 보여준다.

 

 

 

 

보통 32개의 코드로 이루어져 있다.

 

 

 

그리고 조금 더 내려보면, 자주 쓰이는 태그에 대해서 나와있다.

즉, 우리는 엄청나게 많은 HTML 태그를 다 외울 필요가 없다.

기본적인 것만 적절하게 사용해도 우리는 충분히 우리가 나타내고자 하는 것들을 다 나타낼 수 있을 것이다.