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은 태그의 이름이 규칙으로 정해져 있고 그 태그마다 역할이 다르다는 점입니다.
프론트엔드 프레임워크 등을 사용하면 사용자가 임의로 태그를 만들어 사용하는 경우도 존재합니다.
주석
<!--로 시작하여 -->로 끝납니다.
<!-- 주석란 -->
웹 브라우징
웹 브라우징의 원리를 간단하게 요약하면 다음과 같습니다.
- 사용자가 주소(URL) 입력
- 어떤 IP에 접속해야 하는지 알아냄 (DNS)
- 브라우저가 해당 서버에 입력한 주소(URL)로 요청
- 서버에서 브라우저의 요청을 해석하고 실행하여 결과 데이터 전송(HTML, CSS, JS,…)
- 브라우저가 서버에서 받은 값을 해석하여 화면으로 출력
- 웹 브라우징
서버?
프론트엔드(HTML, CSS, JavaScript)를 학습하는데는 서버가 필요하지 않습니다.
서버를 구축하지 않고, 바로 HTML파일을 로컬 환경에서 작업 한 후, 웹 브라우저에서 열면 HTML파일을 해석하여 화면으로 출력하게 됩니다.
즉, 위의 웹 브라우징 과정에서 5,6번에 해당되는 작업만 우선적으로 실행하면서 공부할 수 있습니다.
개발 시작하기
위에 있는 HTML 예시를 메모장으로 복사한 후 mysite.html 같은 파일로 저장하고 웹 브라우저(Chrome, Internet Explorer)로 열어보세요.
텍스트 하나 뿐이지만 간단한 웹 페이지 하나를 만들었다고 할 수 있습니다!
본격적인 개발을 위해 에디터가 필요할 수 있습니다.
아래 추천 에디터 중에 마음에 드는 것을 선택하여 사용 해 보세요.