HTML(Hypertext Markup Language)은
웹 페이지의 구조를 나타내기 위한 마크업 언어입니다.
웹 페이지의 전체적인 골격을 형성하고, CSS에 의해서 스타일링되거나 JS에 의해서 조작될 수 있는 요소들을 만든 다음, 그 안에 컨텐츠를 채워넣기 위해 사용됩니다.
기본적인 형태는
다음과 같습니다.
최상단에서 <!DOCTYPE> 으로 이 html 문서의 타입을 정의합니다(DTD).
과거에는 이렇게 길고 복잡한 형태를 가지고 있었지만,
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">html5 이후로는 아래와 같이 간소화되었습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>제목</title>
</head>
<body>
내용
</body>
</html>html문서의 전체 내용은 <html> 태그가 감싸게 됩니다. html 태그에서 적용한 속성은 문서 전체에 적용되기 때문에 보통 lang 속성을 통해서 사용할 언어(한국-ko, 영어-en)를 지정해줍니다.
그 하위에 <head>와 <body>가 위치합니다.
<head>에는 메타 정보를 담게 되는 <meta>, 제목에 해당하는 <title>, 스타일 정보를 나타내는 <style>, CSS파일이나 JS라이브러리 등의 외부 리소스를 포함하기 위한 <link>, <script> 등이 들어갑니다.
<body>에는 실제 웹 페이지에 표시할 내용이 들어갑니다.
메모장에 위 코드를 넣고 저장한 다음, 파일의 확장자를 .html로 변경하면 자신이 사용하는 웹브라우저를 통해 작성한 페이지를 확인할 수 있습니다.
하지만 보통은 vscode 같은 IDE(통합 개발 환경)을 사용해 html 문서를 작성, 편집합니다.
요소란
요소의 구성을 살펴보면 다음과 같습니다.
<p id="tag-id" attribute="value">content</p>부등호 < > 가 하나의 태그(tag)를 나타냅니다. HTML에서는 모든 요소를 태그로 표현합니다. 참고로 위에서 사용한 <p> 는 단락(paragraph)를 의미하며 줄바꿈을 해주는 태그입니다.
<> 이 기호의 이름을 잘 모르시는 분들이 많을텐데, 한글로는 '홑화살괄호', 영어로는 'Angle Bracket' 이라고 하고 읽을 때는 왼쪽을 기준으로 a < b는 a가 b보다 작다 (less than) / >는 크다 (greater than) 라고 합니다. 그래서 엔티티가 < > 인 것이지요!
요소를 시작하는 태그를 Opening tag라고 하고 <p>
끝에서 요소의 마지막을 나타내는 태그를 Closing tag라고 합니다. </p>
태그의 종류에 따라서 닫는 것이 필요한 것도 있고 없는 것도 있습니다. 예를 들어 <input>의 경우 닫는 태그가 필요없는 태그입니다. 그런데 다른 사람의 코드를 읽다 보면 <input ... /> 이런 식으로 닫아주는 사람이 있더라구요. XML이나 XHTML의 경우 HTML과 달리 닫는 태그가 필수인데 이런 것과 관련되어 전해져 내려오는 관습 같은게 아닐까 추측됩니다.
이 태그 사이에 단순한 텍스트로 이루어진 컨텐츠가 들어갑니다.
이것을 통틀어서 '요소' 라고 하고 하나의 요소는 id나 클래스에 의해 특정되는 html의 기본 단위가 됩니다.
요소는 id, class, type 같은 속성(attribute)을 가질 수 있습니다.
<p id="tag-id" attribute="value" 다른속성="anothervalue">content</p>속성은 모든 요소에 공통적으로 적용되는 전역 속성과, 특정한 태그에만 적용되는 속성, 그리고 사용자 정의 속성이 있습니다.
attribute="value" 라는 속성은 기본적으로 제공되는 속성은 아니지만,
위와 같이 입력해주면 사용자 정의 속성으로서 'attribute' 속성이 생성되고 'value'라는 값을 가지며, '다른속성'은 'anothervalue' 라는 값을 가지게 되므로 요소에 필요한 값을 담아줄 때 유용하게 활용할 수 있습니다.
'Front-end' 카테고리의 다른 글
| HTML&CSS 작성 치트키, Emmet 에밋 사용법 (0) | 2023.03.21 |
|---|---|
| 타입스크립트와 자바스크립트의 차이 (0) | 2023.03.13 |
| submit 버튼 쓰지 않고 submit하기 (0) | 2023.01.12 |
| CSS / 애니메이션과 트랜지션 animation & transition (0) | 2022.05.23 |
| SASS (0) | 2021.05.13 |
댓글