최상위 요소는 html이다. 이 요소는 문서의 root 요소라고도 한다. 문서내의 모든 요소는 html요소 안에 있어야 한다. html은 속성이 없다.
html요소는 head와 body요소 2가지를 포함 하고 있다.
- head 요소 : 대부분의 메타 정보(문서제목, 외부 스크립트와 스타일 시트파일의 링크..)만 갖고 있다. 메타정보는 브라우저만 사용하는 정보이며 일반사용자에게는 보이지 않는다.
- body 요소 : 문서의 내용을 담는다.
<html>
<head>
<title></title>
</head>
<body>
<h1></h1>
<p>
<img>
<a></a>
</p>
</body>
</html>head 요소
title : 웹페이지의 타일틀과 부연설명을 사용자 브라우저 타이틀 바에 출력한다.
meta : 문서의 필수요소는 아니지만 페이지에 대한 추가 정보를 제공할 때 사용한다. meta는 비어있는 요소로써 두 개의 속성을 갖는다. name 속성은 데이터 타입을 지정하며, content 속성은 데이터 값을 담고 있다.
<meta name = "author" value="Jane Austen"/>
script : 외부요소를 불러올때 사용한다.
자바스크립트를 문서내에 내장 :
<script type = "text/javascript">
window.alert('hello world')
</script>
외부 자바스크립트를 참조 :
<script type = "text/javascript" src="scripts/effects.js">
</script>
문서내에 스크립트를 내장하거나 외부링크로 참조하는 두가지 방법을 사용 할 수 있다. 하지만 하나의 스크립트 요소 안에 둘 다 사용할 수는 없다. src속성이 있는 script 요소에 내장 스크립트가 있다면 브라우저는 무조건 내장스크립트를 무시한다.
style : head요소 안에서 사용 할 수 있으며, CSS코드를 내장하고자 할 때 사용한다. 외부 CSS파일을 참조해서 활용 하려면 head요소에서 link요소를 사용 해야 한다.
link : 외부의 CSS파일을 참조할 때 사용한다. link를 사용하여 다른 문서간의 관계 정보를 전달 할 수도 있지만 정보전달 목적으로는 자주 사용 되지 않는다.
body요소
표제(heading) : html은 6단계 표제를 제공하며 h1부터 h6으로 표현된다.
<h1>오만과 편견</h1>
<h2>1권</h2>
<h3>1장</h3>..
단락(paragraph) : 유사한 주제를 갖는 문자열의 묶음이다. p 요소는 단락이라는 의미를 부여할 때 사용된다. 단락은 내용을 담는 그릇이지 빈 여백을 처리하는 용도 아니므로 초보 개발자가 자주 실수하는 사용방법이다.
줄바꿈 : 문자열 길이를 특별히 고려해야 할 경우 br요소를 사용한다.
<p> 사느냐 죽느냐, 이것이 문제로다.<br/>
가혹한 운명의 화살이 꽂힌 고통을<br/>
... 죽는 건 그저 잠드는 것일 뿐.</p>
포멧이 정해진 문자열 : pre안에 있는 문자열은 html파일에 작성된 단락 모습 그대로 출력된다.
div : 콘텐트나 특정 요소들을 묶을 수 있고 div 간에 계층 구조를 부여할 수 있다. 예를들어 오만과 편견 전체를 하나의 div요소로 묶고, 하위 계층을 div 요소로 volume을 묶고 또한 그 하위 계층으로 chapter를 div 요소로 묶는 식의 기법을 사용할 수 있다.
<div>
<p> 사느냐 죽느냐, 이것이 문제로다.<br/>
<div>
가혹한 운명의 화살이 꽂힌 고통을<br/>
... 죽는 건 그저 잠드는 것일 뿐.</p>
</div>
</div>
근래 웹 개발에서 div요소를 사용하는 것은 매우 일반 적이고, div 요소를 사용하면 가독성을 크게 향상 시킬 수 있다. 각각의 div요소를 공백 또는 줄 바꿈으로 분리하면 전체 문서구조를 파악하는데 도움이 된다.
'IT > Programming' 카테고리의 다른 글
| HTML - Image, Link (0) | 2023.04.18 |
|---|---|
| HTML - TAG연습 (0) | 2023.04.18 |
| HTML 개념 (0) | 2023.04.18 |
| <Nattable> FreezableGridExample (0) | 2023.04.17 |
| 백준 알고리즘 - 1543번 문서검색 (0) | 2023.04.17 |
