[ JavaScript ] 하이퍼텍스트, HTML

람연 2021. 7. 18. 15:06

웹 페이지는 HTML, CSS, JS를 통해 구성되어있다. 웹 페이지란 무엇이며, 그것을 구성하고있는 HTML에 대해 정리한다.

하이퍼텍스트(Hypertext)

우리가 사용하는 웹은 하이퍼텍스트(Hypertext) 구조로 구성되어있다. 여기서 하이퍼텍스트란 기존의 직선구조의 글과 달리, 다각적으로 정보에 접근할 수 있는 체계를 말한다. 하이퍼텍스트에는 하이퍼링크(Hyperlink)라는 중요한 개념이 포함 되는데, 이는 단편적인 정보들을 엮어 사용자가 필요한 정보에 접근할 수 있는 기술이다. 이러한 하이퍼텍스트의 특성으로 인해 사용자는 불필요한 정보를 필터링 할 수 있으며 필요한 정보에 빠르게 접근할 수 있다.

위는 하이퍼텍스트의 구조를 그림으로 표현한 것이다. 각각이 하나의 웹 페이지이며 하이퍼링크를 통해 타 문서에 접근이 가능하다. 이와 같은 구조를 갖는 웹 페이지를 모아놓은 개념이 바로 웹 사이트가 되는것이다.

HTML

HTML(Hyper Text Markup Language)은 하이퍼텍스트를 표현하기 위한 마크업 언어이다. 하이퍼텍스트 체계에 기반하여 하이퍼링크 기능을 포함하고 있으며, 실제 웹 페이지의 뼈대를 구성하는 언어이다. HTML작성에는 웹 페이지를 구성하는 여러가지 엘리먼트를 사용할 수 있다. 엘리먼트란 웹 페이지를 구성하는 요소들을 말한다.

엘리먼트(Element) : 웹 페이지를 구성하는 요소들을 말한다.
애트리뷰트(Attribute) : 각 엘리먼트가 갖는 속성을 말한다.
값(Value) : 애트리뷰트가 갖는 속성 값을 말한다.

이러한 엘리먼트는 Block-level Elements, Inline-level Elements로 나뉜다.

Block-level Elements

Block-level element는 웹 페이지에서 영역을 구분하기 위해 사용한다. 구분한 영역에 표현할 element를 갖을 수 있으며 아래 특성을 갖는다.

새 줄에서 시작
사용 가능한 전체 너비를 차지
위, 아래 여백 존재

<html>
<head>
	<title>HTML title</title>
	<meta name="Author" content="람연">
	<style>
	section,aside,article,div{ float:left; height:300px; padding:10px; }
	section{ width:200px; background:#EEF0EF; }
	aside{ width:150px; }
	div{ width:200px; background:#898989; }
	article{ width:200px; background:#EEF0EF; }	
	footer{ clear:both; }
	</style>
</head>
<body>
	<header>
		<h1>header 영역</h1>
	</header>
	<nav>
		<a href="https://poizon.tistory.com/">nav 영역</a>
	</nav>
	<section>
		<h1>section 영역</h1>
		<p>section 본문</p>		
	</section>
	<aside><p>section aside 영역<p></aside>
	<div>
		<h1>div 영역</h1>
		<p>div 본문</p>		
	</div>
	<aside><p>div aside 영역<p></aside>
	<article>
		<h1>article 영역</h1>
		<p>article 본문</p>
	</article>
	<aside><p>article aside 영역<p></aside>
	<footer>
		<smail>footer 영역<smail>
	</footer>
</body>
</html>

위는 엘리먼트 영역을 나누는 예제 코드로, 엘리먼트를 적절하게 사용해 영역을 나누어 개발하면 된다.

Inline-level Elements

Inline-level element는 웹 페이지에서 정보를 전달하기 위해 사용한다. 보다 효율적인 정보 전달을 위해 여러 엘리먼트를 사용할 수 있으며, 아래 특성을 갖는다.

새 줄에서 시작하지 않음
필요한 만큼만 너비를 차지

아래는 HTML5 엘리먼트에 대해 정의한 공식 문서인데, 개발할 때 참고하면 많은 도움이 된다.

https://developer.mozilla.org/ko/docs/Web/HTML/Element

HTML 요소 참고서 - HTML: Hypertext Markup Language | MDN

이 페이지는 태그를 사용해 만들 수 있는 모든 HTML 요소의 목록을 제공합니다.

developer.mozilla.org

HTML 구조

HTML작성 시 앞서 정리한 것 처럼 여러가지 엘리먼트를 사용할 수 있다. 이때 엘리먼트의 성격에 따라 head와 body엘리먼트에 나누어 정의한다.

head

head영역은 웹 페이지에 표현되지 않는 영역으로 웹 페이지에 대한 정보를 정의한다. 웹 페이지 설명, 작성자, 타이틀, 스타일 정보 등등이 포함되며 meta, title, style엘리먼트 등을 이용해 정의한다.

<html>
<head>
	<title>HTML title</title>
	<meta name="Author" content="람연">
</head>
<body>
</body>
</html>

위 코드에서 title엘리먼트를 통해 설정한 'HTML title' 문구가 적용된 것을 확인할 수 있다. 하지만 그 외에 meta, style엘리먼트는 화면에 표시되지 않는다.

body

body영역은 실제 웹 페이지에 표현되는 정보를 갖는다. 글 제목, 본문, 버튼 등등이 포함되며 아래와 같이 정의해 사용한다.

<html>
<head>
	<title>HTML title</title>
	<meta name="Author" content="람연">
</head>
<body>
	<h1>&lt;button&gt;은 Inline-level element 이다</h1>
	<button>HTML</button>
</body>
</html>

head만 정의되어있던 웹 페이지에 body엘리먼트를 구성했다. body엘리먼트는 Block-level element이기 때문에, 웹 페이지에 영역을 구성되고 h1, button엘리먼트가 그 위에 되는것을 확인할 수 있다.

'JS' 카테고리의 다른 글

[ JavaScript ] CRP (Critical Rendering Path) (0)	2021.08.05
[ JavaScript ] CSS (Cascading Style Sheets), 선택자 (0)	2021.08.01
[ JavaScript ] BOM, window , DOM (0)	2021.06.18
[ JavaScript ] 웹 동작방식 (0)	2021.06.07
[ JavaScript ] 웹의 역사 (0)	2021.06.05

현재글[ JavaScript ] 하이퍼텍스트, HTML

상상코딩