'IT' 카테고리의 글 목록 (3 Page)

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

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

<select 속성="속성 값">

<option value="값" [속성="속성 값"]> 내용1 </option>

. . .

</select>

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

속성	설명
size	화면에 표시될 드롭다운 메뉴의 항목 개수를 지정한다.
multiple	브라우저 화면에 여러 개의 옵션이 함께 표시되면서 Ctrl키를 누른 상태로 드롭다운메뉴에 있는 여러 항목을 선택할 수 있다.

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

속성	설명
value	옵션을 선택했을 때 서버로 넘겨질 값을 지정한다.
selected	화면에 표시될 때 기본으로 선택되어 있는 옵션을 지정한다.

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

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

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

<input type="text" list="데이터 목록 id">

<datalist id="데이터 목록 id">

<option> . . . . . </option>

. . .

</datalist>

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

속성	설명
value	사용자가 레이블을 선택했을 때 서버로 넘겨질 값을 지정한다.
label	사용자를 위해 브라우저에 표시할 레이블이다. 따로 지정하지 않을 경우, value 값을 레이블로 사용한다.

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

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

<textarea [속성="속성 값"]> 내용 </textarea>

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

속성	설명
name	다른 폼 요소와 구분하기 위해 텍스트 영역의 이름을 지정한다.
cols	텍스트 영역의 가로 너비를 문자 단위로 지정한다.
rows	텍스트 영역의 세로 길이를 줄 단위로 지정한다. 지정한 숫자보다 줄 개수가 많아지면 스크롤 막대가 생긴다.

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

저작자표시 비영리 변경금지

'IT > HTML' 카테고리의 다른 글

HTML5 시맨틱 태그 (0)	2017.04.20
[HTML 입문] 기타 폼 요소 (0)	2017.03.28
[HTML 입문] <input> 태그 (0)	2017.03.24
[HTML 입문] 폼을 만드는 기본적인 태그 (0)	2017.03.23
[HTML 입문] 링크 관련 태그 (0)	2017.03.22

<input> 태그란?

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

<input type="유형" [속성="속성 값"]>

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

<input type="text" id="sname" autofocus placeholder="공백없이 입력하세요">

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

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

<input> 태그의 type 속성에서 사용 가능한 유형

