태그와 보일러 플레이트
처음으로 작성한 html 파일은 매우 보잘것 없어 보인다. 사실 우리는 html 파일을 작성 하였다기 보다는 텍스트 파일을 작성한 후 그것을 웹 브라우저를 통하여 보았다라고 표현하는 것이 좀더 정확한 표현일지도 모르겠다.
HTML 이에요.
어찌 되었던 이전의 파일을 조금 수정하여. 이 문서가 html 문서라는 것을 표현해 보도록 하자. 우선 html의 기본 규칙 태그는 "<>"로 감싸 시작하고, "</>"로 감싸 끝내는 형태라는 점을 상기해 이전 파일을 수정해 보도록 하자.
<html>
this is first example.
</html>파일을 저장하고, 브라우저의 새로고침 버튼을 클릭하여 페이지를 다시 불러오도록 하자. 보여지는 것은 이전과 동일하지만, 이제는 누가 봐도 이 문서는 html 문서로 보인다.
몸통 - Body
html 파일의 규칙중 하나가 웹 브라우저에서 직접 출력되는 부분을 몸통으로 구분한다. <html> 태그와 마찬가지로 body 태그를 이용하여 이전 문서를 수정해 보자.
<html>
<body>
this is first example.
</body>
</html>코드를 보기 쉽도록 하기 위하여 각각에 태그를 들여쓰기 하였다. 들여 쓰기의 버릇은 문서를 구조화 하는데 매우 좋은 습관이므로 익숙해지도록 한다.
몸통이 있다면 머리가 있다 - head 와 title
소 제목과 같이 웹 브라우저에서 직접 출력되는 body 이외에 <head> 태그를 이용하여 문서의 정보등을 삽입한다. 이번에는 <title> 태그를 이용하여 문서의 제목을 변경해보록 할것이다. 문서의 제목은 웹 브라우저의 상단 탭에 표시된다.
<html>
<head>
<title>EXAMPLE</title>
</head>
<body>
this is first example.
</body>
</html>저장 후 의도대로 표현되는지 확인하도록 하자.
현재 html은 version 5.
한가지 예외로서, 현재는 보통 HTML의 5버전이 사용되고 있다. 물론 4버전 또는 그 이하의 버전을 사용하여도 문제 없으나 많은 표준이 HTML5에 적용되어 있으므로, 문서의 처음에 예외적으로 열고 닫히는 태그가 아닌 <!DOCTYPE> 태그를 사용해보도록 한다.
<!DOCTYPE html>
<html>
<head>
<title>EXAMPLE</title>
</head>
<body>
this is first example.
</body>
</html>vscode에서 위와 같이 진행하면 각각의 태그와 내용들의 글 색상이 달리 표현되는 것을 관찰할 수 있을것이다.
항상 기본으로 사용될 Boiler Plate
다시한번 위의 코드를 보게 되면 어떤 문서이든 위의 내용은 기본적으로 작성되어야 할 구조임을 알수 있을것이다. 이렇게 항상 같은 형태의 기본 구조를 Boiler Plate라고 표현 한다. 아래와 같이 스스로의 Boiler Plate를 만들어 보고, 브라우저를 통해서 확인해 보도록 하자.
<!DOCTYPE html>
<html>
<head>
<title>TITLE</title>
</head>
<body>
CONTENTS
</body>
</html>
댓글
댓글 쓰기