본문 바로가기

HTML

HTML이란? 구조 탐구 및 파일 만들기

반응형

HTML 이란?

HTML이라는 말을 들어본 적 있는가? 아마 대부분의 사람들이 이 용어를 처음 듣는다고 대답할 것이다. 그렇다면 혹시 ‘웹 페이지’라는 단어는 알고 있는가? 웹 페이지란 인터넷에서 사용되는 문서로, 하이퍼텍스트 방식을 통해 연결되어 있는 수많은 정보들을 담고 있는 공간을 말한다.

즉, HTML은 웹 페이지를 만들기 위한 기본 언어라고 할 수 있다. 일반적으로 HTML 문서는 텍스트와 이미지 등 다양한 요소들로 구성된다. 여기서 중요한 점은 바로 모든 요소들이 서로 유기적으로 연결되어 있다는 사실이다. 다시 말해 하나의 HTML 문서에는 여러 개의 링크가 존재하며, 각각의 링크는 또 다른 URL 주소를 갖고 있다. 따라서 특정 부분을 클릭하면 새로운 창이 뜨면서 이전과는 전혀 다른 화면이 나타난다. 이를 두고 흔히 ‘하이퍼링크’라고 부른다.

웹 프로그래밍 언어라고 하면 흔히 PHP나 JavaScript 같은 걸 떠올리기 마련인데, Html도 엄연히 하나의 프로그램 언어다. 하지만 다른 언어나 프레임워크처럼 특화된 분야가 없고 일반적인 용도로는 거의 쓰이지 않기 때문에 사람들은 보통 html이라는 말을 들으면 워드프로세서 문서 편집기 창만 떠오른다. 물론 인터넷 익스플로러 환경에서는 여전히 텍스트 입력창 역할을 맡고 있기는 하다. 그럼 여기서 잠깐 퀴즈~ 우리가 평소 자주 접하는 홈페이지 화면 가운데 일부는 분명 에디터 툴 없이 순수히 html로만 구성되어 있을 텐데, 어떻게 그런 게 가능할까? 정답은 바로 자바스크립트라는 녀석 덕분이다. 그리고 앞으로는 계속해서 언급될 테니 미리 알아두자.


HTML 구조 탐구

  • <!DOCTYPE html>: 문서가 사용 중인 HTML 버전을 브라우저에 알려주는 문서 유형 선언입니다. 이 경우 HTML5입니다.
  • <html>: 이것은 다른 모든 요소를 포함하는 HTML 문서의 루트 요소입니다.
  • <head>: 이 요소에는 제목과 같은 문서에 대한 메타데이터와 스타일시트 및 스크립트와 같은 외부 리소스에 대한 링크가 포함됩니다.
  • <title>: 이 요소는 브라우저의 제목 표시줄에 나타나는 문서의 제목을 지정합니다.
  • <body>: 이 요소에는 제목, 단락, 이미지 및 링크와 같은 문서의 가시적 콘텐츠가 포함됩니다.
  • <h1>: 최상위 제목을 지정하는 제목 요소입니다.
  • <p>: 텍스트 블록을 포함하는 단락 요소입니다.

HTML 파일 만들기

HTML 파일을 만들때는 꼭 파일명.html 형식으로 만들어줘야 한다.

  1. 선택한 텍스트 편집기를 엽니다.
  2. "파일" > "새로 만들기"를 클릭하여 새 파일을 만듭니다. 또는 키보드 단축키 Ctrl + N(Windows) 또는 Command + N(Mac)을 사용합니다.
  3. HTML 코드를 입력하거나 소스에서 복사하여 붙여넣습니다.
  4. 다음을 사용하여 파일을 저장합니다. "파일" > "저장"을 클릭하거나 키보드 단축키 Ctrl + S(Windows) 또는 Command + S(Mac)를 사용하여 .html 확장자를 추가합니다.
  5. 파일 이름을 선택하고 . "my-website.html"과 같이 파일 이름 끝에 html 확장자를 추가합니다.
  6. 데스크톱 또는 컴퓨터의 폴더와 같이 파일을 저장할 위치를 선택합니다.
반응형