HTML 요소별 문법 태그 정리

 

 

 

 

 

HTML은 Hyper Text Markup Language의 약자다. 이 때의 Hyper Text는 문서 너머와 연결을 해 주는 텍스트, 즉 링크를 의미하고 Markup Language는 정보를 구조적/ 계층적으로 표현하는 언어란 뜻이다. 이번 포스트에서는 HTML에서 쓰이는 문법, 태그를 정리한다. <해당 포스트는 비전공자를 위한 HTML/CSS 강의 기반으로 작성됐다>

 

 

 

제목Heading 태그

 

<h1>역사</h1>
<h2>개발</h2>
1980년, 유럽 입자 물리 연구소(CERN)의 계약자였었던 물리학자 팀 버너스리가 HTML의 원형인 인콰이어를 제안했다.
... 이하 생략
<h2>최초 규격</h2>
HTML 최초의 일반 공개 설명은 1991년 말에 버너스리가 처음으로 인터넷에서 문서를 "HTML 태그"(HTML tag)로 부르면서 시작됐다.
... 이하 생략

 

문서 내 제목을 표현할 때 사용하는 태그다. 제목의 레벨에 따라서 <h1> ~ <h6>로 구분된다. <h1>은 보통 페이지를 대표하는 큰 제목으로 사용되며, 숫자가 올라갈 수록 낮은 수준의 소제목을 나타내는 데 사용한다. 제목 태그를 사용하면 일반 텍스트보다 크기와 굵기가 더 강조돼 보이는데, 이는 브라우저가 기본적으로 제목 태그에 제공하는 스타일이다.

 

 

단락Paragraph 태그

 

<h1>역사</h1>
<h2>개발</h2>
<p>
    1980년, 유럽 입자 물리 연구소(CERN)의 계약자였었던 물리학자 팀 버너스리가 HTML의 원형인 인콰이어를 제안했다.
    ... 이하 생략
</p>
<h2>최초 규격</h2>
<p>
    HTML 최초의 일반 공개 설명은 1991년 말에 버너스리가 처음으로 인터넷에서 문서를 "HTML 태그"(HTML tag)로 부르면서 시작됐다.
    ... 이하 생략
</p>

단락 태그를 사용해 제목 외 본문 내용의 계층을 구분해 줄 수 있다. 위 예제는 제목 태그 예제와 동일한 형태로 노출되지만, 이전 예제보다 의미에 맞게 짜인 마크업 구조라고 볼 수 있겠다.
 

 

개행Linebreak 태그

 

1980년, <br>
유럽 입자 물리 연구소(CERN)의 계약자였었던 물리학자 팀 버너스리가 <br>
HTML의 원형인 인콰이어를 제안했다. <br>

 

HTML은 두 칸 이상의 공백 및 개행을 무시하기 때문에 여러 칸을 스페이스 바로 개행하더라도 화면에 나타나지는 않는다. 이럴 때 쓰이는 태그가 <br>이다. 개행하고자 하는 데서 <br>을 선언하면 개행된다. <br>은 개행 역할 외 내용이 존재하지 않는 빈 태그이며 별도로 닫기 태그를 사용해주지 않아도 된다.

 

 

 

텍스트 표현 태그

 

<b> : bold. 글자를 굵게 표현하는 태그.

<i> : italic. 글자를 기울여 표현하는 태그.

<u> : underline. 글자의 밑줄을 표현하는 태그.

<s> : strike. 글자의 중간선을 표현하는 태그.

 

상기 태그들은 텍스트를 변형해 보여주기 위한 태그고, 글씨의 강조 역할에는 기여하지 못 한다. 단, HTML5 버전에서는 <i> 태그만 기술적인 용어/ 외국어 문구/ 소설 속 인물의 생각 등의 표현을 할 때 사용된다는 의미가 추가됐다. 다른 표현형 태그에 의미를 부여하고 싶다면 아래 시멘틱 마크업 태그를 참고하자.

 

 

 

시멘틱 마크업Semantic Markup

 

<b>굵은</b> vs <strong>중요한</strong>
<i>기울어진</i> vs <em>강조하는</em>
<u>밑줄친</u> vs <ins>새롭게 추가된</ins>
<s>중간선이 있는</s> vs <del>삭제된</del>

 

 

 

앵커anchor 태그

 

<a href="http://www.naver.com/" target="_blank">네이버</a>

 

