Minwoo Dev.

(10) HTML 태그 - k, l 본문

Web

(10) HTML 태그 - k, l

itisminu 2023. 7. 9. 13:36
728x90
반응형
SMALL

<kbd> : 키보드(keyboard) 입력을 나타낼 때 사용함.

<kbd> 태그는 키보드(keyboard) 입력을 나타낼 때 사용합니다.

 

<kbd> 요소 내의 텍스트는 브라우저의 기본 고정폭 글꼴을 사용하여 표현됩니다.

<kbd> 요소는 HTML5에서도 여전히 지원되지만, CSS를 대신 사용하면 더욱 다양한 효과를 얻을 수 있습니다.

<p><kbd>ALT</kbd>키와 <kbd>F4</kbd>키를 동시에 누르면 포커스를 가지고 있는 윈도우를 곧바로 닫을 수 있습니다.</p>

 

 

 

<label> : 사용자 인터페이스(UI) 요소의 라벨(label)을 정의할 때 사용함.

<label> 요소는 for 속성을 사용하여 다른 요소와 결합할 수 있으며, 이때 <label> 요소의 for 속성값은 결합하고자 하는 요소의 id 속성값과 같아야 합니다. 또한, <label> 요소를 결합하고자 하는 요소 내부에 위치시키면 for 속성을 사용하지 않더라도 해당 요소와 결합시킬 수 있습니다.

 

이러한 <label> 요소는 브라우저에 의해 일반적인 텍스트로 랜더링되지만, 사용자가 마우스로 해당 텍스트를 클릭할 경우 <label> 요소와 연결된 요소를 곧바로 선택할 수 있어 사용자의 편의성을 높일 수 있습니다.

 

<label> 요소를 사용할 수 있는 요소는 다음과 같습니다.

- <button>, <input>, <meter>, <output>, <progress>, <select>, <textarea>

<form action="/examples/media/action_target.php" method="get">
    여러분의 나이대를 골라보세요.<br>
    <input type="radio" name="ages" id="teen" value="teenage">
    <label for="teen">10대</label><br>
    <input type="radio" name="ages" id="twenty" value="twenties">
    <label for="twenty">20대</label><br>
    <input type="radio" name="ages" id="thirty" value="thirties">
    <label for="thirty">30대</label><br>
    <input type="radio" name="ages" id="forty" value="forties">
    <label for="forty">40대 이상</label><br>
    <input type="submit">
</form>

 

 

<legend> : <fieldset> 요소의 캡션(caption)을 정의할  때 사용함.

<form action="/examples/media/action_target.php" method="get">
    <fieldset>
        <legend>학사 관리 로그인</legend>
        이름 : <input type="text" name="st_name"><br>
        학번 : <input type="text" name="st_id"><br>
        학과 : <input type="text" name="department"><br>
        <button type="submit">제출하기</button>
    </fieldset>
</form>

 

 

<li> : HTML 리스트(list)에 포함되는 아이템(item)을 정의할 때 사용함.

<li> 요소는 순서가 있는 리스트(ordered list)를 정의하는 <ol> 요소나 순서가 없는 리스트(unordered list)를 정의하는 <ul> 요소, 메뉴 리스트(menu list)를 정의하는 <menu> 요소에서 리스트의 각 아이템을 정의합니다.

 

리스트 아이템을 나타내는 기본 마커(marker)는 순서가 없는 리스트나 메뉴 리스트에서는 검정색의 작은 원(bullet) 모양으로 표현되며, 순서가 있는 리스트에서는 아라비아 숫자나 알파벳으로 표현됩니다. 이렇게 리스트 아이템을 표현하는 마커(marker)는 CSS를 사용하면 다른 모양으로  손쉽게 변경할 수 있습니다.

 

<ul>
    <li>아메리카노</li>
    <li>카페라떼</li>
    <li>핫초코</li>
</ul>

<ol>
    <li>아메리카노</li>
    <li>카페라떼</li>
    <li>핫초코</li>
</ol>

 

 

 

<link> : 해당 문서와 외부 소스(external resource) 사이의 관계를 정의할 때 사용함.

<link> 요소는 빈 태그이며, 속성만을 포함합니다.

또한, 이 요소는 <head> 요소 내부에만 위치할 수 있으며, 그 개수에는 제한이 없습니다.

 

이러한 <link> 요소는 주로 외부 스타일 시트(external style sheet)를 연결할 때 사용됩니다.

<head>
    <link rel="stylesheet" type="text/css" href="/examples/media/expand_style.css">
</head>

 

 

 

공부를 목적으로 정리한 게시글입니다.

출처 - http://www.tcpschool.com/html-tags/intro

728x90
반응형
LIST
저작자표시

'Web' 카테고리의 다른 글

(12) HTML 태그 - o,p,q  (0) 2023.07.10
(11) HTML 태그 - m,n  (0) 2023.07.09
(9) HTML 태그 - i  (0) 2023.07.09
(8) HTML 태그 - h  (0) 2023.07.09
(7) HTML 태그 - f  (0) 2023.07.09
'Web' Related Articles more