Dev Thread

1.  <object> 태그 - 외부 파일 삽입하기

웹 브라우저에서 직접 재생할 수 없는 자바 애플릿이나 PDF 파일, 플래시 무비 같은 콘텐츠를 웹 문서 안에 포함시기키 위해 사용합니다.

<img> 태그에서 src 속성을 반드시 사용해야 하듯이 특정 외부 파일을 가져와 표시할 것인지 여부를 알려주기 위해 최소한 data나 type 속성 둘 중 하나를 반드시 사용해야 합니다.

2. <embed> 태그 - 외부 파일 삽입하기

<embed> 태그는 닫는 태그가 없고 주로 <object> 태그를 지원하지 않는 이전 브라우저에서 사용됩니다.

3. <audio> 태그 - 오디오 파일 삽입하기

HTML5에서 배경 음악이나 효과음 등 오디오를 삽입할 때는 <audio> 태그를 사용합니다. 일반적으로 대부분의 브라우저에서는 mp3 파일을 삽입합니다.

<audio> 태그에서 사용할 수 있는 속성은 다음과 같습니다.

4. <video> 태그 - 비디오 파일 삽입하기

<video> 태극에서 사용할 수 있는 속성은 <audio> 태그와 거의 일치한다.

5. <source> 태그 - 여러 미디어 파일 한꺼번에 지정하기

<source> 태그에는 미디어 파일의 경로를 지정하는 src 속성과 미디어 파일의 형식을 알려주는 type 속성을 사용합니다. 간단히 type 속성만 사용할 수도 있고 codecs 속성을 이용해 코덱까지 함께 표시할 수도 있습니다.

6. <track> 태그  - 자막 삽입하기

<출처> HTML5+CSS3 웹 표준의 정석

1. <header>태그 - 머리말 지정

사이트 전체의 헤더는 주로 페이지 맨 위쪽이나 왼쪽에 삽입하며 헤더의 내용으로는 주로 <form> 태그를 사용해 검색창을 넣거나 <nav> 태그를 사용해 사이트 메뉴를 넣습니다.

2. <nav> 태그 - 문서를 연결하는 내비게이션 링크

동일한 사이트 안의 문서나 다른 사이트의 문서로 연결하는 링크 모음을 나타냅니다. 푸터에 있는 사이트 링크 모음 부분에도 많이 사용됩니다.

3. <section> 태그 - 주제별 콘텐츠 영역

문맥 흐름 중에서 콘텐츠를 주제별로 묶을 때 사용하며 그 안에서 섹션 제목을 나타내는 <h1>~<h6> 제목 태그가 함께 사용됩니다.

4. <article> 태그 - 콘텐츠 내용

<section> 태그와 비슷해 혼동하기 쉬운 <article> 태그는 웹 상의 실제 내용을 넣습니다. 태그를 적용한 부분을 떼어 내 독립적으로 배포하거나 재사용하더라도 완전히 하나의 콘텐츠가 된다면 <article> 태그를 쓰면 됩니다.

5. <aside> 태그 - 본문 이외의 내용 표시

본문 내용 외에 주변에 표시되는 기타 내용들을 나타냅니다.

6. <iframe> 태그 - 외부 문서 삽입

일반적으로 웹 문서 안에 내용을 직접 입력하지만 다른 외부 문서를 삽입할 수도 있습니다. 이러한 인라인 프레임을 삽입하는 태그는 <iframe> 태그입니다.

<iframe> 태그에서는 여러 속성을 이용해 원하는 형태로 표시할 수 있습니다.

7. <footer> 태그 - 제작 정보와 저작권 정보 표시

사이트 제작자의 연락처 정보와 저작권 정보를 표시합니다.

8. <address> 태그 - 사이트 제작자 정보, 연락처 정보 표시

<address> 태그는 주로 <footer> 태그 안에 사용되는데 웹 페이지 제작자의 이름이나 제작자의 웹 페이지 또는 피드백을 위한 연락처 정보를 넣는 데 사용됩니다. 그리고 웹 사이트와 관련된 우편 주소도 <address> 태그 안에 포합시킵니다. 하지만 단순히 우편 주소를 표기할 용도라면 <p> 태그를 사용해 표시합니다.

<출처> HTML5+CSS3 웹 표준의 정석

1. <button> 태그 - 버튼 넣기

<input> 태그말고도 <buttone> 태그를 이용해도 폼을 전송하거나 리셋하기 위한 버튼을 삽입할 수 있습니다.

