HTML Tags

실무에서 주로 사용하는 HTML Elements

body 태그 안에 HTML Elements 를 작성하게 되며, 본문 영역에 사용되는 태그들이 웹 서비스를 나타내는 구조에 해당합니다.

HTML 태그의 종류는 다음과 같은 것이 있습니다.

Headings	h1~h6
Paragraphs	p
Lists	dl, ul, ol
Links	a, image-map
Images	img
Tables	table, tr, th, td, caption, col
Forms	input, select, textarea
address	address
structure	div

Headings – h1~h6

헤딩 태그는 문서의 주요 타이틀에 사용하며, 중요도가 높은 제목일 수록 낮은 hx 값을 갖습니다.

다시 말해, 대제목, 중제목, 소제목, 소소제목, 소소소제목... 으로 구성할 수 있습니다.

html

<h1>개인정보 취급방침 안내</h1>
<h2>수집하는 개인정보의 항목 및 수집방법</h2>
<h3> 가. 수집하는 개인정보의 항목</h3> 

Paragraphs – p

문장의 단락을 표현하기 위해 사용하며, 새로운 문장을 사용해야 하는 경우 p 태그를 새로 선언하도록 합니다.

주로 헤딩 태그와 함께 쓰이곤 합니다.

html

<p>이 사이트는 개인적인 목적으로 만들었습니다.</p>
<p>방문자는 방명록을 남겨주세요.</p>

Lists – dl(definition list), ul(unordered list), ol(ordered list)

정의형 목록, 순서없는 목록, 순서(번호형)있는 목록(리스트)를 작성하는 경우에 사용합니다.

정의형 목론에는 dt(definition-list term), dd(definition-list description) 태그를 자식으로 가지고 있습니다.

그리고 ul, ol 은 li(listed item)을 자식으로 가지고 있습니다.

html

<dl>
    <dt>명사</dt>
    <dd>사물(事物)의 이름을 나타내는 낱말 갈래</dd>
</dl>

<h3>상비약 목록</h3>
<ul>
    <li>감기약</li>
    <li>소독약</li>
</ul>

<h3>실시간 급상승 검색어 순위</h3>
<ol>
    <li>아이유</li>
    <li>에프터스쿨</li>
</ol>

Links – a, image map

링크 요소를 표현하기 위해 사용합니다. anchor hypertext reference="url"

html

<a href=“#” target=“_blank”>페이스북</a>

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
    <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
    <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
    <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>

Images - img

전경 이미지를 표현하기 위해 사용하고 src(source) 는 의미 그대로 자원이 있는 곳의 위치를 정의하는 것입니다.

그리고 alt(alternate text)는 대체텍스트로 이미지를 대신할(표현할) 글을 작성하는 것입니다.

이는 웹 접근성을 위해 반드시 필요하고 의미없는 이미지인 경우에는 빈 칸, 즉 비워둘 수 있습니다.

하지만 alt 속성을 생략할 수는 없습니다.

html

<img src="smiley.gif" width="42" height="42" alt="Smiley face"> 

스크린 리더기(화면 낭독기)는 센스리더, 조스, NVDA 등이 있으며 국내에서는 주로 센스리더기를 사용합니다.

MAC 은 Voice Over 가 탑재되어 있습니다.

Tables – table, tr, th, td, caption, col 등..

표 데이터를 표현하기 위해 사용합니다.

html

<table summary="">
    <caption></caption>
    <col width=“20”><col>
    <thead>
        <tr>
            <td></td>
            <td></td>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td></td>
            <td></td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

• tr(table row)
• th(table heading) : 헤더 정보를 갖는 셀
• td(table data) : 데이터 정보를 갖는 셀
• 테이블의 제목을 caption 으로 제공해야함.
  caption은 table 요소 바로 다음에 선언함.
  테이블의 제목이 UI상 표현하지 않아야 한다면 blind 스타일을 적용하여 감출 수 있음.
• summary는 표를 한눈에 알아보기 어려운 환경에서 표의 구조나 전체 내용을 요약하기 위한 용도임.
  표의 제목은 caption 으로 반드시 제공하며, summary는 필요에 따라 선택적으로 제공.
  테이블의 제목이 UI상 표현되지 않는다면 blind 스타일을 적용하여 감출 수 있음

div, span, em, strong

div(division,분할) 요소는 블록화된 영역을 나누기 위해 사용합니다.

span 요소는 짧은 영역을 뜻하는 단어로 인라인 요소간 디자인 표현을 위해 주로 사용합니다.

