웹개발의 기본 언어 HTML 기본구조와 태그의 이해편
- HTML 문서의 기본 구조의 이해
HTML의 문서는 그동안 이 글을 읽으시는 분들께서 사용하셨을지도 모르는 한글이나, 엑셀, 파워포인트와 같지 않고 HTML만의 형식을 이용하여 작성할 수 있습니다. 기본이 되는 뼈대는 html이라는 프레임 안에 head와 body이 자리하고 있는 것입니다. 잠시 HTML만의 영역으로 구성해 보자면 아래와 같습니다.
<html> = <html>과 맨 마지막의 </html>이 보이실거에요. 웹문서의 시작과 끝을 나타냅니다.
<head> = 웹 브라우저가 웹 문서를 해석하는데 필요한 정보를 제공하는 부분입니다.
</head>
<body> = 실제로 웹 브라우저 면에 나타나는 내용입니다.
</body>
</html>
- 태그에 대한 이해
웹문서 개발에 기본이 되는 다양한 태그들 중에 위에서 언급하였던 언어들에 대해 이해를 돕고자 풀어 설명해 드리도록 하겠습니다.
일단 문서의 유형을 지정하는 <!DOCTYPE html>
이렇게 사용하게되는 태그는 현재 이문서가 HTML5 문서입니다. 라고 알려주는 것으로 이해하시면 됩니다.
<html>과</html>은 위에서 언급한바 있었던 웹문서의 시작과 끝입니다. 따라서 </html> 뒤에는 내용이 없어야 합니다.
<head></head> 헤드영역입니다. 이 부분은 HTML로 작성한 문서가 웹 브라우저 안에 보여지는 <body></body>와는 다르게 화면에 보여지는 영역이 아닙니다. 헤드영역안에 사용할수 있는 태그에 대해 간략히 소개해 드리도록 하겠습니다.
<meta>,<title>태그입니다.
<meta>는 독립적으로 쓰이는 언어이기에 </meta>와 같은 내용이 들어가지 않습니다.
<meta>영역에 쓰이는 정보는 웹 문서와 관련된 정보를 지정할 때 쓰이는 언어로써 만약 사용자가 화면에 한글로 된 내용을 표시하고 싶다거나 키워드, 설명, 제작자 정보등을 담아 보려할 때 다양하게 사용할 수 있습니다.
<meta charset="UTF-8"> 이것의 의미는 한글로된 내용 표시하겠다입니다.
<meta name="keywords" content="웹문서키워드"> 이것의 의미는 웹의 키워드 담았다는 의미입니다.
<meta name="description" content="웹문서설명"> 이것의 의미는 웹문서의 설명을 담았다는 의미입니다.
<meta name="author" content="제작자"> 이것의 의미는 제작자를 담았다는 의미입니다.
<title>태그는 작성된 내용이 표기되므로 </title>을 써주는 태그이며 <title></title>사이에 내용을 입력해 주어야합니다. 말그대로 웹의 제목표시줄에 입력된 내용이 출력이 됩니다.
<body></body>는 사용자가 웹페이지 안에 보여주고자하는 내용을 담는 태그입니다. 사이에 다양한 코딩으로 여러 출력물을 만들어 낼 수 있게 해주는 기본틀이라 생각해 주시면 되겠습니다.
기본적인 틀을 알아보았으니 이제 입력 후 출력될 내용을 일일이 저장하면서 보는건 꽤나 번거로운 일이라 생각이 들텐데요. 이 때문에 웹제작자가 입력된 내용을 바로바로 출력화면으로 보면서 수정이 가능할 수 있도록 비주얼 스튜디오 안에서는 라이브서버라는 툴을 제공하고 있습니다. 설치 과정을 담아보도록 하겠습니다.
비주얼 스튜디오 안에 왼쪽 메뉴에서 아래와 같은 모양을 클릭하시고 Live를 입력하시면 Live Server가 두번째에 위치한 것을 찾을 수 있을겁니다. 클릭하시면 Live Server가 나오는데요. 설치를 클릭하시면 자동으로 설치가 되기때문에 설치가 완료되면 바로 이 기능을 사용하실 수가 있게 됩니다.
간단한 HTML문서를 만들어 보면서 때때로 입력 화면에 아무곳에서나 마우스 우측 버튼을 클릭하시면 Open with Live Server메뉴가 보이게 될겁니다. 이 부분을 클릭하면 입력해왔던 코딩을 바로바로 확인하실 수 있게 됩니다. 문서작업에 반드시 도움이 되니 필수로 설치해 주세요~
