HTML
웹 페이지를 생성하는데 사용되는 표준 마크업 언어입니다.
웹 페이지는 일반적으로 텍스트, 이미지, 비디오, 링크등 다양한 콘텐츠를 포함하며, HTML을 사용하여 이러한 콘텐츠를 구조화하고 표시할 수 있습니다.
HTML은 뼈대라고 할 수 있는 언어입니다. HTML로 뼈대 잡고, CSS를 이용해 옷을 입히고, JavaScript로 기능을 설정한다고 합니다.
HTML은 웹 브라우저에게 웹 페이지를 어떻게 표시해야 하는지를 알려주는 지침을 제공합니다. 즉,웹 페이지를 시멘틱하게 구조화하여 문단, 제목, 목록, 표 등과 같은 요소로 분할하고, 링크, 이미지, 비디오 등과 같은 다른 미디어 요소를 삽입하는 방법을 지정합니다.
HTML 문서는 일반적으로 '.html' 확장자를 가지며, 일반적으로 텍스트 편집기를 사용하여 작성 할 수 있습니다. 다른 웹 페이지로 연결할 수 있는 하이퍼링크, 이미지, 표, 양식 입력 요소 등을 포합할 수 있습니다.
웹 페이지의 내용을 표현하는 것 외에도 웹 페이지의 레이아웃과 스타일을 제어하는데 사용됩니다. 하지만 HTML 자체는 스타일을 위한 언어가 아니며, 레이아웃과 스타일을 구체화 하려면 CSS를 함께 사용해야 하고 웹 개발의 기초이며, 모든 웹 페이지의 구조와 내용을 정의하는 데에 중요한 역할을 합니다.
마크업
문서의 구조와 의미를 나타내기 위해 특정한 기호나 태그를 사용하여 표시하는 것을 의미합니다. 일반적으로 마크업은 문서를 기술하는데 사용되며, 문서의 내용을 구조화하고 의미를 부여하는데 도움이 됩니다.
마크업 언어는 일반적인 텍스트와 함께 사용되며, 텍스트에 특정한 마크업 태그를 적용하여 문서의 구조, 형식, 레이아웃, 그리고 의미를 정의합니다, 이러한 마크업 태그는 보통 "<태그명>"과 "</태그명>"과 같이 꺽쇠 괄호로 둘러싸여 있으며, 각각의 태그는 특정한 역할과 의미를 갖고 있습니다. HTML은 대표적인 마크업 언어로 HTML문서는 택스트로 작성되며 마크업 태그를 사용하여 웹 페이지의 구조와 콘텐츠를 정의합니다.
예를 들어 위 그림과 같이 <h1> 태그는 큰제목을 나타내고 <p> 는 단락바꾸기를 나타내며 <a>는 하이퍼 링크를 나타내는 등 다양한 마크업 태그들이 존재합니다.
마크업은 사람과 기계 모두가 읽을 수 있습니다. 사람은 마크업을 통해 문서의 구조와 의미를 파악하고 기계는 마크업을 해석하여 문서를 적절하게 표시하거나 색인화하는데 사용됩니다.
HTML의 요소
1. <html> - HTML 문서의 루트 요소를 정의합니다. 모든 HTML 요소는 이 태그 내부에 위치해야 합니다.
2. <head>- 웹 페이지의 메타데이터(문서 정보)를 정의하는데 사용됩니다. 예를 들어, 문서 제목, 문자 인코딩, 스타일시트 및 JavaScript 파일 등을 여기에 포함할 수 있습니다.
3. <title>-웹 페이지의 제목을 정의합니다. 웹 브라우저의 탭 또는 창 상단에 표시되는 제목입니다.
4. <body>-웹 페이지의 본문을 정의하는데 사용됩니다. 텍스트, 이미지, 링크, 목록 등이 이 태그 내부에 포함됩니다.
5. <h1>, <h2>, ..., <h6>- 제목 요소로 각각 다른 수준의 제목을 나타냅니다. `<h1>`이 가장 높은 수준의 제목이며, `<h6>`이 가장 낮은 수준의 제목입니다.
6. <p>-단락(Paragraph)을 정의합니다. 텍스트의 문단을 나타냅니다.
7. <a>- 하이퍼링크를 생성하는데 사용됩니다. 다른 웹 페이지로 이동하거나, 파일, 이메일 등에 접근할 수 있도록 합니다.
8. <img>- 이미지를 삽입하는데 사용됩니다. 웹 페이지에 이미지를 표시할 때 사용합니다.
9. <ul>, <ol>, <li>각각 순서 없는 목록(Unordered List), 순서 있는 목록(Ordered List), 목록 항목(List Item)을 정의합니다.
10. <table>, <tr>, <th>, <td>- 표(Table)를 정의합니다. `<table>`은 표 전체를, `<tr>`은 행을, `<th>`는 표 제목 셀(Header Cell)을, `<td>`는 데이터 셀(Data Cell)을 나타냅니다.
11. <div>, <span>- 구역(Division)을 정의하는데 사용됩니다. `<div>`는 블록 수준의 요소이며, `<span>`은 인라인 수준의 요소입니다. 스타일링이나 스크립트를 위해 요소들을 그룹화하는 용도로 사용됩니다.
요소들을 조합하여 웹 페이지의 구조와 콘텐츠를 정의하고, CSS와 함께 사용하여 디자인하며, JavaScript와 함께 사용하여 상호작용 할 수 있습니다.
'BackEnd > FrontEnd' 카테고리의 다른 글
| CSS란 (0) | 2023.08.16 |
|---|---|
| JavaScript (0) | 2023.08.16 |