HTML 코스

HTML 입문

개요

HTML이란 무엇일까요?

수학에서 덧셈 기호를 +로 나타내고, 뺄셈 기호를 -로 나타내듯
웹 사이트에서 화면에 표시되는 정보를 약속 한 것이 HTML입니다.

HTML은 HyperText Markup Language의 약자인데요,

  • HyperText는 단순 텍스트 이상의, 링크 등의 개념이 포함 된 텍스트
  • Markup은 꺽쇠(<, >)로 이루어진 태그를 사용하는 규격

으로, 태그들을 이용하여 텍스트 이상의 요소를 정의하는 약속된 언어라고 할 수 있습니다.

실제로 웹사이트에 표시되는 문자, 사진, 영상, 레이아웃 모두 HTML로 구성되어있죠.

마크업

그렇다면 마크업에 대해서 알아봅시다.

아래와 같은 코드가 마크업 형식을 따르는 텍스트입니다.

<?xml version="1.0" encoding="UTF-8"?>
<note>
	<to>Tom</to>
	<from>Amy</from>
	<heading>Reminder</heading>
	<body>Don't forget me this weekend!</body>
</note>

꺽쇠 안에 들어간 간 것은 태그라고 불리며, <something> 처럼 열고 </something> 처럼 닫으며, 이 둘 사이에 값이 들어갑니다.
주로 꺽쇠 안에 들어가는 문자는 속성의 이름이며, 태그 내부에 들어가는 값은 속성의 값입니다.

위 코드를 보면 to 변수에 해당되는 값이 Tom, from 변수에 해당되는 값이 Amy라고 할 수 있는 것이죠.


HTML이 마크업 언어라고 설명했는데, HTML 이외에도 XML이라는 언어도 대표적인 마크업 언어 중 하나입니다.

HTML 예시

HTML 문서는 아래처럼 태그들로 이루어져 있습니다.

<html>
	<head>
		<title>My Homepage</title>
	</head>
	<body>
		Welcome to my homepage!
	</body>
</html>

HTML에서 태그는 자신의 이름에 따라 각자 특정한 역할을 갖고 있습니다.
예를 들어 <body></body>태그는 문서의 몸통을 나타내며, 이 태그 안에 들어가는 내용이 몸통부에 표시되게 됩니다.

일반적인 마크업 언어와의 차이점은, 일반 마크업 언어에서는 태그 이름을 사용자가 지정하지만,
HTML은 태그의 이름이 규칙으로 정해져 있고 그 태그마다 역할이 다르다는 점입니다.


프론트엔드 프레임워크 등을 사용하면 사용자가 임의로 태그를 만들어 사용하는 경우도 존재합니다.

주석

<!--로 시작하여 -->로 끝납니다.

<!-- 주석란 -->

웹 브라우징

웹 브라우징의 원리를 간단하게 요약하면 다음과 같습니다.

  1. 사용자가 주소(URL) 입력
  2. 어떤 IP에 접속해야 하는지 알아냄 (DNS)
  3. 브라우저가 해당 서버에 입력한 주소(URL)로 요청
  4. 서버에서 브라우저의 요청을 해석하고 실행하여 결과 데이터 전송(HTML, CSS, JS,…)
  5. 브라우저가 서버에서 받은 값을 해석하여 화면으로 출력
  6. 웹 브라우징

서버?

프론트엔드(HTML, CSS, JavaScript)를 학습하는데는 서버가 필요하지 않습니다.

서버를 구축하지 않고, 바로 HTML파일을 로컬 환경에서 작업 한 후, 웹 브라우저에서 열면 HTML파일을 해석하여 화면으로 출력하게 됩니다.
즉, 위의 웹 브라우징 과정에서 5,6번에 해당되는 작업만 우선적으로 실행하면서 공부할 수 있습니다.

개발 시작하기

위에 있는 HTML 예시를 메모장으로 복사한 후 mysite.html 같은 파일로 저장하고 웹 브라우저(Chrome, Internet Explorer)로 열어보세요.
텍스트 하나 뿐이지만 간단한 웹 페이지 하나를 만들었다고 할 수 있습니다!

본격적인 개발을 위해 에디터가 필요할 수 있습니다.
아래 추천 에디터 중에 마음에 드는 것을 선택하여 사용 해 보세요.