<button> 태그를 사용하면 화면 낭독기에서 이 부분에는 버튼이 있다는 것을 정확히 전달할 수 있고, CSS를 이용해 원하는 형태로 꾸밀 수도 있습니다.

2. <output> 태그 - 계산 결과

3. <progress> 태그 - 진행 상태

<progress> 태그에서 사용할 수 있는 속성은 다음과 같습니다.

4. <meter> 태그 - 값이 차지하는 크기 표시

<meter> 태그에서 사용할 수 있는 속성은 다음과 같습니다.

<출처> Do it! HTML5+CSS3 웹 표준의 정석

1. <select>, <optgroup>, <optiong> 태그 - 드롭다운 목록

공간을 최소화하면서 여러 옵션 중에서 선택하도록 하고 싶을 때 드롭다운 목록을 사용합니다.

'<select> 태그'를 사용해 만든 드롭다운 목록은 기본적으로 한 가지 옵션이 표시되고 화살표를 클릭해 나머지 옵션을 살펴본 후 필요한 한가지 항목을 선택할 수 있는 데 <select> 태그에서 사용하는 속성은 다음과 같습니다.

드롭다운 목록에 표시되는 옵션들은 '<option> 태그'를 이용해 지정하는데 <option> 태그에 사용하는 속성은 다음과 같습니다.

드롭다운 목록에서 여러 항목들을 몇 가지 그룹으로 묶어야 할 경우, '<optgroup> 태그'를 사용할 수 있는데 label속성을 사용해 그룹의 제목을 붙입니다.

2. <datalist> 태그, <option> 태그

<select> 태그 대신 '<datalist> 태그'를 사용하면 데이터 목록 중에서 값을 선택하도록 만들 수 있습니다. 즉 텍스트 필드에 직접 값을 입력하는 것이 아니라 데이터 목록에 제시한 값 중에서 선택하면 그 값이 자동으로 입력되는 것입니다.

'<option> 태그'를 사용해 각 데이터 옵션을 표시하고 value 속성과 label 속성을 사용할 수 있습니다.

3. <textarea> 태그 - 여러 줄 입력하는 텍스트 영역

게시판에서 게시물을 입력하거나 회원가입 양식에서 사용자 약관을 표시할 때 자주 사용합니다.

<textarea> 태그에서 사용하는 속성은 다음과 같습니다.

<출처> Do it! HTML5+CSS3 웹 표준의 정석

<input> 태그는 사용자가 내용을 입력하는 부분을 만들 때 사용합니다. 

<input> 태그로 만들 수 있는 폼 요소가 상당히 많은데 그것은 <input> 태그 안에 있는 type 속성을 이용해 구분합니다.

폼을 만들다 보면 똑같은 폼 요소가 여러번 사용되는데, 이를 구분하기 위해 사용하는 것이 id 속성입니다. id를 지정해 놓으면 <label> 태그를 이용해 캡션을 붙일 수도 있고 CSS를 이용해 각 요소마다 다른 형태로 꾸밀 수도 있습니다.

<출처> Do it! HTML5+CSS3 웹 표준의 정석

1. <form> 태그 - 폼 만들기

<form> 태그에서 사용하는 속성들은 다음과 같습니다.

2. <label> 태그 - 폼 요소에 레이블 붙이기

레이블(label)이란 입력 창 옆에 붙여 놓은 텍스트를 말합니다.

<label> 태그를 이용해 라디오 버튼이나 체크박스에 택스트(label)을 연결해 놓으면 텍스트만 터치해도 라디오 버튼이나 체크박스가 선택되어 사용이 훨씬 쉽습니다.

3. <fieldset>, <legend> 태그 - 폼 요소 그룹으로 묶기

<fildset> 태그는 폼들을 하나의 영역으로 묶고 외곽선을 그려 주고 <legend> 태그는 <fieldset> 태그로 묶은 그룹에 제목을 붙여 줍니다.

<출처> Do it! HTML5+CSS3 웹 표준의 정석

1. <a> 태그 - 링크 만들기

텍스트와 함께 사용하면 텍스트 링크가 되고 이미지와 함께 사용하면 이미지 링크가 됩니다.

<a> 태그 안에서 사용할 수 있는 주요 속성은 다음과 같습니다.

<a> 태그의 주요 속성 중 target 속성을 사용하면 현재 화면 뿐만 아니라 새로운 화면에서도 링크를 열 수 있는데 target 속성에서 사용할 수 있는 값은 다음과 같습니다.