앵커 태그는 링크를 만드는 태그다. 앵커 태그의 기본형은 위와 같다. 링크로 이동할 목적지인 hrefhypertext reference URL 값을 선언해 줘야 작동하며, target 속성을 사용하면 링크된 리소스를 어디에 표시할지도 지정할 수 있다. target 속성에 _self를 사용하면 현재 창에, _blank를 사용하면 새로운 창에 각각 링크 페이지를 표시할 수 있으며, 별도로 지정해주지 않으면 자동으로 _self값으로, 현재 화면에 출력한다. 

이때 <a>에 들어가는 href 값을 꼭 외부 페이지로 설정할 필요는 없다. 페이지 내부의 특정 요소로 초점을 두고 이동할 수도 있으며 이를 내부 링크라고 한다. 이 때는 href 속성값에 #을 쓰고 그 뒤에 페이지 내에서 이동하고자 하는 요소의 id 속성값을 적으면 된다.

<a href="#some-element-id">회사 소개로 이동하기</a>
<h1 id="some-element-id">회사 소개</h1>

보통 페이지에 내용이 많아 스크롤이 길어질 경우에, 빠르게 화면 최상단으로 이동시키기 위해 내부 링크를 사용한다. 웹페이지 화면 하단에 있는 'top', '맨 위로 이동하기' 버튼이 이에 해당한다.

 

 

 

컨테이너Container 태그

 

<div>
    <span>Lorem</span> ipsum dolor sit.
</div>

 

컨테이너 태그는 요소들을 묶기 위해 사용하는 태그다. 스타일을 주거나 서버에 보내는 데이터를 담기 위한 용도로 이런 컨테이너 태그들이 많이 사용된다. 대표적인 컨테이너 태그는 <div>, <span>이다. 이 때 <div>는 블록 레벨(부모 요소의 가로 영역에 맞게 꽉 채워져 표현되는 요소)이고 <span>은 인라인 레벨(하나의 라인 안에서 자신의 내용만큼만 박스를 만드는 요소)이다.

 

 

 

리스트List 태그

 

리스트는 일련된 항목들이 나열된 것들을 의미한다. 콘텐츠가 많은 포털이나 검색 엔진같은 사이트에는 분야나 항목으로 구분할 것이 많으므로 리스트가 자주 사용된다. 리스트 태그는 순서가 없는 리스트를 표현할 때 사용되는 <ul> 태그, 순서가 있는 리스트를 표현할 때 사용되는 <ol> 태그, 용어와 정의를 표현할 때 사용되는 <dl> 태그로 구분한다.

 

<ul> 
    <li> 콩나물</li> 
    <li> 파</li> 
    <li> 국  간장</li> 
    ... 
</ul>

 

<ol>
    <li>냄비에 국물용 멸치를 넣고 한소끔 끓여 멸치 육수를 7컵(1,400ml) 만든다.</li>
    <li>콩나물을 넣고 뚜껑을 덮어 콩나물이 익을 때까지 끓인다.</li>
    <li>뚜껑을 열고 대파, 마늘, 고춧가루를 넣고 끓인다.</li>
    ...
</ol>

 

<dl>
    <dt>리플리 증후군</dt>
    <dd>허구의 세계를 진실이라 믿고 거짓된 말과 행동을 상습적으로 반복하는 반사회적 성격장애를 뜻하는 용어</dd>
    <dt>피그말리온 효과</dt>
    <dd>타인의 기대나 관심으로 인하여 능률이 오르거나 결과가 좋아지는 현상</dd>
    <dt>언더독 효과</dt>
    <dd>사람들이 약자라고 믿는 주체를 응원하게 되는 현상</dd>
</dl>

 

 

 

이미지image 태그

 

<img src="./images/pizza.png" alt="피자">

 

<img>는 문서에 이미지를 삽입하는 태그로, 닫는 태그가 없는 빈 태그다. 이미지 태그 역시 두 가지의 필수 속성값을 가지는데, 이미지의 경로를 나타내 주는 속성인 src와 이미지의 대체 텍스트를 나타내는 속성인 alt다.

 

별개로 width/ height로 크기값을 지정해줄 수 있으며 (값의 단위는 지정해주지 않아도 자동으로 픽셀 단위로 계산된다.) 이미지의 크기가 고정적이라면 미리 크기를 선언해 두는 것이 성능적인 측면에서 좋다. 두 개 모두 선언하지 않으면 원본 크기대로 노출되며 둘 중 하나만 선언하면 나머지 한 값의 비율대로 자동 변경돼 나온다. 반대로 둘 다 선언하면 원본 크기의 비율과 상관 없이 원하는 비율로 이미지를 끼워 넣을 수 있다.

