안녕하세요. developak입니다.
제 소개는 차차 하도록 하고, 첫 게시글인 만큼 웹 개발에 아주아주 기초적인 HTML을 이번에 다뤄볼까 합니다.
HTML이란
HTML은 HyperText Mark-up Language의 약자입니다. 웹 페이지의 모습을 기술하기 위한 규약. 프로그래밍 언어가 아닌 마크업 언어라고 하는 언어라고 합니다.
여기까지 설명했던 것은 나무위키에서 가져온 내용입니다. 저도 알고 있는 내용이지만, 좀 더 정확하고 확실하게 알려드리기 위해서 가져왔습니다.
제가 느꼈던 바를 얘기해드리자면,
만약 개발 교육을 듣는다!라고 하면 가장 먼저 만나는 언어이기도 하구요. 이후에 차례차례 각 프로그래밍언어에 대해 설명하겠지만, 이번 시간엔 HTML을 얘기해볼까 합니다.
기본적으로 파일 형식(format)은 html입니다. htm으로도 되어있는 것이 있지만, 대부분은 html이라는 파일 형식으로 되어있습니다. 또한 메모장으로도 html를 하드코딩해서 웹브라우저에 띄울수도 있습니다. 메모장말고도 에디터 즉, 텍스트 편집기를 이용하여 html 문서를 작성할 수 있습니다.
하지만, 굳이 여기서 보여드리진 않겠습니다.
그럼 우선 예제를 하나 만들어보겠습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Insert title here</title>
</head>
<body>
</body>
</html>
자! 이렇게 기본적으로 html 문서를 작성해보았습니다.
문서의 라인마다 꺽새(<,>)가 있습니다. 이것은 html문서를 작성하기 위한 하나의 태그(tag) 또는 요소(element)라고 합니다.
또한 html에서 사용할 수 있는 태그는 무수히 많으며, 각 태그마다 용도가 있고 웹 접근성에 위배되어서는 안됩니다.
<!DOCTYPE html>
가장 첫 라인인 이 선언에 대해 얘기를 좀 하자면, 이것은 태그는 아닙니다. 이 문장을 선언해주는 것이 html문서작성에 좋습니다. 또한, 이것은 문서의 타입을 정의를 뜻하는 것입니다.
하지만 거기까지 파고들면 이 글을 보는 입장에서는 머리가 아플것이 분명하기 때문에, 얘기는 하지않겠습니다.
다음은, 태그에 대한 얘기를 해볼까합니다.
문서를 자세히 보면, 가장 먼저 보이는 꺽새 안에 html이 보이고, 가장 아래 라인을 보면 html이 또 있습니다. 하지만 뭔가 다릅니다.
그렇죠. 가장 마지막 라인에는 '/'가 포함되어있습니다. 이것은 태그의 시작과 끝을 알립니다.
태그의 시작은 <태그명>, 끝은 </태그명>으로 되어있죠.
이어서 설명을 하자면,
html태그는 html문서의 시작을 의미합니다.
html태그내에는 크게 head와 body로 짜여져 있습니다.
head태그는 말그대로 html문서를 정의하기 위한 메타데이터(metadata)의 집합을 정의할 때 사용합니다.
여기서 사용할 수 있는 태그는 기본적으로 <title>, <style>, <meta>, <link>, <script>가 있습니다.
<body>에서 사용하는 태그들을 여기서는 사용해도 보이지 않습니다. html문서를 정의하기 위해 사용되는 태그이기 때문이죠.
body태그에 대해서 설명드리겠습니다.
head태그가 문서의 정의를 담당한다면, body는 head태그와 대조적으로 문서에 표현하고자 하는 것들 즉, html문서의 본문을 담당합니다.
body태그에서 쓰이는 태그들은 상당히 많지만 기본적으로 <div>, <span>, <p>, <a>, <input>, <form>, <br>, <hr>이 있습니다.
기본적으로라고 했는데 head태그에 들어가는 태그들보다 더 많아 왠지 거짓말을 치는 것 같지만 정말 기본적이라 미리 죄송합니다.
아무튼, body태그에는 이런 기본적인 태그들을 쓸 수 있습니다. 더 찾아본다면 더 많은 태그들을 사용하여 html문서를 좀 더 잘 다룰 수 있겠습니다. 다른 곳에서 더 찾지마시고, 다음 게시글에 소개를 할테니 거기서 보도록합시다.
첫 포스팅인데,
'블로그에 내가 가진 지식을 내놓는 것은 정말 빡세네'라고 생각했습니다.
처음엔 별거 아니겠지라고 했는데 말이죠. 회사에서 문서작성하는 것보다 더 빡센 것 같습니다.
어쨌든, 다음 게시글에선 좀 더 자세하고 알기 쉬운, 첫 개발에 도움되는 내용을 얘기해볼까 합니다.
아, 추가로 제가 지금까지 해보았던 언어들과 제 소개를 올려놓도록 하겠습니다.
웹 개발에 대한 지식들을 저뿐만아니라, 코멘트로 뭐 이런 코딩이 좋다, 여기는 이게 틀렸다. 알려주시면 좋겠습니다.
서로서로 지식을 공유하며 좀 더 능력있는 개발자가 되셨으면 좋겠습니다.
그럼 다음 게시글에서 뵙겠습니다 :)
'마크업언어 > HTML' 카테고리의 다른 글
| [HTML] Semantic HTML 이란? (0) | 2021.05.30 |
|---|
