学習Htmlタグ[表示]

17360 ワード

display: inline


===>改行せずに1行に他のエンティティと並べて配置
==>特殊:スタイルは適用されません
代表ラベルex)spanラベル、aラベル、emラベル**など


===========================================================

display: block


=>>前後を改行して、他の部分を別の行に押して、一人で1行を占めます.
==>特殊:スタイルを適用可能
代表ラベルex)divラベル、pラベル、h 1ラベルなど


===========================================================

display: inline-block


===>インラインエンティティのように、1行に他のエンティティと並べて配置し、改行しません.ただし、インライン要素では実現できないスタイル(widthとheightのプロパティを指定し、marginとpaddingのプロパティの上下の間隔を指定)を適用できます.
代表ラベルex)buttonラベル、selectラベルなど


input styleライフサイクル/コメントサイト


http://nis7.egloos.com/1988543
https://nanati.me/html_css_table_design/

inputその他の使い方


=>カーソルの点滅
 <input type="text" autofocus>
=>テキストのプレビュー
<input type="text" placeholder="아이디">
=>>ユーザーは書き込み不可、読み取りのみ
<input type="text" readonly="수박">
=>>最小/最大ビット値
=>step="5"を超える単位数
<input type="text" maxlength="12">
<input type="text" minlength="6">
<input type="text" minlength="6" step="5">

hrラベル


size:タグの太さを設定します.
width:タグの横方向の長さを設定します.
align:タグのソート値を設定します.left, center, right
color:タグの色を設定します.
noshade : ?

リンクアンダースコアのクリア

<style type="text/css"> 
a { text-decoration:none } 
</style> 

チェックボックスの重複を禁止

<script>
function box_check(bck){
    var obj = document.getElementsByName("locker");
    for(var i=0; i<obj.length; i++){
        if(obj[i] != bck){
            obj[i].checked = false;
        }
    }
}
</script>

<tr>
	<td>공개여부</td>
	<td>
		<input type="checkbox" name="locker" value="1" onclick="box_check(this);" checked>공개
		<input type="checkbox" name="locker" value="2" onclick="box_check(this);">비공개
	</td>
</tr>

表css


リファレンス
https://nanati.me/html_css_table_design/
border-spacing=隣接する表のセルの枠線間隔を指定します.

ボタンをマウスで上げる

<div id="btn_group">
<button type=button id="btn_3" onclick="location.href='find_id.do'" >아이디 찾기</button><br>
<button type=button id="btn_4" onclick="location.href='find_pwd.do'" >비밀번호 찾기</button><br>
</div>

#btn_group button:hover{
	color:white;
	background-color:skyblue;
}

submitマウスサスペンション

<div id="ip_group">
<input type="submit" value="달력보기" onclick="location.href='calendar.jsp'">
<input type="submit" value="수정하기">
<input type="submit" value="삭제하기" onclick="location.href='del_content.do'">
</div>

input:hover[type=submit]{
	color:white;
	background-color:skyblue;
}