또한 p, div 태그 안에서 본문 중에 있는 서식을 정의하기도 합니다.

strong 요소는 강한 강조를 나타내는 글자를 표현하는 경우에 사용합니다.

em(emphasized text) 은 약한 강조를 즉, strong 보다 약한 강조의 의미를 나타냅니다.

html

<div>좌측 문단</div>
<div>우측 문단</div>

<span class=“ico_help”>도움말</span>

<strong>강한 강조의 의미</strong>

<em>약한 강조의 의미</em>

Forms – input, select, textarea, button

폼 요소들은 사용자 입력 양식을 표현하기 위해 사용합니다.

폼 요소는 웹 문서가 서로 상호작용을 할 수 있도록 하는 역할을 담당하며 form 태그는 폼(FORM)의 범위를 표시합니다.

폼은 사용자 입력을 위한 다양한 형식의 컨트롤(W3C는 입력필드, 버튼 등 폼을 구성하는 입력 요소를 컨트롤이라고 부름)로 구성되는 영역이며, 이 영역의 시작과 종료 지점은 form 요소에 의해 정의된다.

폼 요소는 블록 레벨 요소로서 문서 전체를 폼으로 지정하거나 한 문서 내에 여러 개의 폼을 지정할 수도 있습니다.

다시 말해, 사용자가 입력한 정보를 보내기 위한 그릇이라고 이해하면 됩니다.

html

<input type=“text”>

<select>
    <option>Seoul</option>
    <option>Incheon</option>
</select>

<textarea cols=“5” rows=“15”> </textarea>

<button type=“button”>도움말</button> 

html

<form method="get" action="http://www.example.com/addresscheck.html/">
    <fieldset>

    </fieldset>
</form>

• form 태그에는 해당 fieldset 요소가 속해 있는 폼 태그등을 지정한다.
• 이 속성을 지정하면 특정 form과 fieldset 요소의 관계를 명시적으로 연결할 수 있다.
• 이렇게 연결하면 브라우저는 두 요소 사이의 상호작용이 좀 더 쉽게 이루어질 수 있도록 도울 수 있습니다.
• fieldset 요소는 관련 있는 폼 필드 세트(form FIELD SET)를 표시한다.
• 폼 필드 세트는 폼 내에서 관련 컨트롤을 하나의 그룹으로 묶은 것을 말한다.
• 폼을 효과적으로 계층화시킬 수 있다.
• legend 요소를 함께 사용해야 한다.

action 속성은 실행 애플리케이션을 지정하는 것입니다.

실행 애플리케이션은 입력된 데이터를 처리하는 서버 또는 프로그램으로 이곳으로 데이터를 보내려면 브라우저가 전송 위치(URL)를 알아야 하며, 이를 위해 action 속성을 사용한다.

프론트엔드단에서는 action 에 대한 속성값을 모르더라도 속성값을 비워둔채 정의해 두도록 합니다.

method 에는 데이터 전송방식을 정의하는데 대개 개발자들이 정의하기 때문에 빈 값으로 작성해 두는 것이 일반적입니다.

데이터를 보내기 위한 방식으로 get 과 post 방식이 있습니다.

그래서 action 의 실제 경로를 알지 못하더라도 값을 비워두고 정의해 두도록 한다.

액션을 사용하지 않으면 문서 검사를 하는 validation 에서 오류가 나기 때문에 기본적으로 넣어서 사용한다라고 이해하면 좋습니다.

실제로 웹 서비스가 될 경우에는 두가지가 모두 사용됩니다.

method 속성은 HTTP 메소드(HTTP method)를 지정한다.

HTTP 메소드는 클라이언트와 서버 간 데이터를 주고받기 위한 방식을 의미하는데 주로 사용되는 방식은 GET과 POST 방식이다.

• GET 방식 : 입력된 데이터가 URL에 의해 전송되므로 암호화하지 않으면 URL만으로도 어떤 데이터를 입력했는지 알 수 있다.
  POST 방식보다 상대적으로 보안이 취약하고 전송할 수 있는 데이터도 제한적이다.
• POST 방식 : 입력된 데이터를 HTTP Body에 담아 전송하면서 서버측에서 데이터를 처리하는 방식이다.
  HTTP Body는 URL에 비해 더 많은 정보를 담을 수 있기 때문에 POST 방식은 GET 방식보다 더 많은 양의 데이터를 전송할 수 있으며 상대적으로 보안이 높은 편이다.

html

<legend>폼 그룹의 범례(폼의 제목) 사용하는 것을 권장(접근성)</legend>