유형	설명
hidden	사용자에게는 보이지 않지만 서버로 넘겨지는 값을 가진다.
text	한 줄짜리 텍스트를 입력할 수 있는 텍스트 상자를 만든다.
search	검색 상자를 만든다.
tel	전화번호 입력 필드를 만든다.
url	URL 주소를 입력할 수 있는 필드를 만든다.
email	메일 주소를 입력할 수 있는 필드를 만든다.
passweord	비밀번호를 입력할 수 있는 필드를 만든다.
datetime	국제 표준시(URC>로 설정된 날짜와 시간을 넣는다.
datetime-local	사용자가 있는 지역을 기준으로 날짜와 시간을 넣는다.
date	사용자 지역을 기준으로 날짜(연, 월, 일)를 넣는다.
month	사용자 지역을 기준으로 날짜(연, 월)를 넣는다.
week	사용자 지역을 기준으로 날짜(연, 주)를 넣는다.
time	사용자 니역을 기준으로 시간을 넣는다.
number	숫자를 조절할 수 있는 화살표를 만든다.
range	숫자를 조절할 수 있는 슬라이드 막대를 만든다.
color	색상표를 넣는다.
checkbox	주어진 항목에서 2개 이상 선택 가능한 체크박스를 만든다.
radio	주어진 항목에서 1개만 선택할 수 있는 라디오 버튼을 만든다.
file	파일을 첨부할 수 있는 버튼을 만든다.
submit	서버 전송 버튼을 만든다.
image	submit 버튼 대신 사용할 이미지를 넣는다.
reset	리셋 버튼을 만든다.
button	버튼을 만든다.

<input> 태그의 다양한 속성

속성	설명
autofocus	페이지를 불러오자마자 원하는 폼의 요소에 입력 커서를 표시할 수 있다.
placeholder	입력란에 힌트 내용을 표시할 수 있다.
readonly	사용자에게 내용을 보여 주기만 하고 입력은 할 수 없게 한다.
required	필수적으로 입력해야 하는 필드를 지정할 수 있다.
min, max	해당 필드의 최솟값과 최댓값을 지정한다.
step	허용된 범위 내의 숫자의 일정한 간격을 가리킨다.
size	한 줄짜리 텍스트와 관련된 필드에서 화면에 몇 글자까지 보이게 할 지 지정한다.
maxlength	사용자가 최대 몇 글자까지 입력할 수 있는지 지정한다.
minlength	사용자가 최소 몇 글자 이상을 입력해야 하는지 지정한다.
formaction	실행할 프로그램을 연결한다. type="submit"이나 type="image"일 때 사용할 수 있다.
formenctype	서버로 폼을 전송했을 때 폼 데이터를 어떤 방식으로 해석할 것인지 지정한다. type="submit"이나 type="image"일 때 사용할 수 있다.
formmethod	서버로 폼을 전송하는 방식을 지정한다. 이미 <form> 태그 안에서 지정한 방식이 있어도 그 방식 은 무시된다.
formnovalidate	서버로 전송할 때 폼 데이터가 유효(validate)한지 여부를 표시할 수 있다.
formtarget	폼 데이터를 서버로 전송한 후 서버의 응답을 어디에 표시할 것인지 타깃을 지정한다.
height, width	type="image"일 때 이미지의 너비와 높이를 지정한다.
list	<datalist>에 미리 정의해 놓은 옵션 값을 <input> 안에 나열해 보여준다.
multiple	type="email"이나 type="file"일 때 두개 이상의 값을 입력한다. <input> 태그 안에 속성 이름만 표 시하면 된다.

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

저작자표시 비영리 변경금지

'IT > HTML' 카테고리의 다른 글

[HTML 입문] 기타 폼 요소 (0)	2017.03.28
[HTML 입문] 여러 데이터를 나열하는 태그 (0)	2017.03.27
[HTML 입문] 폼을 만드는 기본적인 태그 (0)	2017.03.23
[HTML 입문] 링크 관련 태그 (0)	2017.03.22
[HTML 입문] 이미지 관련 태그 (0)	2017.03.22

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

<form [속성="속성 값"]> 여러 폼 요소 </form>

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

속성	설명
method	사용자가 입력한 내용들을 서버 쪽 프로그램으로 어떻게 넘겨줄 지 지정한다.
	속성 값	get - 주소 표시줄에 사용자가 입력한 내용이 그대로 드러난다. 글자 수가 제한적이다. (256~4096byte)
		post - 사용자가 입력한 내용이 드러나지 않는다.
name	여러 개의 <form> 태그가 있을 경우, 폼들을 구분하기 위해 폼의 이름을 지정한다.
action	<form> 태그 안의 내용들을 처리해 줄 서버 상의 프로그램을 지정한다.
target	<action> 태그에서 지정한 스크립트 파일을 현재 탭이 아닌 다른 위치에 열도록 지정한다.
autocomplete	자동 완성 기능. 기본 값은 "on"이다.

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

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

<label [속성="속성 값"]> 레이블 <input ...> </label>

<label for="id이름">

<input id="id이름" [속성="속성 값"]>

</label>

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

<h3>수강 분야(다수 선택 가능)</h3> /* <label> 태그 사용안함 */
        <ul>
            <li>
                <input type="checkbox" value="grm">문법
            </li>
            <li>
                <input type="checkbox" value="wr">작문
            </li>
            <li>
                <input type="checkbox" value="rd">독해
            </li>
        </ul>
        <h3>수강 과목(1과목만 선택 가능)</h3> /* <label> 태그 사용 */
        <ul>
            <li>
                <label><input type="radio" name="subject" value="eng">영어회화</label>
            </li>
            <li>
                <label><input type="radio" name="subject" value="ch">중국어회화</label>
            </li>
            <li>                
                <label><input type="radio" name="subject" value="jp">일어회화</label>
            </li>
        </ul>

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

<fieldset>
            <legend>개인 정보</legend>
            <ul>
                <li>
                    <label for="name">이름</label>
                    <input type="text" id="name">
                </li>
                <li>
                    <label for="mail">메일 주소</label>
                    <input type="text" id="mail">
                </li>
            </ul>
        </fieldset>     

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

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

저작자표시 비영리 변경금지

'IT > HTML' 카테고리의 다른 글

[HTML 입문] 여러 데이터를 나열하는 태그 (0)	2017.03.27
[HTML 입문] <input> 태그 (0)	2017.03.24
[HTML 입문] 링크 관련 태그 (0)	2017.03.22
[HTML 입문] 이미지 관련 태그 (0)	2017.03.22
[HTML 입문] 텍스트 관련 태그 ② (0)	2017.03.21

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

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

<a href="링크할 주소" [속성="속성 값"]> 텍스트 </a>

<a href="링크할 주소" [속성="속성 값"]><img src="이미지 파일 경로"> </a>

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

속성	설명
href	링크한 문서나 사이트의 주소를 입력한다.
target	링크한 내용이 표시될 위치(현재 탭 또는 새 탭)를 지정한다.
download	링크한 문서를 다운로드한다.
rel	현재 문서와 링크한 문서의 관계를 알려준다.
hreflang	링크한 문서의 언어를 지정한다.
type	링크한 문서의 파일 유형을 알려준다.

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

속성 값	설명
_blank	링크 내용이 새 탭에서 열린다.
_self	target 속성의 기본 값으로 현재 탭에서 열린다.
_parent	프레임을 사용 했을 때 링크 내용을 부모 프레임에 표시한다.
_top	프레임을 사용 했을 때 프레임에서 벗어나 링크 내용을 전체 화면에 표시한다.

2. 앵커 기능

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

<태그 id="앵커 이름"> 텍스트 또는 이미지 </태그>

<a href="#앵커 이름"> 텍스트 또는 이미지 </a>

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

<ul id="menu">
        <li><a href="#content1">메뉴1</a></li>
        <li><a href="#content2">메뉴2</a></li>
        <li><a href="#content3">메뉴3</a></li>
    </ul>
    <h2 id="content1">내용1</h2>
    <p>웹 문서가 너무 길 경우 … 합니다. </p>
    <p><a href="#menu">[메뉴로]</a></p>
    <h2 id="content2">내용2</h2>
    <p>웹 문서가 너무 길 경우 … 합니다. </p>
    <p><a href="#menu">[메뉴로]</a></p>
    <h2 id="content3">내용3</h2>
    <p>웹 문서가 너무 길 경우 … 합니다. </p>
    <p><a href="#menu">[메뉴로]</a></p>

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

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

<map name="맵 이름">

<area>

… …

</map>

<img src="이미지 파일" usemap="#맵 이름">

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

속성	설명
alt	대체 텍스트를 지정한다.
coords	링크로 사용할 영역을 시작 좌표와 끝 좌표를 이용해 지정한다.
download	링크 문서를 다운로드한다.
href	링크 문서나 사이트의 경로를 지정한다.
media	링크 문서나 사이트를 어떤 미디어에 최적화시킬지 정한다.
rel	현재 문서와 링크 문서 사이의 관계를 지정한다.	속성 값	lternate, bookmark, helf, license, next, nofollow, noreferer, prefetch, prev, search, tag
shape	링크로 사용할 영역의 형태를 지정한다.		default, rect, circle, poly
target	링크를 표시할 대상을 지정한다.		_blank, _parent, _self, _top, 프레임 이름
type	링크 문서의 미디어 유형을 지정한다.

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

저작자표시 비영리 변경금지

'IT > HTML' 카테고리의 다른 글

[HTML 입문] <input> 태그 (0)	2017.03.24
[HTML 입문] 폼을 만드는 기본적인 태그 (0)	2017.03.23
[HTML 입문] 이미지 관련 태그 (0)	2017.03.22
[HTML 입문] 텍스트 관련 태그 ② (0)	2017.03.21
[HTML 입문] 텍스트 관련 태그 ① (0)	2017.03.20

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

<img src="경로" [속성="값"]>

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

- 하위 폴더를 나타낼 때는 '/' 기호를 사용합니다.

- 상위 폴더를 나타낼 때는 '..' 기호를 사용합니다.

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

<img src="home.jpg" alt="홈으로 가기">

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

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

<h1>사려니 숲길</h1>
    <img src="images/road.jpg" alt="사려니 숲길">
    <img src="images/road.jpg" width="250" height="90" alt="사려니 숲길">

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

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

<figure>
        <img src="images/oreum-1.jpg" alt="용눈이 오름">
        <figcaption>완만하고 부드러운 용눈이 오름</figcaption>
    </figure>

<figure> 태그로 캡션을 달 대상을 묶고 캡션은 <figcaption> 태그로 묶습니다.

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

저작자표시 비영리 변경금지

'IT > HTML' 카테고리의 다른 글

[HTML 입문] 폼을 만드는 기본적인 태그 (0)	2017.03.23
[HTML 입문] 링크 관련 태그 (0)	2017.03.22
[HTML 입문] 텍스트 관련 태그 ② (0)	2017.03.21
[HTML 입문] 텍스트 관련 태그 ① (0)	2017.03.20
[HTML 입문] 웹 문서에서 특수 기호 사용하기 (0)	2017.03.20

목록과 관련된 태그

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

<ul>

<li> 텍스트 </li>

…

</ul>

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

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

<ol>

<li> 텍스트 </li>

…

</ol>

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

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

속성 값	설명
1	숫자(기본값>
A	영문 대문자
a	영문 소문자
i	로마숫자 소문자
I	로마숫자 대문자

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

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

- 여러 항목이 나열될 때 </li> 태그를 생략해도 됩니다.

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

<dl>

<dt> 제목 </dt>

<dd> 설명 </dd>

…

</dl>

표와 관련된 태그

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

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

2. <tr> 태그 - 행

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

4. <th> 태그 - 제목 셀

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

5. colspan 속성 - 열 합치기

<td colspan="합칠 열의 개수"> 텍스트 </td>

<th colspan="합칠 열의 개수"> 텍스트 </th>

6. rowspan 속성 - 행 합치기

<td rowspan="합칠 열의 개수"> 텍스트 </td>

<th rowspan="합칠 열의 개수"> 텍스트 </th>

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

<caption> 표 제목 </caption>

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

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

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

<p id="summary">다음 표는 HTMl5를 지원하는 모던(Modern Browser)를 정리한 것입니다. 최신 버전일수록 HTML5를 좀더 많이 지원하기 때문에 최신 버전을 다운로드하는 것이 좋습니다. </p>
    <table border="1" aria-describedby="summary">

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

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

<thead>

<tr> … </tr>

</thead>

<tbody>

<tr> … </tr>

</tbody>

<tfoot>

<tr> … </tr>

</tfoot>

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

- HTML5에서는 <tfoot> 태그를 <tbody> 태그 앞이나 뒤 어디든 써도 상관없다.

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

<col>

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

<colgroup>

<col>

…

</colgroup>

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

- <col> 태그와 <colgroup> 태그는 <caption> 태그 뒤와 <tr>, <td> 태그 전에 사용해야 한다.

- <colgroup> 태그 안에 있는 <col> 태그를 비롯해 단독으로 사용한 <col> 태그의 개수와 표의 열의 개수가 같아야 한다.

기타 텍스트 관련 태그

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

<p><b><abbr title="Internet of Things">IoT</abbr></b>란 각종 사물에 센서와 통신 기능을 내장해 인터넷에 연결하는 기술을 의미한다.</p>

2. <cite> 태그 - 웹문서나 포스트에서 참고 내용 표시

<p>내가 경험한 가장 흥미진진한 일은 누군가를 만나는 일이다-영화, <cite>'비포선셋' </cite> 중</p>

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

<pre><code> function savetheLocal(){.....}</code></pre>

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

<p>웹 화면을 다시 불러오려면 <kbd>F5</kbd>키를 누릅니다</p>

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

<p>가격 : 13,000원 <small>(부가세 별도)</small></p>

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

<p>무르이 화학식은 <b>H<sub>2</sub>0</b>다</p>

7. <sup> 태그 - 위 첨자

<p>E = mc<sup>2</sup> </p>

8. <s> 태그 - 취소선

<p><s>34,000원</s><strong>19,000원</strong></p>

9. <u> 태그 - 밑줄

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

저작자표시 비영리 변경금지

'IT > HTML' 카테고리의 다른 글

[HTML 입문] 링크 관련 태그 (0)	2017.03.22
[HTML 입문] 이미지 관련 태그 (0)	2017.03.22
[HTML 입문] 텍스트 관련 태그 ① (0)	2017.03.20
[HTML 입문] 웹 문서에서 특수 기호 사용하기 (0)	2017.03.20
[HTML 입문] HTML 문서 기본 구조 (0)	2017.03.18

텍스트를 블록으로 묶어 처리하는 태그

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

<hn> 제목 </hn>

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

2. <p> 태그 - 단락

<p> 텍스트 </p>

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

3. <br> 태그 - 줄바꿈

<br>

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

4. <blockquote> 태그 - 인용문

<blockquote> 인용 내용 </blockquote>

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

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

<pre> 텍스트 </pre>

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

텍스트를 한 줄로 표시하는 태그

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

<strong> 굴게 강조할 텍스트 </strong>

<b> 굵게 표시할 텍스트 </b>

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

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

<i> 이탤릭체로 표시할 텍스트 </i>

<em> 이탤릭체로 강조할 텍스트 </em>

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

<q> 인용 내용 </q>

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

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

<mark> 텍스트 </mark>

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

<span> 텍스트 </span>

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

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

<ruby> 텍스트 <rt> 주석 </rt> </ruby>

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

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

저작자표시 비영리 변경금지

'IT > HTML' 카테고리의 다른 글

[HTML 입문] 이미지 관련 태그 (0)	2017.03.22
[HTML 입문] 텍스트 관련 태그 ② (0)	2017.03.21
[HTML 입문] 웹 문서에서 특수 기호 사용하기 (0)	2017.03.20
[HTML 입문] HTML 문서 기본 구조 (0)	2017.03.18
[HTML 입문] 웹 브라우저와 웹 편집기 (0)	2017.03.17

HTMl 소스에서 공백이나 괄호 같은 문자들을 소스 기호로 인식하지 않고 그대로 화면에 표시하려면 특수 기호를 사용해야 합니다.

화면 표시	특수 기호
&	$amp;
(공백 한 칸)
<	<
>	>
"	"
\|	\|
(	(
)	)
,	,
-	-
'	´

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

저작자표시 비영리 변경금지

'IT > HTML' 카테고리의 다른 글

[HTML 입문] 텍스트 관련 태그 ② (0)	2017.03.21
[HTML 입문] 텍스트 관련 태그 ① (0)	2017.03.20
[HTML 입문] HTML 문서 기본 구조 (0)	2017.03.18
[HTML 입문] 웹 브라우저와 웹 편집기 (0)	2017.03.17
[HTML 입문] HTML은 무엇일까요? (0)	2017.03.17

HTML 문서는 일반 문서와 달리 정해진 형식에 맞추어 내용을 입력해야 합니다. 소스가 길든 짧든 HTML 문서에는 반드시 필요한 모든 구조가 포함되어 있습니다. 아래의 예제를 통해 HTML 문서의 기본 구조를 살펴보겠습니다.

1. <!doctype> - 문서 유형을 지정하는 선언문

<!doctype html>

현재 문서가 HTML5 언어로 작성된 웹 문서라고 알려주는 것입니다. HTML에서는 대소문자 구별이 없지만 doctype를 좀 더 강조하기 위해 <!DOCTYPE html>처럼 대문자로 사용하기도 합니다.

2. <html> 태그 - 웹 문서 시작을 알리는 태그

<html lang="ko">

실제 문서 정보와 내용이 시작되고 끝나는 것을 표시하는 태그입니다. <html> 태그에서는 lang이라는 속성을 사용해 문서에서 사용할 언어를 지정할 수 있습니다.

코드	de	en	fr	ja	ko	zh
언어	독일어	영어	프랑스어	일본어	한국어	중국어

<html> 태그와 </html> 태그 사이에는 문서 정보를 지정하는 <head> 태그와 실제 화면에 보이는 문서 내용을 입력하는 <body> 태그가 포함됩니다.

3. <head> 태그 - 브라우저에게 정보를 제공하는 태그

웹 브라우저 화면에는 보이지 않지만 웹 브라우저가 알아야 할 정보들은 모두 <head> 부분에 입력합니다. 문서에서 사용할 외부 파일들도 이곳에서 링크합니다. 문서 정보를 표시하기 위해 사용할 수 있는 주요 태그들은 다음과 같습니다.

<title>문서 제목</title>

- <title> 태그에서 지정하는 내용은 웹 브라우저의 제목 표시줄에 표시됩니다.

<meta charset="utf-8">

- <meta> 태그는 화면에 글자를 표시하는 문자 인코딩 방법을 비롯해 웹 문서 키워드 등을 지정할 수 있습니다.

- HTML5에서는 한글과 영문을 비롯해 모든 언어를 표시할 수 있는 utf-8방식을 사용합니다.

<meta name="description" content="여기에 사이트에 대한 짧은 설명을 입력합니다">

- <meta> 태그를 이용해 문서에 대한 간단한 설명을 지정할 수 있습니다.

4. <body> 태그 - 실제 브라우저에 표시될 내용

<body> 태그와 </body> 태그 사이에 실제 브라우저에 표시될 내용을 입력합니다. 대부분의 태그가 <body> 태그와 </body> 태그 사이에서 사용하는 태그들입니다.

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

저작자표시 비영리 변경금지

'IT > HTML' 카테고리의 다른 글

[HTML 입문] 텍스트 관련 태그 ② (0)	2017.03.21
[HTML 입문] 텍스트 관련 태그 ① (0)	2017.03.20
[HTML 입문] 웹 문서에서 특수 기호 사용하기 (0)	2017.03.20
[HTML 입문] 웹 브라우저와 웹 편집기 (0)	2017.03.17
[HTML 입문] HTML은 무엇일까요? (0)	2017.03.17

일반 문서와 웹 문서는 큰 차이점이 있습니다. 일반 문서는 내용을 입력하는 프로그램과 그 내용을 확인하는 프로그램이 같지만 웹 문서는 문서를 작성하는 프로그램과 그 내용을 보는 프로그램이 서로 다릅니다. 웹 문서를 작성하는 프로그램을 '웹 편집기(Web Editor)'라고 하고 웹 문서를 보는 프로그램을 '웹 브라우저(Web Browser)'라고 합니다.

웹 브라우저의 종류

웹 브라우저는 웹 사이트를 둘러볼 때 사용하거나 웹 편집기로 작성한 웹 문서를 화면에 표시해 주는 프로그램입니다. 현재 사용할 수 있는 웹 브라우저의 종류는 매우 다양합니다.

브라우저 이름	제조업체	특징
크롬	구글	빠른 업데이트를 통해 HTML5표준에 가장 발 빠르게 대응하고 있어 최근 가장 많이 사용되고 있는 브라우저입니다. HTML5 지원 정도가 555점 만점에서 525점으로 가장 높은 점수를 받고 있습니다.
파이어폭스	모질라	일반 사용자들보다 개발자들이 주로 사용하는 웹 브라우저로 개발 도구와 부가 기능들이 뛰어납니다.
인터넷 익스플로러	마이크로소프트	HTML5에 대한 지원은 취약하지만 아직까지도 국내에서 많이 사용되고 있는 브라우저입니다. 윈도우 7 서비스팩1부터 지원하기 시작한 IE11을 마지막으로 더 이상 개발되지 않고 있습니다.
엣지	마이크로소프트	마이크로소프트에서 인터넷 익스플로러 대신 HTML5를 지원하기 위해 새로 개발해 윈도우 10에서 기본으로 사용하는 웹 브라우저입니다.

이 외에도 애플의 '사파리'나 오페라 재단의 '오페라' 브라우저도 있습니다.

웹 편집기의 종류

웹 문서를 만들 때 HTML 태그를 입력하는 프로그램을 '웹 편집기'라고 합니다. 웹 편집기에 HTML 소스를 입력하면 그 내용을 웹 브라우저로 읽는데 이 웹 편집기는 메모장이든 전문 편집기 프로그램이든 텍스트를 입력할 수 있는 프로그램이면 모두 가능합니다.

편집기 종류	특징
텍스트 편집기	윈도우의 메모장이나 매킨토시의 텍스트 편집기, 한글, 워드를 이용해서 웹 문서를 작성할 수 있습니다. 사용자가 태그를 일일이 직접 입력해야 하기 때문에 HTML 태그와 속성을 알고 있어야 하고 입력할 때 오류가 발생하기 쉽습니다.
웹 편집기	웹을 위한 전용 편집기입니다. 태그와 속성, 일반 텍스트 등을 서로 다른 색으로 표시해주어 소스를 읽기 쉽고 편집기에 따라 태그나 속성의 일부만 입력하더라도 전체를 완성해주기 때문에 오타로 인한 오류를 줄일 수 있습니다. 윈도우용 - 노트패드++(무료), 에디트 플러스(유료) 맥용 - 텍스트메이트(무료), 코다(유료) 공용 - 드림위버(유료), 비주얼 스튜디오 코드(무료)
통합개발환경(IDE)	웹 IDE는 웹 편집기의 편리함과 함께 사용자에게 필요한 기발 환경을 한꺼번에 구축하고 사용할 수 있게 해줍니다. 웹 IDE 프로그램에는 비주얼 스튜디오 2015(무료, 유료), 웹스톰(무료), 서브라임 텍스트(무료, 유료) 등이 있습니다.
웹 기반 코드 편집기	웹 상에서 소스 코드를 입력하고 결과를 바로 확인할 수 있는 편집기입니다. 웹 코딩을 위한 시스템 환경을 만들거나 별도의 편집기 프로그램을 이용하지 않고 브라우저 화면에 코드를 입력하고 결과를 볼 수 있는 장점이 있습니다. 팀 작업을 하면서 여러 팀원들과 소스를 공유하는 데도 유용하고 초보자의 코딩 연습용으로도 좋습니다. Codepen(http://codepen.io/)이나 JSFiddle(https://jsfiddle.net/), Liveweave(http://liveweave.com/), Plunker(http://plnkr.co/) 등이 있습니다.

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

저작자표시 비영리 변경금지

'IT > HTML' 카테고리의 다른 글

[HTML 입문] 텍스트 관련 태그 ② (0)	2017.03.21
[HTML 입문] 텍스트 관련 태그 ① (0)	2017.03.20
[HTML 입문] 웹 문서에서 특수 기호 사용하기 (0)	2017.03.20
[HTML 입문] HTML 문서 기본 구조 (0)	2017.03.18
[HTML 입문] HTML은 무엇일까요? (0)	2017.03.17

Dev Thread

IT

[HTML 입문] 여러 데이터를 나열하는 태그

'IT > HTML' 카테고리의 다른 글

[HTML 입문] <input> 태그

'IT > HTML' 카테고리의 다른 글

[HTML 입문] 폼을 만드는 기본적인 태그

'IT > HTML' 카테고리의 다른 글

[HTML 입문] 링크 관련 태그

'IT > HTML' 카테고리의 다른 글

[HTML 입문] 이미지 관련 태그

'IT > HTML' 카테고리의 다른 글

[HTML 입문] 텍스트 관련 태그 ②

'IT > HTML' 카테고리의 다른 글

[HTML 입문] 텍스트 관련 태그 ①

'IT > HTML' 카테고리의 다른 글

[HTML 입문] 웹 문서에서 특수 기호 사용하기

'IT > HTML' 카테고리의 다른 글

[HTML 입문] HTML 문서 기본 구조

'IT > HTML' 카테고리의 다른 글

[HTML 입문] 웹 브라우저와 웹 편집기

'IT > HTML' 카테고리의 다른 글

+ Recent posts

티스토리툴바