Hi Hi

Python sl4a - 간단한 HTML 양식 (CSS . JavaScript)

 

간단한 HTML 양식

이번 예제는 화면 밝기, 매체 음량, 벨소리 크기, WiFi 모드 등 기기의 여러 설정들을 변경할 수 있는 괘 복잡한 UI 다.

<body>

<div id = "body">

<h>My Settings</h>

<form>

<div class="container">

<div>

<label for="brightness">Brightness Level</label>

<input size="5" id="brightness type="text"/>

</div>

<div>

<label for="timeout">Timeout Secs</label>

<select>

<option value="0">0</option>

<option value="1">1</option>

<option value="2">2</option>

<option value="3">3</option>

<option value="4">4</option>

<option value="5">5</option>

</select>

</div>

<div>

<label for="screen"> Screen off</label>

<input id="screen" type="checkbox"/>

</div>

</div>

<hr/>

<div class="container">

<div>

<label for="media_vol">Media Volume</label>

<input size="5" id="media_vol" type="text"/>

</div>

<div>

<label for="ringer_vol">Ringer Volume</label>

<input size="5" id="ringer_vol" type="text"/>

</div>

</div>

<hr/>

<div class="container">

<div>

<label for="airplane_mode">Airplane Mode</label>

<input id="airplane_mode" name="radio" type="radio"/>

</div>

<div>

<label for="wifi_on">Wifi on</label>

<input id="wifi_on" name="radio" type="radio"/>

</div>

</div>

<div class="container burrons">

<div>

<input size="5" id="save" name="save" type="button" value="Save Settings" />

<input  size="5" id="cancel" name="cancel" type="button" value="cancel" />

</div>

</div>

</form>

</body>


이 웹 브라우저로 열면 기기의 화면이 작다보니 몇가지 문제점이 생긴다. HTML 태그들 자체를 조정해서 모습을 바로잡을 수도 있지만, CSS를 적절히 적용하는 것이 더 나은 방법이다.


CSS

CSS(cascading style sheet)로 HTML을 서식화하는것은 깔끔한 사용자 인터페이스를 만드는데 아주 효과적인 방법이다. 

CSS를 이용하면 페이지의 그 어떤 HTML 요소라도 좌.우 정렬이나 방식이나 글꼴 모양, 텍스트 흐름, 크기 등을 제어할 수 있다.

특히, 페이지의 각 요소가 나타나는 방식을 구체적으로 지정할 필요가 있는 소형화 기기에 더욱 유용하다.

<head>

<style>

#body{width%}

.container{text-align:center;margin:auto;}

.container div {text-align:left;width:75%}

h1 {text-alin:center;margin:aotu;}

hr {width:75%;margin:0px auto;}

label {display:block; float:left; width:60%;}

.buttons div {text-align:center;margin;auto;}

</style>

</head>

HTML 페이지의 본문(<body>)에는 <div> 태그 같은 표준적인 요소들과 <label> 및 <input> 태그로 만든 텍스트 입력 상자들, 그리고 태그로 만든 드롭다운 목롱 상자가 포함되어있다. CSS 코드는 해당 레이블들의 모양과 너비, 텍스트 정렬 방식을 제어한다. 또한 h1, hr 의 스타일도 지정한다.