src에 들어가는 이미지의 경로는 상대경로와 절대경로로 각각 지정해 줄 수 있다. 이 때 상대경로는 현재 웹 페이지를 기준으로(./) 상대적인 이미지의 위치를 나타내는 경로고 절대경로는 실제 그 이미지가 위치한 곳의 전체 경로다.

 

<!-- 상대경로 -->
<img src="./images/pizza.png" alt="피자">

<!-- 절대경로 -->
<img src="C:/users/document/images/pizza.png" alt="피자">
<img src="http://www.naver.com/pizza.png" alt="피자">

 

 

표table 태그

 

표는 셀(내용이 들어가는 하나의 칸)로 이루어져 있으며, 가로 방향을 행row, 세로 방향을 열column이라 부른다. 하나의 테이블은 하나 이상의 <tr>로 이루어져 있으며, <tr>은 셀을 나타내는 <th>, <td>를 자식으로 가지게 된다. 표를 구성할 때는 위에서 밑으로, 좌측에서 우측으로 작성하면 된다.

<table> : 표를 나타내는 태그.
<tr> : 행을 나타내는 태그.
<th> : 제목 셀을 나타내는 태그.
<td> : 셀을 나타내는 태그.
 

<table>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
    </tr>
    <tr>
        <td>9</td>
        <td>10</td>
        <td>11</td>
        <td>12</td>
    </tr>
    <tr>
        <td>13</td>
        <td>14</td>
        <td>15</td>
        <td>16</td>
    </tr>
</table>

 

위는 1부터 16까지를 4행 4열로 표현한 표를 나타내는 코드다. 브라우저 기준으로 코드를 작성해 확인하면 테두리가 없어 표가 어색해 보일 수 있는데, 이는 브라우저에서 제공하는 테이블의 기본 스타일에 테두리가 없기 때문이다. 확인을 위해 아래 CSS 코드를 <head> 안에 입력하면 테두리가 나타나는 걸 확인할 수 있다.

 

<style>
    th, td { border: 1px solid; }
</style>

 

표가 복잡해지면 표를 해석해서 음성으로 전달해야 하는 스크린 리더기와 같은 보조 기기를 통해서는 표의 내용을 이해하는 것이 어려워질 것이다. 따라서, 표를 구조적으로 파악하기 위해 도움이 되는 태그를 사용해야 한다.

<caption> : 표의 제목을 나타내는 태그.
<thead> : 제목 행을 그룹화하는 태그.
<tfoot> : 바닥 행을 그룹화하는 태그.
<tbody> : 본문 행을 그룹화하는 태그.

<table>

    <caption>Monthly Savings</caption>
    <thead>
        <tr>
            <th>Month</th>
            
<th>Savings</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            
<td>January</td>
            <td>$100</td>
        </tr>
        <tr>
            
<td>February</td>
            <td>$80</td>
        </tr>

    </tbody>
    <tfoot>
        <tr>
            
<td>Sum</td>
            <td>$180</td>
        </tr>
    </tfoot>

</table>

 

 

 

폼form 태그

 

폼 요소는 서버에 데이터를 전달하기 위한 요소고, <input>은 대표적인 폼 요소다. <input> 자체는 내용 없는 빈 요소이나 후술할 type 속성을 통해 여러 종류의 입력 양식으로 나타나게 된다.

 

<input type="text" placeholder="ㅇㅇㅇ">

 

아이디, 이름, 주소, 전화번호 등 단순한 텍스트를 입력할 때 사용하는 텍스트 타입. 텍스트 타입에는 placeholder 속성이 존재하는데, 이 속성을 이용하면 사용자가 입력하기 전에 미리 화면에 값을 노출해, 사용자가 입력해야 할 값의 양식을 표현해줄 수 있다.

 

<input type="password">

 

암호와 같이 공개할 수 없는 내용을 입력할 때 사용하는 패스워드 타입. 이 타입을 사용하면 화면엔 텍스트 타입과 같게 나타나지만 사용자가 실제로 입력할 땐 값을 노출하지 않는다.
 

<input type="radio" name="gender"> 남자
<input type="radio" name="gender"> 여자

라디오 버튼을 만들 때 사용하는 라디오 타입. 라디오 버튼은 중복 선택이 불가능하며 하나의 항목만을 선택해야 한다.

<input type="checkbox" name="hobby"> 등산
<input type="checkbox" name="hobby"> 독서
<input type="checkbox" name="hobby"> 운동

 
체크박스 버튼을 만들 때 사용되는 체크박스 타입. 체크박스는 중복 선택이 가능하다.

 

