HTML 구조는 어떻게 되있을까? | CSS와 Javascript는 뭐지?
SEO를 위해선 반드시 알아야하는 HTML 구조 시멘틱한 구조란 HTML 구조가 얼마나 크롤링 봇에게 잘 읽힐 수 있도록 작성되었는지를 말합니다.
목차
HTML의 역사
HTML(하이퍼텍스트 마크업 언어((Hypertext Mark-up Language)))은 웹 페이지의 구조와 콘텐츠를 정의하기 위해 사용되는 표준 마크업 언어입니다. HTML은 웹의 핵심 기술 중 하나로, 웹 페이지를 구성하는 요소들을 태그를 이용하여 기술합니다. 이러한 태그들은 웹 브라우저에게 어떻게 표시되어야 하는지 알려줍니다.
HTML의 역사는 월드 와이드 웹의 탄생과 함께 시작되었습니다. 팀 버너스리(Tim Berners-Lee)가 1990년대 초반에 웹을 개발하면서 HTML이 처음 등장했습니다. 초기의 HTML은 단순한 마크업 기능만을 제공했으며, 텍스트의 구조를 표현하기 위한 목적으로 사용되었습니다.
HTML의 초기 버전은 주로 웹 페이지의 제목, 문단, 목록 등과 같은 기본적인 구조를 정의하는 태그로 이루어져 있었습니다. 그러나 이후 웹의 발전과 함께 HTML은 점차 발전하고 복잡해지면서 다양한 기능과 요소가 추가되었습니다.
HTML 2.0은 1995년에 발표되었으며, 표와 폼(form) 요소 등이 도입되었습니다. 이후 1997년에는 HTML 3.2가 발표되었는데, 이 버전에서는 표와 폼 요소가 향상되었고, 프레임(frame) 요소와 스타일 시트(stylesheet) 등이 추가되었습니다.
1999년에는 HTML 4.01이 발표되었습니다. 이 버전에서는 웹 페이지의 구조와 디자인을 분리하기 위해 CSS(Cascading Style Sheets)가 도입되었으며, 스크립트 언어인 자바스크립트(JavaScript)와의 통합도 개선되었습니다.
이후 웹의 발전과 함께 웹 애플리케이션의 중요성이 증가하면서, 웹 페이지의 동적인 기능을 위한 요소들이 필요해졌습니다. 이에 따라 웹 표준화 단체인 W3C(World Wide Web Consortium)에서 XML과 함께 동적 웹 페이지를 구성하기 위한 XHTML(eXtensible HTML)을 개발하게 되었습니다.
XHTML은 XML 기반의 HTML로, XML의 엄격한 문법 규칙을 따라야 했습니다. XHTML 1.0은 2000년에 발표되었으며, 이후 2002년에는 1.0 이후, W3C는 웹 표준화 작업을 계속 진행하였고, 2008년에는 HTML5가 초안으로 발표되었습니다. HTML5는 기존의 HTML 버전과는 많은 차이점을 가지고 있었으며, 웹 애플리케이션 개발에 필요한 다양한 기능과 API를 제공했습니다.
HTML의 구조
HTML 문서는 <!DOCTYPE html> 태그로 시작하고 </html> 태그로 끝납니다. <!DOCTYPE html> 태그는 HTML 문서가 어떤 버전을 사용하고 있는지 브라우저에게 알려줍니다. HTML 문서는 <head> 태그와 <body> 태그로 이루어져 있습니다. <head> 태그는 HTML 문서에 대한 정보를 담고 있으며, <body> 태그는 HTML 문서에 표시될 콘텐츠를 담고 있습니다.
<head> 태그에는 다음과 같은 태그가 포함될 수 있습니다.
<title> 태그: HTML 문서의 제목을 나타냅니다.
<meta> 태그: HTML 문서에 대한 정보를 나타냅니다.
<link> 태그: HTML 문서에 연결된 다른 문서를 나타냅니다.
<script> 태그: HTML 문서에 자바스크립트를 포함합니다.
<body> 태그에는 다음과 같은 태그가 포함될 수 있습니다.
<h1> ~ <h6> 태그: HTML 문서의 제목을 나타냅니다.
<p> 태그: HTML 문서의 단락을 나타냅니다.
<img> 태그: HTML 문서에 이미지를 포함합니다.
<table> 태그: HTML 문서에 표를 포함합니다.
<form> 태그: HTML 문서에 양식을 포함합니다.
HTML 문서는 태그를 사용하여 웹페이지를 정의합니다. 태그는 여는 태그와 닫는 태그로 이루어져 있습니다. 여는 태그는 태그의 이름으로 시작하고, 닫는 태그는 태그의 이름에 "/"를 추가하여 시작합니다. 예를 들어, <p> 태그의 여는 태그는 <p>이고, 닫는 태그는 </p>입니다.
HTML 문서는 태그를 사용하여 웹페이지의 구조를 정의할 수 있습니다. 또한, 태그를 사용하여 웹페이지의 스타일을 지정할 수 있습니다. 웹페이지의 스타일은 CSS를 사용하여 지정할 수 있습니다.
HTML 구성 요소
HTML 구성요소는 매우 중요하기 때문에 다양한 곳에서 찾아 볼 수 있습니다.
- Mozilla Developer Network(MDN): https://developer.mozilla.org/en-US/docs/Web/HTML
- W3Schools: https://www.w3schools.com/html/
- Codecademy: https://www.codecademy.com/learn/learn-html
- Khan Academy: https://www.khanacademy.org/computing/computer-programming/html-css
HTML은 다양한 요소(element)들로 구성되어 웹 페이지의 구조와 콘텐츠를 정의합니다. 각 요소는 태그(tag)로 표현되며, 시작 태그와 종료 태그로 이루어집니다. 시작 태그는 <태그이름> 형식이고, 종료 태그는 </태그이름> 형식입니다. 몇 가지 중요한 HTML 요소들을 소개해드리겠습니다:
<html>: HTML 문서의 루트 요소로, 모든 HTML 요소를 포함하는 컨테이너 역할을 합니다.
<head>: 웹 페이지의 메타데이터를 정의하는 요소로, 페이지 제목(title), 스타일 시트(style sheet), 스크립트(script) 등을 포함합니다.
<body>: 웹 페이지의 실제 콘텐츠를 정의하는 요소로, 텍스트, 이미지, 링크 등이 포함됩니다.
<h1> to <h6>: 제목을 표현하는 요소로, <h1>이 가장 큰 제목을 나타내고 <h6>이 가장 작은 제목을 나타냅니다.
<p>: 문단을 표현하는 요소로, 텍스트를 단락으로 구분할 때 사용됩니다.
<a>: 링크를 생성하는 요소로, href 속성을 사용하여 다른 웹 페이지나 문서로 연결할 수 있습니다.
<img>: 이미지를 삽입하는 요소로, src 속성을 사용하여 이미지 파일의 경로를 지정합니다.
<ul>과 <li>: 순서 없는 목록을 생성하는 요소로, <ul>은 목록을 감싸고, <li>는 각 목록 항목을 나타냅니다.
<table>, <tr>, <td>: 표를 생성하는 요소로, <table>은 표 전체를 감싸고, <tr>은 표의 행을, <td>는 표의 셀을 나타냅니다.
<form>: 사용자 입력을 위한 폼을 생성하는 요소로, 입력 필드(input field), 버튼(button), 체크박스(checkbox) 등을 포함할 수 있습니다.
CSS
CSS는 캐스케이딩 스타일 시트(Cascading Style Sheets)의 약자로, 웹 페이지의 디자인과 스타일을 정의하는 스타일링 언어입니다. 간단하게 이야기하면, 반복해서 특정 스타일(style)을 가지는 구조에 대해 미리 구조를 작성해두고 한번에 적용하는 것입니다.
HTML이 웹 페이지의 구조를 담당한다면, CSS는 웹 페이지의 시각적인 표현을 담당합니다. CSS를 사용하여 웹 페이지의 레이아웃, 색상, 폰트, 간격 등을 설정할 수 있으며, 여러 요소들에 일관된 스타일을 적용할 수 있습니다. CSS는 HTML 문서에 <style> 태그 내에 포함되거나 외부 CSS 파일을 통해 적용될 수 있습니다. 웹 브라우저는 HTML과 CSS를 함께 해석하여 웹 페이지를 시각적으로 표현합니다.
HTML과 CSS는 서로 다른 역할을 가지지만, 함께 사용함으로써 웹 페이지의 구조와 디자인을 분리하여 관리할 수 있습니다. HTML은 웹 페이지의 구조와 콘텐츠를 정의하고, CSS는 해당 구조와 콘텐츠의 디자인과 스타일을 적용합니다. 이렇게 분리된 구조와 스타일은 유지 보수와 재사용성을 향상시키며, 웹 페이지의 디자인을 일관성 있게 유지할 수 있습니다.
Javascript
자바스크립트는 HTML과 CSS와 함께 웹 페이지를 만드는 데 사용되는 3가지 주요 기술 중 하나입니다. 자바스크립트는 웹 페이지에 동적인 기능을 추가하는 데 사용됩니다. 예를 들어, 자바스크립트를 사용하여 웹 페이지를 스크롤하거나, 웹 페이지의 요소를 이동하거나, 웹 페이지와 상호 작용하는 사용자에게 응답을 표시할 수 있습니다.
자바스크립트는 HTML 태그 내부에 이벤트 속성으로 삽입하거나, <script> 태그 내부에 작성하거나, 외부 자바스크립트 파일을 사용하여 삽입할 수 있습니다.
HTML 태그 내부에 이벤트 속성으로 자바스크립트를 삽입하는 예는 다음과 같습니다.
HTML
<button onclick="alert('Hello, world!')">Click me!</button>
코드를 사용할 때는 주의하시기 바랍니다. 자세히 알아보기
이 코드는 "Click me!" 버튼을 클릭하면 "Hello, world!"라는 알림이 표시됩니다.
<script> 태그 내부에 자바스크립트를 작성하는 예는 다음과 같습니다.
HTML
<script>
function myFunction() {
alert('Hello, world!');
}
</script>
코드를 사용할 때는 주의하시기 바랍니다. 자세히 알아보기
이 코드는 "myFunction"이라는 함수를 정의합니다. 이 함수는 호출되면 "Hello, world!"라는 알림을 표시합니다.
외부 자바스크립트 파일을 사용하여 자바스크립트를 삽입하는 예는 다음과 같습니다.
HTML
<script src="myscript.js"></script>
코드를 사용할 때는 주의하시기 바랍니다. 자세히 알아보기
이 코드는 "myscript.js"라는 파일에서 자바스크립트를 로드합니다.
자바스크립트는 웹 페이지에 동적인 기능을 추가하는 데 매우 강력한 도구입니다. 자바스크립트를 사용하여 웹 페이지를 보다 사용자 친화적이고 매력적으로 만들 수 있습니다.
'IT > HyperText Markup Language' 카테고리의 다른 글
| HTML 공부 2. 필요한 도구 구비 및 개념 정리 (0) | 2021.06.17 |
|---|---|
| HTML 공부 1. 현재 내가 알고 있는 웹 문서란? (0) | 2021.06.17 |
댓글