#02 HTML 언어란?

Edwin·2023년 1월 25일
HTML관련WEB과다양한언어들생활코딩

WEB과 다양한 언어들

목록 보기
2/5
post-thumbnail

WEB1 - HTML이란?

HTML과 <태그>들

Markup Language에 대한 위키백과의 정의는 "마크업 언어(markup 言語, markup language)는 태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어"이다. 여기서 볼 수 있듯, HTML은 Markup언어이다. 

<!DOCTYPE html>
<html lang="ko">
<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>
  
</body>
</html>

태그들 사이에 내용을 기록하면서, 컴퓨터로 하여금 작성자의 의도를 전달하는 언어시스템이 바로 HTML인 것이다. 문서의 형식(DOYTYPE)으로 html을 선언한 위의 코드의 첫번째 명령 아래를 보자. 첫번째 등장하는 태그는 html이고, 이 태그는 가장 마지막 줄에 /html로 닫혀있다. 그리고 그 안에 보면 head로 시작해서 /head로 닫혀지는 한 묶음과 body로 시작해서 /body로 닫혀지는 한 묶음이 있다.

정리해보면, html이라는 가장 큰 공간 안에 head라는 공간과 body라는 공간이 있다고 여겨보면 좋을 것 같다. 그리고 각 공간은 그 성격과 양태가 다르다. 이렇게 수많은 <태그>들로 컴퓨터와 소통하는 언어가 HTML이다. 현재 HTML에는 약 150개의 태그들이 존재하는데, 걱정할 필요없다. 가장많이 사용하는 28개의 대세태그들을 학습하며, 필요에 따라 하나씩 공부해나가다 보면 어느 순간 HTML을 씹어먹게 될 것이다.


출처 advancedwebranking

title 태그

상위태그 목록에서 4위를 차지하는 title태그는 해당 문서의 제목이 무엇인지 설정하는 태그이다. 쉽게 설명해서 웹브라우저 상단을 보면 탭별로 여러 페이지들이 나열되어 있고, 그 가운데 하나가 본 페이지일 것이다. 해당 페이지의 이름이 어떻게 나와있는지 살펴보면, 그것이 바로 title에 해당된다. 

<head>
...
<title>#02 HTML 언어란?</title>
...
</head>

위와 같이 기록되었기에, 해당 탭의 이름은 "#02 HTML 언어란?"으로 기록되어 있을 것이다. 확인을 원한다면, 맥OS를 이용 중이고, Safari라면 마우스 오른쪽 버튼을 클릭해서 요소검사를, 크롬을 사용 중이라면 F12를 눌러보자. 그러면 해당 태그를 확인할 수 있을 것이다.

body 태그 내의 여러 태그들

p태그는 상위 12번째 태그에 해당되며, 문단을 구성하는 태그이다. p태그 사이에 기록된 내용은 하나의 문단으로 인식된다. a태그는 상위 7번째 태그로서 하나의 문장을 구성하는 태그라고 이해하면 될 것 같다. p태그는 문장태그이기에 해당태그 다음은 줄바꿈처리가 되지만, a태그는 문장태그이기에 줄바꿈처리가 따로 되지 않는다. 그렇다면, 줄바꿈처리는 어떻게 할까? 바로 br태그가 있다. br태그는 상위 16번째 태그로써 한 번 입력할 때마다 한 줄씩 줄바꿈처리가 된다.

그런데, 여기서 기억할 것이 있다. 대부분의 태그들은 여는 태그와 닫힘태그가 존재하지만, 그렇지 않은 태그들도 존재한다는 점이다. 대표적인 태그가 br태그이다. br태그는 여는 태그는 있지만 /br와 같은 닫는 태그가 필요없다.

또한, span태그(상위11위)는 본문의 내용 가운데 특정한 단어, 또는 문구, 문장을 꾸며줄 때 사용한다. 속성값으로 style을 이용하거나, style태그(상위15위)를 통하여 글자의 폰트, 크기, 색상 등을 설정하여 포인트를 줄 수 있다.

또한, 제목을 꾸며주는 태그들이 있다. h1부터 h6태그까지가 그것이다. 필자가 현재 기록하고 있는 벨로그에도 상단에 보면 H1, H2, H3, H4가 있는데 바로 이러한 제목태그들을 그래픽화한 것이다. 이렇게 함으로 벌써 15개의 태그들을 살펴보았다. 전체 태그 가운데 10%를 학습했다. 놀랍지 않는가.

