 |
| 출처:https://unsplash.com/ |
웹 개발 세계에서 HTML은 모든 웹사이트의 중추입니다. HTML(Hypertext Markup Language)은 웹 페이지를 만드는 데 사용되는 표준 마크업 언어입니다. 웹 페이지의 구조와 내용을 제공하므로 웹 개발의 핵심 구성 요소입니다. HTML은 제목, 단락, 이미지 및 기타 요소를 포함하여 웹사이트의 구조를 정의하는 데 사용됩니다.
HTML은 1990년대 초반에 시작된 이후로 여러 번 개정되었습니다. 현재 HTML의 최신 버전은 2014년에 도입된 HTML5입니다. HTML5에는 더 풍부한 콘텐츠와 더 나은 접근성으로 웹 페이지를 쉽게 만들 수 있는 새로운 요소와 특성이 포함되어 있습니다.
HTML의 기초
HTML은 웹 페이지의 구조와 내용을 정의하는 태그 및 속성 시스템을 기반으로 합니다. 태그는 콘텐츠를 묶고 그 의미를 정의하는 데 사용되며 속성은 콘텐츠에 대한 추가 정보를 제공합니다. 예를 들어 <h1> 태그는 제목을 정의하는 데 사용되는 반면 "class" 속성은 제목에 특정 스타일을 적용하는 데 사용할 수 있습니다.
다음은 기본 웹 페이지를 정의하는 HTML 코드의 예입니다.
<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<h1>Welcome to my web page!</h1>
<p>This is some text on my web page.</p>
<img src="image.jpg" alt="An image on my web page">
</body>
</html>
이 예제에서 코드는 사용할 HTML 버전을 웹 브라우저에 알려주는 doctype 선언으로 시작합니다. 그런 다음 HTML 코드는 문서의 시작과 끝을 정의하는 <html> 태그로 묶입니다. 코드의 <head> 섹션에는 브라우저 탭에 표시되는 페이지 제목을 포함하여 문서에 대한 메타데이터가 포함되어 있습니다. <body> 섹션에는 제목, 단락 및 이미지를 비롯한 웹 페이지의 콘텐츠가 포함됩니다.
HTML 요소 및 속성
HTML은 각각 고유한 의미와 목적을 가진 다양한 요소로 구성됩니다. 가장 일반적인 HTML 요소 중 일부는 다음과 같습니다.
<html>: HTML 문서의 시작과 끝을 정의합니다.
<head>: 제목을 포함하여 문서에 대한 메타데이터를 포함합니다.
<body>: 웹 페이지의 내용을 포함합니다.
<h1>, <h2>, <h3> 등: 다양한 크기의 제목을 정의합니다.
<p>: 텍스트 단락을 정의합니다.
<img>: 웹 페이지에 이미지를 표시합니다.
<a>: 다른 웹 페이지 또는 리소스에 대한 하이퍼링크를 생성합니다.
요소 외에도 HTML에는 웹 페이지의 콘텐츠에 대한 추가 정보를 제공하는 속성도 포함됩니다. 몇 가지 일반적인 속성은 다음과 같습니다.
"class": 요소에 스타일을 적용하는 데 사용할 수 있는 특정 클래스를 요소에 할당합니다.
"id": CSS 또는 JavaScript 코드에서 요소를 참조하는 데 사용할 수 있는 요소에 고유한 식별자를 할당합니다.
"src": 이미지 또는 기타 미디어 파일의 원본 파일을 지정합니다.
"alt": 이미지를 로드할 수 없는 경우 표시되는 이미지에 대한 대체 텍스트를 제공합니다.
HTML과 접근성
웹 개발의 주요 고려 사항 중 하나는 접근성 또는 장애가 있는 사용자가 웹 콘텐츠를 사용할 수 있도록 하는 것입니다. HTML은 웹 페이지의 구조와 콘텐츠를 제공하므로 웹 콘텐츠를 액세스 가능하게 만드는 데 중요한 역할을 합니다. 시맨틱 HTML 요소 및 특성을 사용하여 웹 개발자는 장애가 있는 사용자가 콘텐츠에 더 쉽게 액세스할 수 있도록 할 수 있습니다.
예를 들어 <img> 요소에는 이미지에 대한 대체 텍스트를 제공하는 "alt" 특성이 포함되어 있습니다. 이 텍스트는 시각 장애가 있는 사용자가 사용하는 스크린 리더로 읽을 수 있습니다.
HTML의 기본 구조
HTML은 중첩된 요소로 구성된 DOM(문서 개체 모델)이라는 특정 구조를 따릅니다. 모든 HTML 문서는 <!DOCTYPE html> 선언으로 시작하며 루트 요소로 <html> 요소를 가집니다. <html> 요소 다음에는 <head> 및 <body> 요소의 두 가지 주요 섹션이 옵니다.
헤드 섹션
<head> 섹션에는 페이지 제목, 스타일시트 및 스크립트에 대한 링크, 페이지 자체에 표시되지 않는 기타 정보와 같은 문서에 대한 메타데이터가 포함되어 있습니다. <제목> 요소는 브라우저의 제목 표시줄에 표시되는 문서의 제목을 정의하는 데 사용되며 검색 엔진에서 페이지의 내용을 식별하는 데 사용됩니다.
본문 섹션
<body> 섹션에는 텍스트, 이미지, 비디오 및 기타 요소와 같이 페이지에 표시되는 실제 콘텐츠가 포함됩니다. HTML 요소는 콘텐츠의 구조와 레이아웃을 정의하는 데 사용되며 의미 요소와 비의미 요소의 두 가지 주요 범주로 나눌 수 있습니다.
시맨틱 요소는 콘텐츠에 의미를 부여하고 검색 엔진과 보조 기술이 페이지 구조를 더 잘 이해할 수 있도록 도와줍니다. 의미론적 요소의 예로는 제목(<h1> ~ <h6>), 단락(<p>), 목록(<ul>, <ol>, <li>), 다른 사람.
반면 비의미적 요소는 레이아웃 및 스타일 지정 목적으로만 사용되며 콘텐츠에 추가 의미를 제공하지 않습니다. 비의미적 요소의 예로는 <div>, <span> 및 <table>이 있습니다.
HTML 문서 만들기
HTML 문서를 만들려면 메모장과 같은 간단한 텍스트 편집기나 Sublime Text, Visual Studio Code 또는 Adobe Dreamweaver와 같은 특수 HTML 편집기를 사용할 수 있습니다. .html 확장자로 새 파일을 생성하여 시작하고 HTML 문서의 기본 구조를 추가합니다.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
이 예에서는 페이지의 제목(페이지 제목)을 정의하고 머리글(<h1>This is a Heading</h1>)과 단락(<p>This is a Paragraph. </p>) 문서 본문에.
HTML 요소 및 속성
HTML 요소는 꺾쇠 괄호(<>)로 묶인 태그를 사용하여 정의됩니다. 일부 요소에는 시작 태그(<tag>)와 종료 태그(</tag>)가 있는 반면 다른 요소는 자동으로 닫히는(<tag />) 태그입니다.
속성은 요소에 대한 추가 정보를 제공하는 데 사용되며 시작 태그 내에서 정의됩니다. 예를 들어 <a> 요소는 하이퍼링크를 만드는 데 사용되며 대상 페이지의 URL을 지정하려면 href 속성이 필요합니다.
<a href="https://www.example.com">Click here to visit Example.com</a>
CSS로 HTML 스타일 지정
HTML이 웹 페이지의 구조와 내용을 정의하는 데 사용되는 반면 CSS(Cascading Style Sheets)는 내용의 레이아웃, 표시 및 스타일을 제어하는 데 사용됩니다. CSS를 사용하면 글꼴 크기, 색상, 배경색 및 페이지에서의 위치를 포함하여 HTML 요소의 모양을 제어할 수 있습니다.
CSS 스타일은 별도의 파일(일반적으로 .css 확장자 포함)에서 정의하거나 <style> 요소를 사용하여 HTML 문서 내에서 직접 정의할 수 있습니다. 예를 들어 페이지의 배경색을 파란색으로 변경하려면 문서의 <head> 섹션에 다음 코드를 추가할 수 있습니다.
HTML 문서의 구조
HTML 작성 방법에 대해 자세히 알아보기 전에 HTML 문서의 기본 구조를 이해하는 것이 중요합니다. HTML 문서는 다음을 포함하여 여러 부분으로 구성됩니다.
DTD(Document Type Declaration): HTML 문서의 첫 번째 줄이며 사용 중인 HTML 버전을 지정합니다.
HTML 요소: 이것은 HTML 문서의 루트 요소이며 다른 모든 요소는 그 안에 포함됩니다. <html> 태그로 식별됩니다.
헤드 요소: 이 요소에는 제목, 스타일시트 링크 및 페이지에 표시되지 않는 기타 정보를 포함하여 문서에 대한 메타데이터가 포함됩니다. <head> 태그로 식별됩니다.
본문 요소: 이 요소에는 텍스트, 이미지 및 기타 미디어를 포함하여 페이지에 표시되는 모든 콘텐츠가 포함됩니다. <body> 태그로 식별됩니다.
기타 요소: 구조를 추가하고 링크를 정의하는 등 HTML 문서에서 사용할 수 있는 다른 많은 요소가 있습니다. 여기에는 제목(<h1> ~ <h6>), 단락(<p>), 목록(<ul> 및 <ol>) 등이 포함됩니다.
HTML 쓰기
이제 HTML 문서의 기본 구조를 이해했으므로 실제로 HTML 코드를 작성하는 방법을 살펴보겠습니다. HTML은 태그를 사용하여 문서 내의 요소와 구조를 정의하는 마크업 언어입니다.
태그
HTML 태그는 <태그 이름>과 같이 꺾쇠 괄호로 묶습니다. 대부분의 태그에는 <tagname>content</tagname>과 같이 여는 태그와 닫는 태그가 있습니다. 여는 태그와 닫는 태그 사이의 내용이 페이지에 표시됩니다.
이미지의 <img> 태그와 같은 일부 태그에는 닫는 태그가 없으며 <img src="image.jpg">와 같이 작성됩니다. 이를 자체 폐쇄 태그라고 합니다.
속성
HTML 태그에는 요소에 대한 추가 정보를 제공하는 속성도 있을 수 있습니다. 속성은 요소의 여는 태그에 추가되며 <tagname attribute="value">와 같이 작성됩니다. 예를 들어 <img> 태그에는 표시할 이미지의 URL을 지정하는 src 속성이 있습니다.
코멘트
코드로 작업할 수 있는 다른 개발자에게 메모와 컨텍스트를 제공하기 위해 주석을 HTML 코드에 추가할 수 있습니다. 주석은 다음과 같이 작성됩니다: <!-- 주석은 여기에 -->. <!--와 --> 사이의 내용은 페이지에 표시되지 않으며 코드에서만 볼 수 있습니다.
HTML 작성 모범 사례
HTML을 작성할 때 코드가 깨끗하고 체계적이며 유지 관리하기 쉬운지 확인하기 위해 염두에 두어야 할 몇 가지 모범 사례가 있습니다.
시맨틱 HTML 사용: 시맨틱 HTML은 문서의 구조를 더 쉽게 이해할 수 있도록 명확하고 의미 있는 이름을 가진 태그를 사용합니다.
들여쓰기 및 공백 사용: 적절한 들여쓰기 및 공백을 사용하면 특히 더 큰 문서로 작업할 때 코드를 더 쉽게 읽고 이해할 수 있습니다.
프리젠테이션에서 콘텐츠 분리: 문서의 프리젠테이션을 제어하려면 HTML이 아닌 CSS를 사용해야 합니다. 프레젠테이션 스타일을 문서 내용과 별도로 유지하십시오.
유효한 코드 사용: 웹 표준을 준수하는 유효한 HTML 코드를 작성하기 위해 항상 노력하십시오. 이렇게 하면 다양한 브라우저와 장치에서 코드가 제대로 작동합니다.
코드에 주석 달기: 특히 복잡하거나 큰 문서의 경우 주석을 사용하여 코드에 대한 컨텍스트와 메모를 제공합니다.
결론
요약하면 HTML은 웹 개발의 기본 언어로 웹 페이지의 구조와 내용을 제공합니다. 태그와 속성을 사용하여 페이지 내의 요소를 정의하고 형식을 지정하여 개발자가 시각적으로 매력적이고 기능적인 웹 사이트를 만들 수 있습니다.
CSS 및 JavaScript와 같이 HTML과 함께 작동하는 다른 많은 웹 기술 및 언어가 있지만 웹 개발에 관심이 있는 모든 사람에게 HTML을 이해하는 것은 필수적입니다. 모범 사례를 따르고 현재 표준을 최신 상태로 유지함으로써 개발자는 클라이언트와 사용자 모두의 요구를 충족하는 효율적이고 액세스 가능하며 사용자 친화적인 웹 사이트를 만들 수 있습니다.