여기서는 웹 페이지가 어떻게 구성되고 작동하는지 이해하는 데 필요한 정도만 다룬다.
HTML을 배우고 익히려면 서적들도 많이 나와 있고, 이와 관련한 정보는 인터넷상에 아주 많이 있으므로 크게 어려움 없을 것이다.
본 포스팅은 다음의 내용을 포함하고 있다.
HTML 페이지 구조
HTML은 브라우저에게 웹 페이지를 구성하는 방법을 알려주는 언어이다.
그리고, 아래 포스팅에서 간단한 HTML을 메모장에 작성해 브라우저로 열어 확인해 봤다.
HTML 이란? (프런트엔드 개발 로드맵, HTML 정의 등)
본 포스팅은 다음의 내용을 포함하고 있다. Front-end (프런트엔드) 개발 로드맵 HTML 이란? HTML 작성 방법개발자라고 하면 직무별로 다양한 영역으로 나눌 수 있다. 그중에서 웹 개발에 대한 이야기
wishlan.tistory.com
그 HTML과 결과는 다음과 같다.
위 예제에 사용된 HTML을 주석을 달아 라인별 의미하는 바를 설명하면 다음과 같다.
참고로, HTML에서 주석을 표시하는 방법은 <!-- 시작해서 주석을 입력하고 -->로 닫으면 된다.
<!DOCTYPE html> <!-- 문서 타입을 선언하는 것으로, 이 문서가 HTML5 문서임을 정의한다. -->
<html> <!-- HTML 페이지의 Root(루트) 요소 -->
<head> <!-- HTML 페이지의 메타(Meta) 정보를 담는다 -->
<title>Page Title</title> <!-- HTML 페이지의 제목으로 브라우저의 제목 표시줄 또는 페이지 탭에 표시된다.-->
</head> <!-- 메타 정보의 끝을 표시 -->
<body> <!-- 문서 본문의 시작을 알린다. -->
<h1>This is a Heading</h1> <!-- h1 요소는 큰 제목을 의미 -->
<p>This is a paragraph.</p> <!-- p 요소는 단락을 의미 -->
</body> <!-- 문서 본문의 끝을 표시 -->
</html> <!-- HTML 페이지의 끝을 표시 -->
위와 같은 HTML의 웹 페이지를 구조적으로 시각화하면 다음과 같다.
위 그림의 오른쪽 HTML 구조를 보면 흰색 부분(body) 이 브라우저의 콘텐츠 영역에 표시되는 것을 알 수 있다.
만약, <html></html>, <head></head>, <body></body> 요소가 없다면?
아래와 같이 작성하면 브라우저는 제대로 표시하지 못할까?
<title>Page Title</title>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
결론은 아니다.
위와 같이 작성한다고 해도 브라우저는 아래와 같은 구조로 잘 알아듣고 콘텐츠를 표시해 준다.
HTML 요소(Element)
앞서 HTML 구조를 살펴봤는데,
HTML은 요소(Elements)로 이뤄져 있다.
html, head, title, body, p 등을 태그명(Tag name)이라고 한다.
HTML 요소는 태그명으로 시작해서 태그명으로 끝난다. 다르게 표현하면 태그로 열어서 태그로 닫는다.
그래서 시작하는 태그를 Start Tag 혹은 Open Tag라고 부르고 종료 태그를 End Tag 혹은 Close Tag라고 부른다.
HTML 요소(Element, 엘리먼트)를 시각화해서 보면 다음과 같다고 할 수 있다.
HTML 태그(Tag)는 대소문자를 구분하지 않는다.
가령, <title>과 <TITLE>은 같다. 브라우저는 동일하게 인식한다.
W3C는 HTML에서 소문자를 권장하고 있다.
HTML 속성(Attribute)
HTML 속성은 HTML 요소(Element)에 대해 추가적인 정보를 포함할 때 사용하고 다음과 같이 정의된다.
- 모든 HTML 요소는 속성(attribute)을 가질 수 있다.
- 속성은 요소(Element)에 해 추가 정보를 제공한다.
- 속성은 항상 시작 태그에 지정한다.
- 속성은 일반적으로 name="value"와 같은 이름/값 쌍으로 지정한다.
가령, HTML 요소의 콘텐츠의 색상을 빨간색으로 하고 싶다면 스타일(style) 속성을 사용하면 된다.
<p style="color:red;">이것은 단락을 표시합니다.</p>
style="color:red;"라는 속성을 시작 태그 <p>에 포함되었다.
앞서 사용한 HTML을 수정해 브라우저로 열어 확인해 보면 아래와 같이 빨간색으로 표시되는 것을 알 수 있다.
HTML의 기본 구조에 대해 알아봤는데, 우리말을 배운다고 하면 우리말은 주어와 서술어 순으로 말한다 정도 익혔다고 보면 된다.
HTML도 '언어'이기 때문에 이제 이 언어는 어떤 단어들(=태그명)이 있고, 그 단어들(=태그명)이 무엇을 의미하고 어떤 문법으로 사용되는지 익히면 된다.
- 다음에 -
상기 상품 배너는 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
'코딩해보니 > 웹(Web)개발' 카테고리의 다른 글
| HTML 이란? (프런트엔드 개발 로드맵, HTML 정의 등) (0) | 2024.11.26 |
|---|---|
| 호스팅(Hosting) 이란? (웹 호스팅, 서버 호스팅 등) (0) | 2024.11.25 |
| URI vs URL vs URN: 개념과 차이점 정리 (3) | 2024.11.24 |
| 도메인 네임과 DNS (Domain Name & Domain Name System) (1) | 2024.11.23 |
| 인터넷과 웹의 동작 방식 (인터넷은 어떻게 구성되고 웹은 어떻게 동작하는가?) (1) | 2024.11.22 |
댓글