태그와 속성(attribute)

또한 태그들에는 그 안에 각각의 속성들을 가지고 있다. 아래의 img태그(상위10위)를 예로 하여 살펴보자. 

<img src="이미지의위치" alt="이미지설명" style="꾸미기" id="" class="">

태그 안에 있는 scr="", alt="", style="", id="", class=""와 같은 내용들이 속성에 해당된다. scr는 이미지 파일이 내컴퓨터에 있다면 경로를 기록함으로 해당이미지를 가져올 수도 있고 url주소를 입력하여 웹상에 있는 이미지를 기록할 수도 있다. alt는 웹브라우저에 표시되지는 않지만 개발자가 해당이미지를 열어보지 않고도 간단한 명시를 통해 알 수 있도록 하는 속성이고, style은 이미지의 크기, 위치 등을 설정할 수 있는 스타일 속성이고, id/class는 해당 img태그를 지칭하는 이름정도로 간단하게 정의하면 될 것 같다. 이러한 것들이 태그 안에 있는 속성에 대한 정의이다.

부모태그와 자식태그

태그에는 상속을 받는 태그와 상속이 되는 태그들이 존재 한다. 대표적인 태그가 바로 ol/ul태그(상위14위)와 li태그(상위13위)이다. 여기서 볼 수 있듯이 반드시 그런 것은 아니다. 실제 데이터를 통해서 볼 때에 li태그의 빈도수가 높은 것으로 보아 단독으로 사용될 수도 있지만, 보통 ol/ul태그 안에서 사용된다. 여기서 ol태그는 순서가 있는 목차태그이고, ul태그는 순서가 없는 목차태그이다.

ol태그는 아래와 같은 목차를 구성하고,
1. 하나
2. 둘
3. 셋

<ol>
  <li>하나</li>
  <li>둘</li>
  <li>셋</li>
</ol>

ul태그는 아래와 같은 목차를 구성한다.

  • 하나
  • 둘
  • 셋
<ul>
  <li>하나</li>
  <li>둘</li>
  <li>셋</li>
</ul>

태그의 왕 "input태그"

상위태그 18위에 해당되는 input태그는 html에 있어서 그 사용성이 매우 다양하고 강력한 태그 가운데 하나이다. 유사태그로는 textarea태그(여러줄의 내용을 전달받을 때)가 있다. input태그의 대표 기능은 사용자로부터 정보를 전달받는다는 점이다. 또한 input태그는 그 속성 중에 하나인 type을 button으로 설정하여 버튼을 만들 수도 있고, radio 또는 checkbox를 설정하여 사용자가 체크할 수 있는 박스를 만들 수 있기도 하며, type으로 reset을 설정함으로 기록된 사용자의 내용들을 초기화 하거나, submit를 설정하여 사용자가 기록한 내용을 전할 수 있다.

input태그의 효율을 극대화 하는 form태그

form 태그는 상위20위에 달하는 사용빈도가 높은 태그 중 하나이다. form태그는 input태그와 함께 사용되며, input태그로 전달된 사용자의 정보를 속성(action)을 통하여 전달해준다. 

<form action="/test.html">
  <input type="text"> 
  <input type="hidden" name="hide" value="edwin">
  <input type="submit" value="전송">
<./form>

input태그로 형성한 공간에 사용자가 어떠한 내용을 입력하고, 전송을 누르면, form태그는 그 내용을 속성값으로 지정한 경로로 전달한다.

이때, 전달받은 url("http://....0.0.1:5500/**test.html")은 form태그로부터 전달받은 내용을 함께 url에 기록하는데, "http://....0.0.1:5500/**test.html**?**hide=edwin**" 로 기록될 것이다.

전달받아 열려진 url에서 유의해서 볼 부분이 있는데 hide과 edwin이다. hide은 input태그의 속성 name의 값이고, edwin은 input태그의 속성 value의 값이다. 이러한 식으로 각각의 input태그에 속성으로 name과 value를 지정하며, form태그로, form태그는 그 정보를 다음 페이지로 전달하며 작동한다.

