HTML 공부 중 흥미가 있는 tag에 대해 기록합니다.
form
- name 속성 주의점 : tag와 속성간 name의 사용여부가 다르니 주의하세요! form의 name 속성은 HTML4부터 사용 중단되어 ID를 사용합니다. 그러나 select tag와 같이 서버로 전송할 데이터의 이름을 위해 사용하는 경우나 map tag와 같이 name 속성이 필수적으로 사용되는 경우도 있습니다.
- radio
input type 중 선택 기능 요소. 유사한 type 중 checkbox가 있지만 radio는 선택지 중 한가지만 선택할 수 있다는 차이점이 있습니다.
<body>
<form>
<h3>당신이 좋아하는 동물은 무엇입니까?</h3>
<input type="radio" name="animal" value="dog" />강아지
<input type="radio" name="animal" value="cat" checked />고양이
</form>
</body>
# checked 속성 : 해당 속성이 있는 선택지가 기본적으로 선택된 상태로 실행
- select
선택 목록을 제공합니다.
<body>
<form>
<select name="subjects" size="3" multiple>
<option value="1" selected>HTML5</option>
<option value="2">CSS3</option>
<option value="3">Javascript</option>
</select>
</form>
<form>
<select name="major">
<optgroup label="language">
<option selected>Korea</option>
<option>English</option>
<option>China</option>
<option>Germany</option>
</optgroup>
</select>
</form>
<form>
<label>전공 분야를 입력하세요.
<input type="text" list="majorlist" name="major" />
<datalist id="majorlist">
<option value="Software">소프트웨어</option>
<option value="Robot">로봇</option>
<option value="System">시스템</option>
</datalist>
</label>
</form>
</body>
# option : 목록을 정의
# selected : 해당 리스트가 기본적으로 선택되어 있도록 설정
# multiple : 다수 항목을 동시 선택 가능하도록 설정
# optgroup : 리스트를 묶음(그룹화)
# datalist : 추천하는 리스트를 나타냄 (input의 list 속성과 datalist의 id가 동일해야함)- fieldset
input과 같은 여러 컨트롤과 label을 묶을 때 사용합니다.
<body>
<form>
<fieldset>
<legend>개인 정보 입력</legend>
<p>이름 : <input type="text" name="name"></p>
<p>학교 : <input type="text" name="school"></p>
</fieldset>
</form>
</body>
# legend : 그룹 타이틀meta
- refresh
페이지를 새로고침 기능 속성. content 속성을 활용하여 다른 페이지로 이동을 설정할 수 있습니다.
<head>
<meta http-equiv="refresh" content="5;url=https://www.google.co.kr/">
</head>
# content"시간;url=희망하는 url" 방식으로 작성. 위 경우 5초 후 구글 페이지로 새로고침base
해당 문서의 모든 상대 URL이 사용할 기본(기준) URL을 지정합니다.
<head>
<base href="http://www.w3.org" />
</head>
<body>
<a href="international/" target="_blank">W3C INTERNAMTIONAL</a>
<a href="standards/" target="_blank">W3C STANDARDS</a>
</body>
# a tag를 클릭시 w3를 기본 url로 지정하여 international, w3 standards 페이지로 이동map
area 요소와 함께 이미지 맵을 정의할 때 사용합니다.
<body>
<map name="infographic" id="infographic">
<area shape="poly" coords="130,147, 200,107, 254,219, 130,228"
href="https://developer.mozilla.org/docs/Web/HTML"
target="_blank" alt="HTML" />
<area shape="poly" coords="130,147, 130,228, 6,219, 59,107"
href="https://developer.mozilla.org/docs/Web/CSS"
target="_blank" alt="CSS" />
<area shape="poly" coords="130,147, 200,107, 130,4, 59,107"
href="https://developer.mozilla.org/docs/Web/JavaScript"
target="_blank" alt="JavaScript" />
</map>
<img usemap="#infographic" src="/media/examples/mdn-info2.png" alt="MDN infographic" />
</body>
# name : 맵을 참조할 떄 사용할 수 있는 이름. 필수로 존재해야 함. id와 같이 모든 map tag에서 유일한 값을 가져야 함. id가 존재하는 경우 id와 name의 값이 동일해야 함
# shape : 이미지 좌표의 모양 (rect : 사각형 좌표, circle : 원형 좌표, poly : 다각형 좌표)
# coords : 이미지 좌표 (rect : x1,y1(시작점 좌표) x2,y2(끝점 좌표), circle : x1,y1(시작점 좌표) r(반지름), poly : x,y(시작점 좌표) ~ x,y(끝점 좌표). poly의 경우 처음과 마지막 좌표 쌍이 동일하지 않으면 브라우저는 마지막 좌표 쌍을 추가하여 다각형을 닫음)
dl, dt, dd
description list · term · data. 설명 목록을 나타냅니다. dl은 dt로 표기한 용어와 dd로 표기한 설명 그룹의 목록을 포함하여 설명 목록을 생성합니다.
<body>
<dl>
<dt>Beast of Bodmin</dt>
<dd>A large feline inhabiting Bodmin Moor.</dd>
<dt>Morgawr</dt>
<dd>A sea serpent.</dd>
<dt>Owlman</dt>
<dd>A giant owl-like creature.</dd>
</dl>
</body>
Without haste, but without rest.