고정 헤더 영역
상세 컨텐츠
본문
1. HTML이란 무엇인가?
웹 개발의 얼굴이다. 코딩을 하면 눈에 보이는 무언가가 나와야 한다. 사실 눈에 안보이는 결과가 나오기도 하지만, 초보자들은 눈에 보여야 직관적으로 이해하는 법이다. 그런 의미에서, html은 웹 개발을 처음 시작하는 우리가 가장 쉽게 접하고, 친숙할 수 있는 웹 개발의 요소이다.
이렇게만 말하면 잘 와닿지 않을 수 있다. 예를 들어 집을 짓는다고 해 보자.
예쁜 집을 짓고 싶다고 지붕이나 창문을 먼저 만들 수 있을까? 절대 안된다. 항상 기본이 되는 철골구조와 뼈대를 먼저 만들어야 한다. 웹개발도 마찬가지이다. 꾸미는 작업(css)을 먼저 하고싶다고 해서 기본 구조인 HTML이 없는 상황에서 CSS만 할 수는 없다.
다시 말해, html은 눈에 보이는 뼈대를 만드는 작업이다.
2. HTML의 기본 구성요소
그럼 HTML은 어떻게 생겼을까?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
publisher, 환
</body>
</html>이렇게 생겼다.
앞에 있는 친구들이 너무 복잡하게 생겼다고 겁먹을 필요는 없다. 초보자인 우리의 입장에서는 별로 중요한 친구들이 아니니까. 그리고 나도 코딩을 잘 하지는 못하지만, 내 생각에 코딩의 큰 매력중 하나는 세세한 요소 하나하나를 전부 외울 필요가 없다는 점이다. 언제든지 필요한 정보를 구글에 검색하면 친절하게 알려주는 사람들이 많기 때문에, 저게 궁금하면 그때 찾아보면 된다.
그럼 이 친구를 실제로 웹사이트에 표시해보면 어떻게 생겼을까?
이렇게 생겼다.
그럼 이제 저 위의 코드가 어떤 의미를 가지고 있길래 웹사이트에 다음과 같은 글자가 나오는지 한 번 확인해보자. 어렵지 않다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
publisher, 환
</body>
</html>사실 이 코드에서 중요한 내용은 딱 3개이다.
ㄱ. html은 <xxx>와 같이 요소를 <>꺽쇠로 표시한다. 이 꺽쇠를 '태그'라고 말한다. 앞서 집을 지을 때 철골구조나 콘크리트를 결정하는게 html의 역할이라고 설명했었다. 그 철골이 <>꺽쇠의 역할을 하는 것이다. 따라서 위의 코드에 <head>나 <body>등으로 표시되어 있는게 html의 태그이다. 철골도 시작점과 끝점이 있듯이, html 요소들도 시작점과 끝점을 명시해줘야 한다. 시작점은 <xxx>와 같이 일반 꺽쇠로 표시하고, 이 코드를 끝내고 싶을 때 </xxx>와 같이 꺽쇠 안에 / 슬래쉬를 넣어주면 된다.
ㄴ. html은 head와 body로 이루어져 있다. 위 코드에서 보이는 것 처럼 head와 body안에 웹 페이지를 구성하는 내용이 담겨져 있다. head에는 html을 이루는 기본 설정들이 있다. 집을 짓는 과정으로 비유하자면, 눈에는 보이지 않지만 이 집에 대한 기본 정보를 알려주는 부동산 정보나 토지정보, 건축 허가증 정도가 되겠다. 매우 중요하지만, 우리 눈에는 보이지 않는다. 그 다음에는 body 태그가 있는데, 말 그대로 본문의 내용이다. 유일하게 웹 페이지에서 보이는 publisher, 환 의 내용이 body안에 들어있다.
ㄷ. body안에는 여러 요소를 추가해서 넣을 수 있다. 집을 지을 때도 철골구조를 설계하면서 어디서부터 어디까지 지붕을 올릴 것이고, 창문은 어느 방향으로 어떻게 넣을 것이고, 현관문이나 차고를 위치시킬지에 대한 계획을 가지고 설계를 한다. 마찬가지로 웹페이지를 구성하기 위한 버튼은 어디에 넣을 것인지, 글자를 표시할 때 문단은 어디에 넣을지, 입력 칸은 몇 개를 넣을지를 모두 body안에 새로운 태그, <>를 사용해서 설계한다. 이 태그의 종류는 무궁무진하다. 정말 너무 많은 태그들이 있고, 이를 한 페이지에서 설명하는 것은 거의 불가능에 가깝다. 하지만 인터넷에 찾아보면 너무나 많은 태그들이 친절한 설명과 함께 나오니, 언제든지 찾아보고 사용하면 된다.
'환 codes web > HTML, CSS' 카테고리의 다른 글
| 피로그래밍 14기: day2 오후 <BOOTSTRAP> (0) | 2021.01.10 |
|---|---|
| 피로그래밍 14기: day2 오전 <CSS> (0) | 2021.01.10 |
댓글 영역