HTML/CSS head와 태그란 사용 방법

HTML과 CSS에 대해 알아보도록 하겠습니다.

HTML과 CSS 란, 마크업 언어로써 웹 사이트를 만들기 위한 필수 언어입니다.

HTML은 골조, 뼈대와 같은 의미로 볼 수 있고, 그것을 장식하는 것이 CSS입니다.

처음에는 조금 어려울지도 모르지만 익숙해지면 그렇게 어려운 것도 아닙니다.

익숙해지기까지 시간이 걸리지만요.

전혀 지식이 없지만 웹 사이트를 처음부터 만들고 싶거나, 블로그를 커스터마이즈 하고 싶은 분들은 한 번 읽어보셔도 괜찮을듯합니다.

입문자분들을 위한 내용이기 때문에 어느 정도 지식이 있는 분은 지루할지도 모릅니다.

여기에서는 특별히 무언가 사이트를 만들거나 하지는 않지만 무엇을 기술하면 어떠한 것이 표시되는가를 알 수 있도록 적도록 하겠습니다.

그러면 HTML과 CSS에 대해 살펴보도록 하겠습니다.

 

툴 준비

HTML이나 CSS는 텍스트 에디터를 사용해 코드를 작성하도록 하겠습니다.

메모장에 작성하여도 문제는 없지만, 지원 기능이 별로 없기 때문에 툴을 사용하는 것이 좋습니다.

HTML이나 CSS를 작성할 수 있는 툴이 많이 있기 때문에 몇 개만 적어보도록 하겠습니다.

만약 기존에 사용하는 툴이 있다면 그것으로 충분합니다.

 

툴(TOOL)

텍스트 에디터
Visual Studio Code (VScode)
이클립스

무료로 사용 가능한 툴입니다. 

브라우저는 Google Chrome를 사용하겠습니다.

 

HTML 작성

HTML를 작성할 때의 룰을 기억해 두는 것이 좋습니다.

<태그명>~</태그명>

 

위처럼 시작 태그(<태그명>)와 종료 태그(</태그명>)로 문장들을 감싸서 적어줍니다.

종료 태그에는 태그명 바로 앞에 슬래시(/)를 붙여줍니다.

감싼 부분 (태그를 포함)을 요소라고 합니다.

요소라는 말이 자주 나오기 때문에 외워 두도록 합니다.

<태그명><태그명>~</태그명></태그명>

위처럼 요소 안에 요소를 넣을 수도 있습니다.

 

head 요소 작성

HTML에도 몇 개의 종류가 있습니다.

HTML4, XHTML 등등… 현재 주류는 HTML5입니다.

여기에서는 HTML5로 작성하도록 하겠습니다.

HTML5로 작성하기 위해서는 [이 문서는 HTML5입니다]라는 선언이 필요합니다.

본문에 다음의 코드를 작성합니다.

<!DOCTYPE html>

 

이것으로 HTML5 문서 선언은 끝났습니다. 다음은 HTML의 내용을 적어나가도록 하겠습니다.

<!DOCTYPE html> 
<html>  </html>

 

HTML은 기본적으로 시작 태그(<html>)와 종료 태그(</html>)로 감싸고 그 안에 내용 적어갑니다.

<!DOCTYPE html> 
<html lang="kr">  </html>

 

lang은 language를 의미합니다.

kr은 korean의 kr입니다.

그리고 한국어 웹 사이트라고 지정하고 있습니다.

이처럼 lang=”kr” 부분을 속성이라고 하며, 태그에 부가정보를 부여합니다.

lang 부분은 속성명, “”안에 적은 kr 부분을 속성값이라고 합니다.

속성의 바로 앞은 반드시 스페이스를 넣어줘야 합니다.

여기서는 <html> 태그에 [lang (언어)]와 [kr (한국어)]라는 정보를 지정하고 있습니다.

<!DOCTYPE html>
<html lang="kr">
  <head>  </head>
</html>

 

HTML은 head 요소와 body 요소로 구성되어 있습니다.

head 요소 내용은 웹 페이지에 표지 되지 않지만 HTML 문서에 필요한 정보를 적어두는 곳입니다.

head는 뇌와 같은 것이라고 생각하면 됩니다. 

<!DOCTYPE html>
<html lang="kr">
  <head>
   	<meta charset="UTF-8">
  </head>
</html>

 

시작 태그는 있는데 종료 태그가 없는 곳이 있네요.

이처럼 종료 태그가 없는 요소도 있습니다.

meta 요소는 브라우저나 검색엔진 등에 정보를 알려주기 위한 요소입니다.

여기서는 UTF-8이라는 형식으로 적어 HTML 문서라는 것을 의미하고 있습니다. 

<meta>태그 전에 스페이스가 많이 들어가 있습니다.

이것은 Tab 키를 눌러 들여 쓰기를 한 것입니다.

들여 쓰기를 하는 것으로 작성한 코드를 좀 더 보기 쉽게 하도록 합니다.

<!DOCTYPE html>
<html lang="kr">
  <head>
    <meta charset="UTF-8">
    <title>테스트</title>
  </head>
</html>

 

title 태그에 페이지의 타이틀을 지정합니다.

브라우저의 탭에 표시되는 타이틀입니다.

브라우저의 탭에 타이틀을 적어주는 것으로 어떤 사이트 인지 알기 쉽게 해 줍니다.

실제 웹 사이트에서는 head에 많은 것을 적어두고 있지만, 기본은 이것으로 문제없기 때문에 다음은 body 요소를 보도록 하겠습니다.

댓글