글
Form (폼) 요소에 대해서 공부합니다.
Form 요소는 모두 <form> </from> 태그 사이에 있어야 합니다.
form 요소는 input, select, check, radio 등 여러 태그들이 올 수 있고 이 태그들은 사용자로부터 내용을 입력받게 됩니다.
또한 입력받은 내용들을 form 이 서버로 전송하는 역할을 하게 됩니다.
기존에 알고있던 html 의 form 요소보다 한층 더 업그레이드된 ui 를 제공하게 됩니다.
이번 시간에는 button과 slider 에 대해 살펴보겠습니다.
button
기본적인 버튼은 a 태그, button 태그, input 태그로 표현할 수 있습니다.
소스부터 살펴봅니다.
|
1
2
3 |
<a class="ui-shadow ui-btn ui-corner-all" href="#">Link button</a>
<button class="ui-shadow ui-btn ui-corner-all">Button element</button>
<input type="button" value="Button element" data-theme="a" data-icon="delete"> |
cs |
1번 라인 : a 태그를 사용한 버튼입니다. 클래스로 버튼임을 지정하게 됩니다. 기본적으로 width는 화면의 너비에 마춰집니다.
2번 라인 : button 태그를 사용한 버튼입니다. 방식은 a 태그와 같습니다.
3번 라인 : 3번 라인은 input 태그를 사용했습니다. data-icon 이라는 속성이 보입니다. 아이콘을 지정해주는 것은 이전 강의들에서 나온 부분임으로 생략합니다. data-iconpos 속성을 이용하면 아이콘의 위치를 이동할 수 있습니다. (참고강좌 : http://cofs.tistory.com/164)
이번에는 버튼들을 가로로 정렬시켜 보면서 다른 속성들도 살펴보겠습니다.
|
1
2
3 |
<a class="ui-shadow ui-btn ui-corner-all ui-btn-inline ui-btn-icon-left ui-icon-star" href="#">Inline + icon</a>
<a class="ui-shadow ui-btn ui-corner-all ui-btn-inline ui-btn-b ui-mini" href="#">Mini + theme</a>
<a class="ui-shadow ui-btn ui-corner-all ui-btn-inline ui-icon-plus ui-btn-icon-notext ui-btn-b ui-mini" href="#">icon only button</a> |
cs |
클래스 중에 ui-btn-inline 클래스가 있는데 이 클래스가 버튼들을 가로로 정렬시켜주는 역할을 합니다. 가로로 정렬하기 위해서는 정렬할 모든 버튼에 ui-btn-inline 클래스가 필요합니다.
1번 라인 : ui-icon-star 클래스는 별모양 아이콘을 나타냅니다. 이 클래스는 아이콘의 위치를 지정해 주는 ui-btn-icon-left 클래스와 함께 정의되어야 합니다. ui-btn-icon-left 클래스와 ui-icon-star 클래스 등 클래스로 아이콘을 설정하는 방식은 input 태그에서는 적용되지 않습니다.
2번 라인 : ui-mini 클래스가 있는데 이는 작은 버튼을 나타내는 의미입니다.
3번 라인 : ui-icon-plus 클래스와 ui-btn-icon-notext 클래스가 함께 있으면 아이콘만을 나타내는 것을 의미합니다.
위의 두 분류의 버튼들은 모두 사이가 멀어져 보입니다.
이 버튼들을 붙혀서 그룹을 지어줄 수 있습니다.
|
1
2
3
4
5 |
<div data-role="controlgroup" data-type="horizontal" data-mini="true">
<a class="ui-shadow ui-btn ui-corner-all ui-btn-icon-left ui-icon-plus ui-btn-b" href="#">Add</a>
<a class="ui-shadow ui-btn ui-corner-all ui-btn-icon-left ui-icon-delete ui-btn-b" href="#">Delete</a>
<a class="ui-shadow ui-btn ui-corner-all ui-btn-icon-left ui-icon-grid ui-btn-b" href="#">More</a>
</div> |
cs |
data-role="controlgroup" 속성을 가진 div 태그로 감싸주면 버튼들은 하나의 그룹으로 묶이게 됩니다. 여기서 data-type="horizontal" 이라는 속성이 있는데 이는 세로로 그룹을 지어준다는 의미이며 생략시 기본값으로 가로로 그룹화가 됩니다. data-mini 속성은 작은 버튼으로 만들것인지에 대한 정의입니다.
slider (슬라이더)
이번에는 slider에 대해 살펴보겠습니다.
슬라이더는 사용자가 커서를 이동시켜서 값을 선택할 수 있는 태그입니다.
input 태그의 type="range" 속성을 사용하며 HTML5 에서 새로 추가된 속성입니다.
|
1
2
3
4 |
<label for="slider">Slider:</label>
<input name="slider" id="slider" type="range" min="0" max="100" value="50">
<label for="slider-fill">Slider with fill and step of 50:</label>
<input name="slider-fill" id="slider-fill" type="range" min="0" max="1000" step="50" value="60" data-highlight="true"> |
cs |
2번 라인 : 별다른 속성 추가 없이 range 속성만으로도 slider 를 만들 수 있습니다.
4번 라인 : step 속성은 증가되거나 감소되는 량의 범위를 지정해줍니다. data-highlight 는 slider 의 증가된 부분에 색을 표시할지 여부를 설정합니다.
이번에는 슬라이더의 범위를 설정할 수 있도록 만들어 봅니다.
|
1
2
3
4
5
6
7
8
9
10
11
12 |
<div data-role="rangeslider">
<label for="range-1a">Rangeslider:</label>
<input name="range-1a" id="range-1a" type="range" min="0" max="100" value="40">
<label for="range-1b">Rangeslider:</label>
<input name="range-1b" id="range-1b" type="range" min="0" max="100" value="80">
</div>
<div data-role="rangeslider" data-mini="true">
<label for="range-2a">Mini rangeslider:</label>
<input name="range-2a" id="range-2a" type="range" min="0" max="100" value="40">
<label for="range-2b">Mini rangeslider:</label>
<input name="range-2b" id="range-2b" type="range" min="0" max="100" value="80">
</div> |
cs |
1번 라인 : data-role="rangeslider" 속성을 가진 div로 slider 2개를 감싸줍니다.
그럼 끝입니다. 다른 점은 없습니다.
7번 라인에서 data-mini 속성은 조금 더 작은 slider 를 만들겠다는 속성입니다.
댓글