• legend 요소는 fieldset 요소의 제목(LEGEND)을 표시한다.
• fieldset 에서 제어하는 것을이 어떤 성격의 콘텐츠인지 제목 형식으로 알려 주고 fieldset 요소 바로 뒤에 한번만 작성
• html 에서는 반드시 필드와 레전드 사용하도록 하고 xthml 은 선택적으로 사용하지만 접근성을 고려한다면 생략하지 말것

INPUT 요소

input 요소는 웹 페이지에서 입력 영역(INPUT field)을 표시합니다.

즉, 입력 영역은 데이터 입력이나 편집을 위한 컨트롤이 위치하는 곳이고, 입력 컨트롤의 종류는 type 속성에 의해 지정됩니다.

그래서 input 요소의 종류을 지정하는 속성값은 입력 컨트롤러의 종류를 나타내며, 이에 따라 지정된 입력 컨트롤의 형태가 만들어집니다.

몇몇 속성값들은 모바일에도 영향을 미쳐 편리한 키보드 자판을 출력해주곤 합니다.

html

<input type="text" name="" id="">

• type="text" : 속성값 text는 input 요소의 기본값으로 텍스트를 입력할 수 있는 텍스트 필드가 만들어진다.
• 텍스트 필드의 세로 크기는 정해져 있고 가로 크기만 설정할 수 있다.
• 크기는 글자 수를 기준으로 정해지며 기본 크기가 20이다.

html

<input type="submit" value="">

• type="submit" : 속성값 submit는 전송 버튼이 만들어진다.
• 전송 버튼은 폼을 서버로 보내는 역할을 수행할뿐 어떻게 어디로 보낼지는 form 요소에서 정한다.
• 버튼 이름은 value 속성에 의해 지정되는데, 이 속성을 지정하지 않으면 브라우저가 지정하는 이름이 표시된다.

html

<input type="reset" value="">

• type="reset" : 속성값 reset은 초기화 버튼이 만들어진다. 초기화는 폼에 입력된 값을 초기값으로 되돌린다.

html

<input type="button" value="">

• type="button" : 속성값 button은 푸시 버튼이 만들어진다.
• 다양한 용도로 사용되기에 기본 기능은 없으며 기능 실행을 위해서는 자바스크립트와 같은 클라이언트 사이드 스크립트가 필요하다.
• value 속성으로 입력된 텍스트는 버튼 이름이며, 이 이름은 실제 버튼 위에 나타난다.

html

<input type="button" value="">

• type="button" : 속성값 button은 푸시 버튼이 만들어진다.
• 다양한 용도로 사용되기에 기본 기능은 없으며 기능 실행을 위해서는 자바스크립트와 같은 클라이언트 사이드 스크립트가 필요하다.
• value 속성으로 입력된 텍스트는 버튼 이름이며, 이 이름은 실제 버튼 위에 나타난다.

html

<input type="password" name="" id="">

• type="password" : 속성값 password로 지정하면 패스워드 필드가 만들어진다.
• 화면 상에서 읽히지 않도록 별이나 원모양의 기호로 표시된다.

html

<input type="file" name="" id="">

• type="file" : 속성값을 file로 지정하면 파일 업로드 컨트롤이 만들어진다.
• 파일 업로드 컨트롤은 로컬 컴퓨터에 있는 파일을 선택하기 위한 컨트롤이며 파일명이 입력되는 텍스트 필드와 파일 탐색기를 호출하기 위한 버튼으로 구성된다.
• accept 속성을 사용하면 브라우저가 지정된 파일형식만 찾을 수 있도록 파일 업로드 컨트롤을 구성할 수도 있다.

html

<input type="checkbox" name="nation" value="korea" checked="checked">한국
<input type="checkbox" name="nation" value="japan">일본

• type="checkbox" : 속성값을 checkbox로 지정하면 체크박스가 만들어진다.
• 체크박스는 선택 여부를 확인하기 위한 입력 컨트롤이며 입력 상태는 선택과 미선택으로 구분된다.
• 체크박스는 중복 선택(multi-selection)을 위한 컨트롤이므로 여러 개의 체크박스로 구성할 수 있다.
• 이때 서로 관련있는 체크박스라는 사실을 브라우저에 알려주기 위해서는 name 속성이 필요하다.
• checkd 속성을 이용하면 선택된 상태가 된다.

html

<input type="radio" name="rdo" id=""> 고양이
<input type="radio" name="rdo" id=""> 강아지지

