웹의 3가지 요소
- 내용을 담당하는 HTML ◀
- 외형을 담당하는 CSS
- 동작을 담당하는 JavaScript
HTML이란?
HTML(Hyper Text Markup Language)은 우리가 보는 웹페이지가 어떻게 구조화되어 있는지 브라우저로 하여금 알 수 있도록 하는 마크업 언어이다.
- 마크업 언어 : 태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어의 한 가지이다.
- html은 웹의 확장자명이라고 이해하자. (워드의 확장자명.doc , 아래한글의 확장자명.hwp처럼)
- 하이퍼텍스트(Hyper Text)는 본문 중 클릭했을 때, 페이지가 이동하는 링크이다. (웹 페이지는 하이퍼텍스트로 서로 연결된다.)
HTML의 중요성
- html은 웹페이지의 '정보'를 나타내는 수단으로써 사용된다.
- 검색엔진은 전 세계의 웹페이지를 분석한다. 따라서 오늘날의 정보의 세계에서 의미에 맞는 태그로 웹페이지를 만든다는 것은 비즈니스 측면에서도 아주 중요한 일이다. 검색엔진에 의해 노출되지 않는다는 것은 실질적으로 존재하지 않는 정보과 같기 때문이다.
- 웹은 모든 운영체제에서 동작하고, 웹페이지의 소스코드는 누구나 볼 수 있고, 웹은 저작권이 없는 순수한 공공재이다. 즉, 접근성(accessibility)이 뛰어나다.
HTML의 기본문법
- 시작 태그(start tag): 이것은 요소의 이름과(이 경우 p), 열고 닫는 꺽쇠 괄호로 구성된다. 요소가 시작(이 경우 단락의 시작 부분)부터 효과가 적용되기 시작한다.
- 종료 태그(end tag): 이것은 요소의 이름 앞에 슬래시(/)가 있는것을 제외하면 시작 태그(start tag)와 같다.이것은 요소의 끝(이 경우 단락의 끝 부분)에 위치한다. 닫는 태그를 적어주지 않는 것은 흔한 초심자의 오류이며, 이것은 이상한 결과를 초래할 수 있다.
- 내용(Content): 요소의 내용이며, 이 경우 단순한 텍스트이다.
- 요소(Element): 여는 태그, 닫는 태그, 내용을 통틀어 요소(element)라고한다.
요소의 중첩(Nested Element)
-
요소는 중첩될 수 있다.
다음의 HTML 문서는 중첩된 4개의 HTML 요소들로 구성된다,
-
위의 코드에서
<html>요소는<body>요소를 포함하고,<body>요소는 두개의 다른 HTML요소<h1><p>를 포함한다.
<html>요소는 전체 HTML문서를 정의한다.
<body>요소는 HTML문서의 본문을 정의한다.
<h1>요소는 제목(heading)을 정의한다. 요소의 내용은 "My First Heading"이다.
<p>요소는 HTML문서의 단락(paragraph)를 정의한다. 요소의 내용은 "My First Paragraph"이다.
빈 요소(Empty Element)
-
내용(contents)이 없는 HTML요소는 빈 요소라고 하며, 속성(attribute)만을 가진다. HTML5는 빈 요소가 닫혀질 것을 요구하지는 않는다.
-
<br>(줄바꿈)은 종료 태그가 없는 빈 요소이며, 대표적인 빈 요소는 다음과 같은 것들이 있다.<br>
<hr>
<img>
<input>
<link>
<meta>
<src>
속성(Attribute)
-
속성이란 요소의 성질, 특징을 정의하는 것이다.
-
속성은 추가적인 정보(이미지 파일의 경로나 크기 등)를 제공한다.
-
속성은 시작 태그에 위치해야 하며 이름과 값의 쌍을 이룬다,
- ex)
<img src="html.jpg" width="104" height="142">
위의 예에서 속성src는 이미지 파일의 경로와 파일명,width는 이미지의 너비,height는 이미지의 높이 정보를 브라우저에 알려주며, 이 정보들을 사용하여 브라우저는 img요소를 화면에 출력한다.
reference : https://developer.mozilla.org/ko/ https://poiemaweb.com/ https://ko.wikipedia.org/wiki/HTML
기억보단 기록을 ✨