<input type="file">

 

파일을 서버에 올릴 때 사용하는 파일 타입. 브라우저에 따라 표현되는 형태는 조금씩 다르지만, 모두 같은 역할을 한다.

 

<form action="./test.html">
    메시지: <input type="text" name="message"><br>
    <input type="submit">
    <input type="reset">
    <input type="image" src="http://placehold.it/50x50?text=click" alt="click" width="50" height="50">
    <input type="button" value="버튼">
</form>

클릭 가능한 버튼을 만드는 submit, reset, image, button 타입.
 
submit : form의 값을 전송하는 버튼.
reset : form의 값을 초기화하는 버튼.
image : 이미지를 삽입할 수 있는 버튼. (submit과 동작이 동일함.)
button : 아무 기능이 없는 버튼.
 

<select>
    <option>서울</option>
    <option>경기</option>
    <option>강원</option>
    ...
</select>

 

<select>는 선택 목록 상자 또는 콤보박스라고도 한다. 몇 개의 선택지를 리스트 형태로 노출하고 그 중 하나를 선택할 수 있게 하는 태그다. 기본적으로 하나를 선택하는 형태로 만들어지지만 multiple 속성을 사용하면 다중 선택도 가능하다. <select> 내부의 <option>으로 각 항목을 표현해줄 수 있으며 <option> 내부에 selected 속성을 표현해주면 시작부터 선택된 항목을 구현할 수 있다.

 

<textarea rows="5" cols="30">
    ...
</textarea>

<textarea>는 한 줄만 입력할 수 있는 input의 텍스트 타입과 달리 여러 줄의 텍스트를 입력할 때 사용한다. cols와 rows 속성을 각각 줄 수 있으며 이때 cols는 가로 크기를, rows는 세로 크기를 조절하는 속성이다.

<button type="submit|reset|button">ㅇㅇㅇ</button>

 

<button>은 버튼을 만들 때 사용할 수 있으며 submit, reset, button 세 가지의 타입을 가진다. 세 버튼의 용도는 위에서 표기한 input의 동일 이름 타입과 같은 기능을 가진다. 다만, 빈 태그가 아니며 내용을 안에 직접 넣을 수 있어 input 대비 조금 더 자유로운 스타일을 표현할 수 있다는 장점이 있다.
 

<label for="name">이름</label>: <input type="text" id="name"><br>
<label for="nickname">이름</label>: <input type="text" id="nickname"><br>
<label for="address">이름</label>: <input type="text" id="address"><br>

 

<label>은 form 내부의 이름과 요소를 명시적으로 연결시키기 위해 사용한다. 사용을 위해서는 form 요소의 id 속성값과 <label>의 for 속성값을 같게 적어줘야 하며, <label>을 사용하면 클릭했을 경우 해당 <form> 요소를 클릭한 것처럼 동작한다. 사용성, 접근성 측면으로 중요한 역할을 하므로 반드시 써 주는 것이 좋다.

<fieldset>
    <legend>기본 정보</legend>
    ... 폼 요소들 ...
</fieldset>
<fieldset>
    <legend>부가 정보</legend>
    ... 폼 요소들 ...
</fieldset>

<fieldset>, <legend>는 form 요소를 구조화하기 위해 필요한 태그다. 여러 태그를 함께 쓸 때, <fieldset>의 바로 밑에는 반드시 자식 열인 <legend>가 위치해야 한다.

<fieldset> : 여러 개의 폼 요소를 그룹화하여 구조적으로 만들기 위해 사용.
<legend> : 폼 요소의 제목으로 <fieldset> 내부에 작성.

 

<form action="" method="">
    <fieldset>
        <legend>기본 정보</legend>
        ... 폼 요소들 ...
    </fieldset>
    <fieldset>
        <legend>부가 정보</legend>
        ... 폼 요소들 ...
    </fieldset>
</form>

 

<form>은 form 요소들을 감싸는 태그로 데이터를 묶어서 실제 서버로 전송해 주는 역할을 한다. <fieldset>으로 구조화돼 있다면 <fieldset>도 함께 감싸 줘야 한다. <form>에는 2가지 속성이 있는데, 데이터를 처리하는 서버의 주소를 표기하는  action 속성과 데이터를 전송하는 방식을 지정하는 method 속성이다. 이때 method 속성값에는 get/ post 두 가지 방식이 존재하며, get 방식은 데이터가 전송될 때 주소창에 파라미터 형태로 붙어 데이터가 노출되는 형식이며 post는 데이터가 전송될 때 노출되지 않는 형식이다.