2. 앵커 기능

웹 문섯가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고 그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을 '앵커(anchor)'라고 합니다.

앵커를 사용하려면 우선 이동하고 싶은 위치마다 id 속성을 사용해 앵커를 만들고 각각 다른 이름을 지정합니다. 그리고 <a> 태그의 href 속성을 사용해 링크합니다. 단, 앵커 이름 앞에 #을 붙여 앵커를 표시합니다.

3. <map> 태그, <area> 태그, usemap 속성 - 이미지 맵 지정

하나의 이미지에 여러 개의 링크를 만드는 것을 '이미지 맵'이라고 합니다.

이미지 맵으로 사용할 이미지에 영역을 표시할 때는 <area> 태그를 사용하는 데 <area> 태그에서 사용할 수 있는 속성은 다음과 같습니다.

<출처> Do it! HTML5+CSS3 웹 표준의 정석

1. <img> 태그 - 이미지 삽입

ⓛ src 속성 - 이미지 파일 경로

② alt 속성 - 이미지를 설명해 주는 대체 텍스트

alt 속성의 텍스트를 화면 낭독기가 시각장애인에게 읽어 줄 수 있고 이미지를 제대로 표시할 수 없는 상황에서 이미지 자리에 alt 속성에 쓴 내용이 표시되어 어떤 이미지가 사용되었는 지 짐작할 수 있습니다.

③ width, height 속성 - 이미지 크기 조절

width 속성과 height 속성을 사용하지 않으면 원본 이미지 크기 그대로 브라우저 화면에 표시됩니다. 웹 서버에서 다운로드하는 이미지 파일의 용량은 그대로 두면서 이미지의 크기를 조절할 수 있습니다.

2. <figure>, <figcaption> 태그 - 이미지에 캡션 달기

<출처> Do it! HTML5+CSS3 웹 표준의 정석

1. <ul> 태그, <li> 태그 - 순서 없는 목록