물론 url에 담아보내지 않는 방법도 존재한다. 이는 form태그의 속성 method가 "GET"방식이기 때문이다.(기본설정값) method="post"로 변경하면, 서버로는 해당정보를 보내지만, 그 내용을 url로 반영하지는 않게 된다. "post"방식으로 속성을 정했다면, 반드시 속성(enctype)도 아래와 같이 함께 기록해주어야 한다. 

<form action="//test.html" method="post" enctype="multipart/form-data">

html로도 표를 만들 수 있을까? table 태그의 활용

물론 html로도 표를 만들수 있다. 이때 가장 기초가 되는 태그는 td태그이다. 작은 네모 박스라고 생각하면 될 것 같다. 1) 한 줄에 3칸인 표는 어떻게 만들까? td태그를 3개 형성해 주면 된다. 그런데 이 태그에는 부모태그가 필요하다. 바로 table태그이다. 이때 정말 표처럼 만들기 위해서는 td태그에 꾸미기속성(style)을 주어야 한다. 필자는 선으로 1px의 굵기에, 검은색, 실선을 그어주도록 설정하고, 각 칸의 내용으로 A,B,C가 들어가도록 설정하였다. 

<table>
  <td style="border: 1px solid black;">A</td>
  <td style="border: 1px solid black;">B</td>
  <td style="border: 1px solid black;">C</td>     
</table>

2) 2줄x3칸인 표를 만들고 싶다면 어떻게 해야할까? 위에서 설정한 td태그(손자태그)와 table태그(할아버지태그) 사이에, tr태그(부모태그)를 설정해주면 된다. 이렇게 말이다. 

<table>
  <tr>
    <td style="border: 1px solid black;">A</td>
    <td style="border: 1px solid black;">B</td>
    <td style="border: 1px solid black;">C</td>
  </tr>
  <tr>
    <td style="border: 1px solid black;">D</td>
    <td style="border: 1px solid black;">E</td>
    <td style="border: 1px solid black;">F</td>
  </tr>
</table>

3) 그런데 표는 이렇게만 생기지 않았다. A칸과 B칸을 병합하고 싶다면? 또한 C칸과 F칸을 병합하고 싶다면 어떻게 해야할까? 이렇게 하면 적용할 수 있다.
A칸과 B칸의 병합은 열의 병합이기 때문에 속성 colspan=""을 선언함으로 이뤄진다. 이때 2칸 이기 때문에 "2"를 입력해주면 된다. 그렇다면 C칸과 F칸의 병합은 무엇일까? 행의 병합이기 때문에 rowspan=""을 선언하면 된다. 

<table>
  <tr>
    <td colspan="2" style="border: 1px solid black;">AB</td>
    <td rowspan="2" style="border: 1px solid black;">CF</td>
  </tr>
  <tr>
    <td style="border: 1px solid black;">D</td>
    <td style="border: 1px solid black;">E</td>
  </tr>
</table>

4) 그런데 우리가 아는 표를 생각해보자. 칸 사이의 빈공간이 있는 표를 본 적이 있는가? 아마도 없을 것이다. 이를 위해서는 별도의 style속성을 지정해주어야 한다. 아래와 같이 최상위 부모태그인 table태그에 다음과 같이 입력해보자. 핵심은 꾸미기 속성인 style="border-collapse: collapse;" 를 선언해줌으로 가능하다. 물론 table태그자체를 굵은 선으로 하고 싶다면, border의 값으로 2px 이상의 선을 선언해주면 가능하다. 

<table style="border-collapse: collapse;">
  <tr>
    <td colspan="2" style="border: 1px solid black;">AB</td>
    <td rowspan="2" style="border: 1px solid black;">CF</td>
  </tr>
  <tr>
    <td style="border: 1px solid black;">D</td>
    <td style="border: 1px solid black;">E</td>
  </tr>
</table>

5) 모든 표에는 제목에 해당되는 행이 존재하기 마련이다. HTML에서도 제목행을 의미하는 태그가 존재하는데, 바로 th태그이다. td태그와 다르게, th태그에서의 글자는 볼드체로 기본설정이 되어있다. 그리고 이러한 제목행은 부모태드로 thead태그를 가진다. 그리고 일반행 역시 부모태그로 tbody태그를 가진다. 그렇다면, 꼬리행을 따로 지정할 수 있을까? 가능하다. 부모태그로 tfoot태그로 하는 td/th태그를 가질 수 있다. 코드로 입력하면 아래와 같다. 