• type="radio" : 속성값을 radio로 지정하면 라디오 버튼이 만들어진다.(라디오 버튼의 유래 자동차의 라디오)
• 라디오 버튼은 체크박스와 마찬가지로 선택 여부를 확인하기 위한 컨트롤이다. 다만 중복 선택을 지원하지 않는 단일 선택만 이루어진다.
• 즉, 여러 항목중에 한 가지 항목을 선택할 때 사용하는데, 이를 위해서는 항목들이 서로 배타적이어야 한다.

그 이외에 html5에 추가된 속성으로 number, range, color, date, month, week, time, datetime 등이 있지만 브라우저 미지원으로 아직 사용률이 높지 않고 위의 태그들을 많이 사용되는 것이 일반적입니다.

새로운 것들이 나오면 그때마다 브라우저 지원여부와 프로젝트의 환경에 맞춰서 사용여부를 결정하여 사용하면 되고, 그때 검색해서 상황에 맞는 태그를 사용하면 된다.

레이블 요소

• label 요소는 컨트롤 레이블(LABEL)을 표시한다.
• 레이블은 항목이나 파일을 식별하기 위해 사용되는 제목이나 이름을 말한다.
• 시각적으로만 그 용도가 표현되므로 브라우저가 레이블과 컨트롤 사이의 관계를 알 수 있도록 label 요소를 사용해야 한다.

명시적인 레이블 & 암묵적인 레이블

<!-- 명시적인 label -->
<label for="userName">이름 : </label>
<input type="text" name="" id="userName" value="김재희">

<!-- 암묵적인 label -->
<label>암묵적인 레이블<input type="text" name=""></label>

for 속성

for 속성은 레이블과 관련된 컨트롤을 지정한다.

그리고 컨트롤에 레이블을 제공하는 방법은 크게 암시적 방법과 명시적 방법으로 나뉜다.

암시적 레이블 선언 방법

• 이 방법은 label 요소 내에 컨트롤을 둔다.
• 즉 label 요소 내에 있는 컨트롤은 굳이 밝히지 않아도 관련 있다고 보는 것이다.

명시적 레이블 선언 방법

• 이 방법은 for 속성을 이용하여 컨트롤의 id 값을 정확하게 지정한다.
• 즉 레이블이 어떤 컨트롤과 관련 있다는 사실을 명확하게 밝히는 것이다.
• 명확하게 밝힌다는 것은 기계적인 연결이 가능하다는 것을 의미한다.
• 이렇게 되면 브라우저는 사용자가 레이블을 클릭하더라도 관련된 컨트롤이 선택되도록 처리할 수 있고 레이블과 컨트롤이 서로 떨어져 있더라도 둘 사이의 관계를 손쉽게 연결할 수 있다.

명시적인 레이블과 암묵적인 레이블 함께 사용

<label for="member">
    <span>회원</span>
    <input type="text" name="" id="member">
</label>

이와같은 레이블 처리방식은 회원이란 텍스트가 레이블 텍스트 역할을 하면서 span 요소로 그룹화하여 이 요소에 독립적으로 스타일을 적용할 수 있으며 동시에 스크린 리더의 접근성도 향상되는 장점이 있습니다.

select

html

<select name="" id="">
    <option value="">html</option>
    <option value="">css</option>
    <option value="">javascript</option>
</select>

• 셀렉트박스, 콤보박스라고 불리고 여러 항목중에서 택일할 때 사용합니다.
• select 와 option 요소는 함께 사용된다.
• select 요소는 선택 컨트롤을, option 요소는 옵션 항목을 표시한다.
• 보통 공간에 대한 제약이 많은 경우에 사용하기도 하고 기획단에서 설계한다.
  아니면 라디오버튼으로 표현할 수 있다.
• 선택 컨트롤은 OPTION 요소를 선택하기 위한 컨트롤이며 옵션 리스트를 메뉴처럼 이용할 수 있도록 고안된 것인데 드롭다운 리스트와 비슷하다고 볼 수 있다.

option

• option 요소는 선택 항목(OPTION list)를 표시한다.
• 옵션 리스트는 사용자가 선택할 수 있는 항목들을 모아둔 것이다.
• 다른 요소를 포함할 수 없으며 텍스트만 포함할 수 있다.

selected="selected"

• selected 속성은 미리 선택된 옵션을 지정한다.
• 옵션 리스트는 일정한 기준에 따라 나열되어 있으며 기본적으로 첫 번째 옵션이 선택된 상태로 제공된다.
• 이러한 기본 선택을 바꾸고 싶다면 selected 속성을 지정하면 된다.

value

• value 속성은 서버로 전송되는 값을 지정한다.
• 이 속성을 지정하지 않으면 option 요소에 마크업된 텍스트가 서버로 전송된다.

