● 기본구조
웹 문서의 기분구조는 대략 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<title>기본문서</title>
</head>
<body>
</body>
</html>저는 기본 에디터로 서브라임텍스트를 사용합니다. 서브라임텍스트에서 html문서를 저장하고 <html 까지만 입력한뒤 '탭(Tab)'키를 누르면 위와 같은 형태를 기본으로 만들어 줍니다.
제일 상단에 <!DOCTYPE html>은 해당 웹페이지(또는 웹문서)가 HTML5로 작성되었음을 의미합니다. 이는 W3C의 명세에 따른 것입니다.
두번째 <html>은 html 이 시작되는 부분으로서 반드시 웹문서의 모든 요소(주석등 일부 요소 제외)는 <html>과 </html>안에서만 존재해야 합니다. 다른 말로 하면 웹문서는 <html>로 시작해 </html>로 끝납니다.
<html>에는 lang속성을 사용할 수 있습니다. lang에는 국가를 나타내는 값을 넣을 수 있는데 웹문서 자체로는 어떠한 영향도 끼치지 않지만 검색엔진에 웹문서를 인식할때 어떤 언어로 작성된 웹문서인지를 인식하게 합니다. 홈페이지 자체를 여러언어를 통해서 국제적으로 만들게 아니면 사실상 굳이 필요하지 않는 속성입니다.
세번째 <head>는 문서의 정보등을 담아두는 부분입니다. 위 예제에서는 <title>태그를 통해 문서의 제목을 설정하였는데 이 밖에도 meta, base, style, link, script등의 태그가 올 수 있습니다. 간단히 설명하자면 meta는 웹문서의 여러가지 상세한 정보를 담는 태그이며 base는 기본경로를, style은 웹문서에 보기좋게 스타일을 지정하는 태그입니다. link와 script는 필요에 따라 다른 파일을 해당 웹문서에 삽입하는 역활을 합니다.
아래는 다음 메인페이지에 설정된 내용중 일부입니다.
<!DOCTYPE html>
<html lang="ko" class="os_window">
<head>
<meta charset="utf-8"/>
<title>Daum</title>
<meta property="og:url" content="https://www.daum.net/">
<meta property="og:type" content="website">
<meta property="og:title" content="Daum">
<meta property="og:image" content="//i1.daumcdn.net/svc/image/U03/common_icon/5587C4E4012FCD0001">
<meta property="og:description" content="나의 관심 콘텐츠를 가장 즐겁게 볼 수 있는 Daum">
<meta name="msapplication-task" content="name=Daum;action-uri=https://www.daum.net/;icon-uri=/favicon.ico">
<meta name="msapplication-task" content="name=미디어다음;action-uri=http://media.daum.net/;icon-uri=/media_favicon.ico">
<meta name="msapplication-task" content="name=메일;action-uri=http://mail.daum.net;icon-uri=/mail_favicon.ico">
<meta name="referrer" content="origin">
<link rel="search" type="application/opensearchdescription+xml" href="//search.daum.net/OpenSearch.xml" title="다음"><body>는 문서는 본체를 의미합니다. 사용자에게 보여지는 대부분의 요소가 <body>안에 존재합니다.
각 태그의 좀더 상세한 내용은 추후에 다룰 예정이니 간단하게만 알고 넘어가시면 됩니다. 또한 위 기본구조를 설명하면서 여러가지 용어를 사용했는데, 각 용어는 다음의 의미를 갖습니다. 아래 내용을 참고해 주세요.
● 태그 (Tag)
HTML의 코드자체를 의미합니다.
<div>
<p>abcdefghijk</p>
</div>위 예제에서 <div>나 <p>가 태그에 해당하며 <div>가 시작태그 '/'문자가 있는 </p> 태그가 끝태그에 해당합니다. 물론 시작태그과 끝태그의 구분이 따로 없는 태그도 존재합니다.
● 요소 (Element)
HTML문서상에 존재하는 각각의 개체를 의미합니다. <div>나 <p>도 하나의 요소가 될 수 있고 단순 문자열인 abcdefghijk 같은 것들도 요소로서 구분될 수 있습니다.
● 속성 (Property)
각각의 태그는 저마다 고유의 속성을 가질 수 있습니다. 이를테면 <img>는 이미지를 보여주는 태그입니다. 이 태그에 어떤 이미지를 보여줄지는 src 속성을 통해서 설정할 수 있습니다.
<img src="/sample.jpg">● 주석
주석은 임의로 설명을 달아놓는 부분으로서 웹 브라우저가 웹페이지를 읽어 사용자에게 보여줄때 아무런 영향을 끼치지 않습니다.
주석은 <!-- 와 --> 사이에 넣습니다.
<!-- 이미지를 보여줍니다. -->
<img src="/sample.jpg">
'Web > HTML5 & CSS3' 카테고리의 다른 글
| [HTML5/CSS3] 테이블 (Table) (0) | 2019.09.20 |
|---|---|
| [HTML5&CSS3] 목록 관련 태그 (0) | 2019.09.19 |
| [HTML5&CSS3] 글자 관련 태그 (2) | 2019.09.10 |
| [HTML5/CSS3] HTML5의 활용 (0) | 2019.08.06 |
| [HTML5/CSS3] 인터넷과 웹 그리고 웹 브라우저 (0) | 2019.07.30 |