티스토리 뷰
목차
HTML(하이퍼텍스트 마크업 언어)은 웹 페이지를 만드는 데 사용되는 언어입니다.
HTML은 모든 웹사이트의 기본이며 시각적으로 매력적이고 사용자 친화적인 웹 페이지를 만들기 위한 기본 언어입니다.
HTML은 웹 개발자와 웹 디자이너에게 중요한 기술이며, 웹사이트 제작에 관심이 있는 사람들의 필수적인 기술입니다.
이번 포스팅에서는 html의 개념, 구조, html을 이용하여 웹페이지를 만드는 간단한 테스트를 포스팅하겠습니다.
1. HTML 개념
HTML(Hypertext Markup Language)은 웹 페이지에서 콘텐츠를 만들고 구성하기 위해 웹 개발에 사용되는 기본 프로그래밍 언어입니다. 웹 사이트 및 웹 응용 프로그램을 구축하기 위한 기반을 형성합니다.
HTML은 제목, 단락, 목록, 표, 이미지, 비디오 및 기타 멀티미디어 콘텐츠를 포함하여 웹 페이지의 구조를 정의하는 역할을 합니다.
HTML은 강력한 언어이지만 전통적인 의미의 프로그래밍 언어는 아닙니다. HTML은 서버나 데이터베이스와 상호 작용하는 스크립트나 애플리케이션을 작성하는 대신 웹 브라우저에 표시되는 콘텐츠를 구조화하고 형식을 지정하는 데 사용됩니다.
HTML 코드는 메모장 또는 Visual Studio Code 또는 Atom과 같은 고급 통합 개발 환경(IDE)을 사용하여 작성할 수 있습니다. 작성된 코드는 HTML 파일로 저장되며 웹 브라우저에서 최종 결과를 볼 수 있습니다.
HTML은 주기적으로 새 버전이 출시되면서 지속적으로 발전하고 있습니다. 비디오 및 오디오 콘텐츠 지원, 향상된 접근성 기능, CSS 및 JavaScript와 같은 다른 웹 기술과의 향상된 통합과 같은 다양한 새로운 기능이 포함되어 있습니다.
웹 개발에서의 사용 외에도 HTML은 이메일 뉴스레터 및 디지털 출판과 같은 다른 분야에서도 사용됩니다. 콘텐츠를 구조화하고 형식을 지정하는 표준화된 방법을 제공하여 다양한 장치와 플랫폼에서 일관성 있고 액세스 할 수 있도록 합니다.
요약하면 HTML은 웹 사이트 및 웹 응용 프로그램을 구축하는 데 필수적인 프로그래밍 언어입니다. 콘텐츠를 구조화하고 형식을 지정하는 기능을 통해 개발자는 다양한 청중이 액세스 할 수 있는 시각적으로 매력적이고 사용자 친화적인 웹 페이지를 만들 수 있습니다.
2. HTML 구조
HTML은 태그, 속성 및 콘텐츠로 구성된 간단한 구조를 가지고 있습니다.
태그는 웹 페이지의 구조를 정의하는 데 사용되며 속성은 태그에 대한 추가 정보를 제공하는 데 사용됩니다. 콘텐츠는 웹 페이지에 표시되는 텍스트 또는 미디어입니다.
- 태그
태그는 HTML의 구성 요소입니다. 태그는 꺾쇠괄호로 묶여 있으며 브라우저에 콘텐츠를 표시하는 방법을 알려줍니다. 예를 들어 <p> 태그는 단락을 만드는 데 사용되며 <img> 태그는 이미지를 표시하는 데 사용됩니다.
- 속성
속성은 태그에 대한 추가 정보를 제공합니다. 속성은 항상 여는 태그 안에 배치되며 태그 이름과 공백으로 구분됩니다. 예를 들어 <img> 태그에는 이미지 파일의 위치를 지정하는 <img src="파일위치">와 같은 "src"라는 속성이 있습니다.
- 콘텐츠
콘텐츠는 웹 페이지에 표시되는 텍스트 또는 미디어입니다. 콘텐츠는 HTML 요소의 열기 및 닫기 태그 안에 배치됩니다. 예를 들어 단락의 콘텐츠는 <p> 태그와 </p> 태그 사이에 배치됩니다.
3. HTML을 사용하여 웹 페이지 만들기 테스트
1단계: 새 HTML 파일 만들기
새 HTML 파일을 만들려면 메모장 또는 Visual Studio Code 또는 Atorm과 같은 텍스트 편집기를 엽니다. 텍스트 편집기에서 새 파일을 만들고 확장명을. html로 지정하여 저장합니다.
ex) index.html
2단계: HTML 구조 추가
웹 페이지를 만드는 첫 번째 단계는 HTML 구조를 추가하는 것입니다.
HTML 구조는 <html>, <head>, <body> 태그로 구성됩니다.
<html> 태그는 브라우저에 이 문서가 HTML 문서임을 알려줍니다.
<head> 태그에는 제목 및 메타데이터와 같은 웹 페이지에 대한 정보가 포함됩니다.
<body> 태그에는 웹 페이지의 콘텐츠가 포함됩니다.
다음은 html의 예시입니다.
위에 예시는 배가 홈페이지라는 이름에 웹페이지를 만든 간단한 코딩입니다.
3단계: 웹 페이지에 콘텐츠 추가
HTML 구조를 추가했으면 이제 웹 페이지에 콘텐츠를 추가할 차례입니다.
이 작업은 다양한 HTML 태그를 사용하여 수행할 수 있습니다.
다음은 웹 페이지에 이미지를 추가하는 예제입니다.
4단계: HTML 파일 저장
웹 페이지에 콘텐츠를 추가한 후 HTML 파일을 저장합니다. 그런 다음 웹에서 HTML 파일을 열 수 있습니다.
다음은 위에 예시 코딩의 결과입니다.
'Development' 카테고리의 다른 글
| HTML과 항상 함께 하는 동반자 CSS에 대한 궁금증 (0) | 2023.05.31 |
|---|