<table style="border-collapse: collapse;">
<thead>
    <tr>
      <th style="border: 1px solid black;">A</th>
      <th style="border: 1px solid black;">B</th>
      <th style="border: 1px solid black;">C</th>
    </tr>
</thead>

<tbody>
    <tr>
      <td colspan="2" style="border: 1px solid black;">AB</td>
      <td rowspan="2" style="border: 1px solid black;">CF</td>
    </tr>
    <tr>
      <td style="border: 1px solid black;">D</td>
      <td style="border: 1px solid black;">E</td>
    </tr>
</tbody>

<tfoot>
    <tr>
      <td style="border: 1px solid black;">G</td>
      <td style="border: 1px solid black;">H</td>
      <td style="border: 1px solid black;">I</td>
    </tr>
</tfoot>
</table>

정보를 담은 그릇으로서의 HTML의 발전

HTML의 활용도가 높아짐에 따라서 문서를 보다 세련되게 정리하고자 하는 고민들이 생겨났고, 이러한 고민들은 semantic태그들을 발전시켰다. 그러나 해당 태그들은 의미론적으로 HTML의 구조를 명시할 뿐, 특정한 기능이 있는 것은 아니다.

첫째, HEADER태그

펼쳐진 웹브라우저의 최상단에 위치하는 태그들을 넣은 태그로써, 보통 웹페이지의 title이나 로고 등이 기록되는 공간에 해당 태그를 부여하였다.

둘째, ARTICLE태그 SECTION태그

쉽게 본문이 기록되는 태그들의 묶음을 article태그라고 여기면 될 것 같다. 본문1(article태그), 본문2(article태그), 본문3(article태그), 본문4(article태그)와 같이 말이다. 그런데 본문1과 2의 주제가 같고, 본문3과 4의 주제가 같다면, 이 4개의 article태그를 의미론적으로 구분하고자 하는 욕심이 생겨날 것이다. 이때 사용하는 것이 section태그이다. 본문1(article태그)과 본문2(article태그)를 section태그로 묶고, 본문3(article태그)와 본문4(article태그)를 section태그로 감싸는 것이다. 그러나 section태그가 꼭 article태그만을 그룹화 하는 것은 아니다. 다만 작은 단위의 그룹을 큰 단위로 묶고자 할 때, 사용하는 의미론적인 태그라는 정도만 기억하자.

셋째, NAV태그

NAV는 navigation의 약어이다. 즉 웹페이지를 보면 목차들이 나열되며, 해당 목차에 다른 페이지로 이동할 수 있는 링크가 달려있는 태그들이 존재한다. 이러한 태그들이 의미론적인 측면에서 웹페이지의 나가고자 하는 길 역활을 수행하기에 NAV태그로 감싸주곤 한다.

다섯째, FOOTER태그

머리태그가 있고, 몸태그가 있다면, 이번에는 발태그에 대한 이야기이다. 보통 웹페이지 마다 하단에 회사를 소개하거나, 전화번호, 이메일주소 등의 정보가 담겨있는 공간이 있기 마련이다. 이러한 내용들은 의미론적으로 페이지의 최하단에 위치해있기에, FOOTER태그로 감싸주곤 한다.

그런데 HTMl, 더 이쁘게 꾸며볼 수는 없을까?

이러한 고민 때문에 발전된 언어가 CSS이다. 웹이 등장하고 난 뒤 4년이 흐른 1994년 CSS가 세상에 등장함으로 세련되고 우아한 HTMl이 구현되게 되였다. 물런 CSS가 등장하기 전에도 font태그나 strong태그, 또는 u태그로 글자의 크기를 조절하고, 색을 입히고, 볼드체를 만든다거나, 밑줄을 긋는 기능이 있기는 했지만, CSS는 그것을 넘어선 더 큰 다채로움을 HTML에게 부여하였다. 이에 대한 이야기는 다음 글에서 이어가보도록 하자.

author. EDWIN
date. 2023/01/25

profile
Edwin
신학전공자의 개발자 도전기!!
이전 포스트

#01 개발자 이직을 꿈꾸며..

다음 포스트

#03 CSS 언어란?

0개의 댓글