각 항목 앞에 작은 원이나 사각형 같은 불릿(bullet>이 붙습니다. CSS의 list-style-type 속성을 이용해 불릿을 수정 할 수 있습니다.

2. <ol> 태그, <li> 태그 - 순서 있는 목록

<ol> 태그에는 순서와 관련된 몇 가지 속성이 있습니다.

- type 속성 : 숫자의 종류를 다양하게 조절할 수 있다. 

- start 속성 : 중간 번호부터 시작할 수 있다.

- reserved 속성 - 역순으로 표시한다.

3. <dl>, <dt>, <dd> 태그 - 설명 목록

1. <table> 태그 - 표 전체 윤곽

기본적으로 표는 테두리 없이 표시되고 셀 구분을 쉽게 하려면 <table> 태그 안에 border 속성을 사용해 테두리를 표시

2. <tr> 태그 - 행

3. <td> 태그 - 각 행마다 들어갈 셀

4. <th> 태그 - 제목 셀

해당 셀에 들어가는 내용을 셀의 중앙에 배치하고 굵게 표시합니다.

5. colspan 속성 - 열 합치기

6. rowspan 속성 - 행 합치기

7. <caption> 태그, <figcaption> 태그 - 표 제목

<caption> 태그는 <table> 태그 바로 다음에 사용하고 표 제목은 표의 위 쪽 중앙에 표시됩니다. <caption> 안에는 다른 태그를 사용해 제목을 여러 줄로 표시하거나 텍스트를 꾸밀 수도 있습니다.

<figcaption> 태그는 figure와 caption의 합성어로 <figure> 태그로 감싼 후 <figcaption> 태그를 이용해 제목이나 설명 글을 입력합니다. <caption> 태그와 달리 중앙에 표시되지 않으며, <table> 태그보다 앞에 사용하면 표 위에 제목이 표시되고 </table> 태그 다음에 사용하면 표 아래에 제목이 표시됩니다.

8. aria-describedby 속성 - 표에 대한 설명

화면 낭독기에서 표를 읽어줄 때 표 설명을 별도의 문장으로 작성한 후 <table> 태그 안에 aria-describedby 속을 추가해 연결하면 표를 이해하는 데 도움이 됩니다.

9. <thead>, <tbody>, <tfoot> 태그 - 표 구조 정의

table의 t와 제목 부분(head), 본문(body), 요약 부분(foot)이란 말이 합쳐진 태그들입니다. 표의 구조를 정의하면 시각장애인들도 화면 낭독기를 통해 표의 구조를 쉽게 이해할 수 있습니다. 그리고 표의 본문이 길어 한 화면을 넘어갈 경우, 자바스크립트를 이용해 <thead> 부분과 <tfoot> 부분은 표의 위아래에 고정하고 <tbody> 부분만 스크롤되도록 만들 수 있습니다.

9. <col>, <colgroup> 태그 - 여러 열에 스타일 지정

<col> 태그는 한 열에 있는 모든 셀에 같은 스타일을 적용할 때 사용합니다. 닫는 태그는 없습니다.

<colgroup> 태그는 여러 열을 묶어 스타일을 적용할 수 있는 데 <colgroup> 태그 안에 묶는 열의 개수만큼 <col> 태그를 넣어야 합니다. 

1. <abbr> 태그 - 약자 표시

3. <code> 태그 - 컴퓨터 인식을 위한 소스 코드

4. <kbd> 태그 - 키보드 입력이나 음성 명령 같은 사용자 입력 내용

5. <small> 태그 - 텍스트를 작게 표시

6. <sub> 태그 - 아래 첨자

7. <sup> 태그 - 위 첨자

8. <s> 태그 - 취소선

9. <u> 태그 -  밑줄

<출처> Do It! HTML5+CSS33 웹 표준의 정석

1. <hn> 태그  - 제목 표시

제목 텍스트는 일반 텍스트보다 크고 진하게 표시됩니다. 제목 크기에 따라 <h1>~<h6> 태그까지 사용할 수 있고 숫자가 작을수록 제목의 글씨가 큽니다.

2. <p> 태그 - 단락

텍스트를 표시할 때 가장 많이 사용하는 태그로 <p> 태그로 표시하는 텍스트 단락은 </p> 태그를 만날 때까지 줄바꿈 없이 텍스트를 한 줄로 표시합니다. 만약 텍스트 줄이 브라우저 창의 너비보다 길어질 경우, 줄이 자동으로 바뀝니다.

3. <br> 태그 - 줄바꿈

텍스트 단락에서 줄바꿈을 하더라도 웹 브라우저 창에는 줄바꿈 없이 한 줄로 표시됩니다. 웹 브라우저 창에서 줄바꿈을 하려면 줄 바꿀 위치에 <br> 태그를 사용합니다. <br> 태그는 닫는 태그가 없습니다.

4. <blockquote> 태그 - 인용문

다른 사이트의 글을 인용할 때 <blockquote> 태그를 사용합니다. 다른 텍스트보다 안으로 들여 써지므로 다른 텍스트와 구별됩니다. cite 속성을 사용해 인용 사이트 주소를 표시할 수도 있습니다.

5. <pre> 태그 - 입력하는 그대로 화면에 표시

소스에 표시한 공백이 브라우저에 그대로 표시됩니다. <code>, <samp>, <kbd> 같은 태그를 사용해 프로그램 소스를 표시할 때 사용됩니다.

1. <strong> 태그, <b> 태그 - 굵게 표시

중요한 내용이어서 강조해야 할 때는 <strong> 태그를 사용하고 단순히 굴게 표시할 때는 <b> 태그를 사용합니다. 눈으로 보기에는 차이가 느꺼지지 않지만 두 태그를 구분하는 이유는 화면 낭독기에서의 기능 때문입니다. <strong> 태그를 사용하면 그 부분이 강조되엇다고 화면 낭독기가 알려줍니다.

2. <em> 태그, <i> 태그 - 이탤릭체 표시

3. <q> 태그 - 인용 내용 표시

<blockquote> 태그는 인용 내용이 줄이 바뀌어 다른 내용과 구별되도록 들여 써지지만 <q> 태그는 줄바꿈 없이 다른 내용과 함께 한 줄로 표시되고 다른 내용과 구별되도록 따옴표를 붙여 표시합니다.

4. <mark> 태그 - 형광펜 효과

5. <span> 태그 - 줄바꿈 없이 영역 묶기

텍스트 단락 안에서 줄바꿈 없이 일부 텍스트만 묶어 스타일을 적용하려고 할 때 주로 사용합니다. 텍스트 단락을 통째로 묶을 때는 <span> 대신 <div> 태그를 사용합니다.

6. <ruby> 태그 - 동아시아 글자 표시

주로 동아시아 국가들의 글자들에 주석을 함께 표기하기 위해 사용됩니다.

<출처> Do it! HTML5+CSS3 웹 표준의 정석