Notice

Recent Posts

Recent Comments

Link

« 2024/05 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

Tags more

Archives

Today

Total

관리 메뉴

Santos의 개발블로그

HTML5 요소(4) 본문

Language & Framework & Library/HTML5

HTML5 요소(4)

Santos 2020. 11. 5. 00:04

* HTML5요소(3)에서 다루지 못한 내용을 계속해서 다룹니다. HTML5요소(3)이 궁금하시다면 여기를 클릭해주세요.

가. select 요소

드롭다운 리스트를 만들 때 사용하는 것으로, 리스트에서 선택할 수 있는 옵션을 정의하기 위해서 select의 속성과 하위요소로서 option 요소를 사용한다.

<!DOCTYPE html>
<html >
    <head>
        <title>Wikitechy select  Tag</title>
    </head>
    <body>
        Select Tutorial:
        <select>
            <option value=”html”>WikitechyHTML</option>
            <option value=”css”>WikitechyCSS</option>
            <option value=”php”>WikitechyPHP</option>
        </select>
    </body>
</html>

1) select 요소의 속성

2) option 요소의 속성

- option 요소는 선택 목록에서 옵션을 정의하기 위해 select 요소와 datalist 요소의 하위 요소로만 사용된다.

- select 요소 내에는 optgroup 요소도 함께 사용될 수 있는데, 이는 드롭다운 리스트에서 연관된 항목들을 그룹핑하기 위해서 사용한다.

<!DOCTYPE html>
<html >
    <body>
        <select>
            <optgroup label="WEB DEVELOPMENT IN WIKITECHY">
                <option value="css">CSS</option>
                <option value="html">HTML</option>
            </optgroup>
            <optgroup label="PROGRAMMING TECHNOLOGY IN WIKITECHY">
                <option value="java">JAVA</option>
                <option value="c">C</option>
            </optgroup>
        </select>
    </body>
</html>

나. dataList 요소

dataList 요소는 input 요소의 텍스트 타입에 대한 옵션 목록을 지정하는 것으로, 지정한 텍스트 타입이 포커스를 받으면 미리 입력된 옵션이 드롭다운 형태로 표시된다.

<!DOCTYPE html>
<html >
    <head>
        <title>Wikitechy datalist Tag</title>
    </head>
    <body>
        <input list=”Wikitechy tutorials”>
        <datalist id=”Wikitechy tutorials”>
            <option value=”Wikitechy html”>
            <option value=”Wikitechy css”>
            <option value=”Wikitechy php”>
        </datalist>
     </body>
</html>

- input 요소와 dataList 요소를 연결하기 위해서 input 요소의 list 값과 datalist 요소의 id 속성을 동일한 값으로 지정해야 한다.

- dataList 요소 내의 각 옵션은 select 요소처럼 option 요소를 사용하면 된다.

다. fieldset 요소

fieldset 요소는 폼에서 사용되는 관련 요소들을 그룹핑할 때 사용된다.

<!DOCTYPE html>
<html >
    <body>
        <form>
            <fieldset>
                <legend>Wikitechy database</legend><br>
                Student Name: <input type="text"><br>
                Email:        <input type="text"><br>
                Date of birth:<input type="text"><br>
            </fieldset>
        </form>
    </body>
</html>

- 시각적인 효과를 위해서 관련 요소들을 포함하는 사각형의 테두리가 표시된다.

- fieldset 요소의 하위 요소로 legend 요소가 사용되며, 그룹이되는 관련 요소들에 대한 캡션을 표시할 때 사용하며 사각형 테두리 선상에 캡션이 표시된다.

라. label 요소

label 요소는 input 요소에 대한 레이블을 정의하는 것으로, 특별한 시각적인 효과는 없지만, 사용자의 마우스 사용성을 향상시키기 위한 태그이다.

<!DOCTYPE html>
<html >
    <head>
        <title>Wikitechy label tag</title>
    </head>
    <body>
        <h2>Wikitechy Tutorials</h2>
        <form>
            <input type="radio" name="tutorial" id="php">
            <label for="php">Wikitechy PHP<label><br>
            <input type="radio" name="tutorial" id="html">
            <label for="html">Wikitechy HTML <label><br>
            <input type="radio" name="tutorial" id="css">
            <label for="css">Wikitechy CSS </label><br><br>
            <input type="submit" value="Submit">
        </form>
    </body>
</html>

- label 요소를 사용한 경우 label 요소 내에 있는 텍스트와 폼 요소를 한단위로 묶기 때문에 텍스트를 클릭하면 원하는 input 요소로 자동 포커스가 된다.

- label 요소 내의 for의 값고 input 요소 내의 id의 값이 같아야 한다.

#2 적용의미가 변경된 요소

가. b 요소

주로 단어의 중요성을 표시할 때 사용되어 왔는데, HTML5 에서는 강조의 의미보다는 주목해야 할 단어를 단순히 진하게 표시하는 수단으로 사용된다.

나. i 요소

주로 텍스트를 기울어지게(이탤릭체) 표시함으로써 b 요소와 유사하게 강조 또는 중요성을 나타내는 용도로 사용되었다. 하지만 HTML5에서는 보통의 서술과 구분되는 다른 어조나 분위기를 갖는 텍스트를 표시하거나, 기술 용어, 다른 언어의 구문을 나타내는 용도로 사용한다.

다. cite 요소

주로 이탤릭체를 표시하여 인용을 나타내는 용도로 사용되었지만, HTML5에서는 작품(책, 노래, 영화, 그림, 조각 등)의 제목을 나타내는 용도로 사용한다.

라. hr 요소

주로 수평선을 표현하기 위해 사용되었다. 하지만 HTML5에서는 페이지 내에서 주제가 변경되어 콘텐츠를 구분하는 의미론적인 용도로 사용한다. hr 요소에서 사용되던 모든 속성은 CSS를 사용해서 표현하도록 HTML5에서 제거 되었다.

마. address 요소

기존 HTML에서는 이름, 이메일, 전화번호 등의 정보를 표시하는 용도로 사용되었지만, HTML5에서는 주로 우편물 주소를 표시할 때 사용된다.

바. s 요소

기존에는 텍스트의 중간을 지나가는 취소선을 그어서 대체되거나 삭제된 텍스트를 표시하는 용도로 사용되었다. 하지만 HTML5에서는 정확하지 않거나 관련이 없는 텍스트를 표시하기 위해서 사용한다.

사. a 요소

기존 HTML에서 a 요소는 하이퍼링크나 앵커를 나타냈지만, HTML5에서는 여러 부분이 추가되었다. 우선 앵커의 이름을 나타내는 name 속성을 비롯하여 여러 속성들은 더 이상 지원되지 않으며, download와 media 속성 등이 추가되었다. download 속성은 하이퍼링크를 클릭하였을 때 href 속성에서 지정한 파일을 직접 다운로드 받을 수 있는 기능을 제공하며, media 속성은 링크된 문서가 최적화된 미디어나 장치로 이동할 수 있도록 한다.