size 속성

• size 속성은 선택 컨트롤의 크기(size)를 지정한다.
• 이 크기는 옵션이 노출되는 표시 영역의 크기를 의미한다.

html

<select>
    <optgroup label="Swedish Cars">
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
    </optgroup>
    <optgroup label="German Cars">
        <option value="mercedes">Mercedes</option>
        <option value="audi">Audi</option>
    </optgroup>
</select>

optgroup 요소

• optgroup 요소는 옵션 그룹(OPTion GROUP)을 표시한다.
• 옵션 그룹은 한 개 이상의 옵션이 모여서 만들어진 그룹을 의미한다.
• 옵션 개수가 많은 경우 비슷한 옵션을 묶어서 구성하면 편의성이 향상된다.
• optgroup 요소가 부모 요소, option 요소가 자식 요소로 구성된다.
• label 속성을 지정하면 옵션 그룹의 제목(label)이 생긴다.

html

<textarea name="" id="" cols="30" rows="10"></textarea>

• cols 속성은 세로 행에 입력될 수 있는 글자 수를 지정하고 글자수에 텍스트 영역의 넓이를 지정하는 것인데 기본값은 20입니다.
• 만약 20자를 넘게되면 텍스트 영역이 커지는 것이 아니라 스크롤바가 생기면서 원래 저장되었던 텍스트 영역의 넓이는 그대로 유지된다.
• maxlength 속성은 사용자가 입력할 수 있는 최대 글자 수를 지정한다.
• 이 속성이 지정되면 최대 글자 수가 초과한 때에는 더이상 글자가 입력되지 않는다.
• 사용자는 글자수 제한 여부를 알 수 없으므로 텍스트 영역 주변에 최대 글자 수를 알려주는 문구를 제공하는 것이 좋다.

iframe(아이프레임)

html

<iframe src="http://www.daum.net" width="500" height="400"></iframe>
<iframe src="http://www.daum.net" frameborder="0" scrolling="no"></iframe>

• 아이프레임은 페이지안의 페이지라고 볼 수 있다.
• 페이지내에 다른 콘텐츠를 삽입하는 경우에 많이 사용한다.
• 아이프레임은 권장히자는 않지만 개발자,개발환경에 따라 많이 사용하는 프로젝트도 있습니다.
• 다른 서비스 페이지라서 그 디자인을 커스텀할 수 없다.(보안상)
• 만약 같은 도메인내에서는 가능하다.

address

html

<address>
    서울시 강남구 모노라움 5층 <br>
    <span>전화: </span> 02-1234-5678 <span>FAX: </span> 02-1234-5678
    <a href="mailto:webmaster@mail.com">webmaster@mail.com</a> <br>
    Copyright Monoraum ALL RIGHTS RESERVED.
</address>

• 연락처(이메일 주소포함) 및 제작자 저작권(copyright)정보등을 표시할 때 사용한다.
• 대개 문서의 끝에 위치한다.
• address 요소 안에는 인라인 요소와 텍스트를 포함할 수 있지만 블록 요소는 포함할 수 없다.
  (트랜지션의 경우에는 인라인 요소나 p 요소를 사용할 수 있다고 하지만 가능하면 권장하지 않습니다)
• 단순한 집 주소의 의미가 아니라 웹사이트 작성자 정보로써 문서의 공개일,갱신,연락처,이메일 주소등의
• 웹페이지의 정보를 사용자에게 제공하려고 할때 사용하는 요소입니다.

html

<hr>
<br>

• horizontal rule : 수평선
• 마크업 구조상 구분을 짓기 위해 사용하며 정보의 의미를 담고 있는 것이 아니라 CSS가 없는 환경에서는 정보들을 구분하기가 어렵기 때문에 정보 구분을 위해서 사용하는게 일반적입니다.
• break 의 약어이며 줄(개행)을 바꾸지만, 새로운 문단이 시작되지는 않는다.

HTML를 브라우저가 해석하는 순서

html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="sample.css">
    <script src="example.js"></script>
</head>
<body>
    <img src="/images/sample.png" alt="">

    <ul>
        <li>HTML을 파싱</li>
        <li>외부 CSS파일 및 외부 자바스크립트 파일을 로드</li>
        <li>자바스크립트가 전달된 시점에 실행</li>
        <li>DOM 트리의 구축 완료</li>
        <li>이미지 파일 및 플래시 등의 외부 리소스를 로드</li>
        <li>모두 완료</li>
    </ul>
</body>
</html>

Jaehee's WebClub