'HTML' 카테고리의 다른 글
| 웹폰트 + 구글 웹 폰트 사용법 ( font-family ) (0) | 2019.04.28 |
|---|
HTML
태그요약
# 리스트
ol : 순서있는 리스트(ordered list)
ul : 순서없는 리스트(unnumbered list)
<html>
<head>
<style type="text/css">
</style>
</head>
<body>
<ol>
<li>aa
<li>bb
<li>cc
</ol>
<ul>
<li>aa
<li>bb
<li>cc
</ul>
</body>
</html>
# 리스트 가로로 배열하기
=> li의 스타일을 float:left 하면됨!!
<style type="text/css">
#header li {
float: left;
}
</style>
<ul id="header">
<li>로고지역</li>
<li><a href ="mainform.html"> 메인으로</a></li>
<li>JJJ 프로젝트!</li>
<li>언어설정</li>
</ul>
# Frame
frame : html파일을 frame으로 나눈것
즉, html에 여러html을 갖게되므로 따로 닫는창은없다
또한 리사이즈가능함
iframe : html내부에 특정위치에 내부 frame생성! (inline frame)
html내에 또다른 html을 보여주기위한 화면으로 어디든 만들수 있으며 닫을수있다
또한 사이즈가 고정이라서 리사이즈 불가능하다.
[ex] rows ... 행으로 추가
t1.html
=======
<html>
<frameset rows="30%,*"> // * 는 30%뺀 나머지
<frame src="t2.html">
<frame src="t3.html">
</frameset>
</html>
t2.html
=======
<html>
<head>
</head>
<body bgcolor="green">
</body>
</html>
t3.html
=======
<html>
<head>
<style type="text/css">
</style>
</head>
<body bgcolor="yellow">
</body>
</html>
[ex] cols... 열로 추가
t1.html
=======
<html>
<frameset cols="30%,*">
<frame src="t2.html">
<frame src="t3.html">
</frameset>
</html>
[ex] 행 열 복합프레임나누기
t1.html
=======
<html>
<frameset rows="30%,*">
<frame src="t2.html">
<frameset cols="50%,*">
<frame src="t3.html">
<frame src="t4.html">
</frameset>
</frameset>
</html>
[ex] 프레임 경계선 크기 설정!
<html>
<frameset rows="30%,*" frameborder="0"> // 0이라서 프레임나누는선굵기 없음!
<frame src="t2.html">
<frameset cols="50%,*" frameborder="0">
<frame src="t3.html">
<frame src="t4.html">
</frameset>
</frameset>
</html>
# iFrame (inline frame)
html문서안에 내부에 frame생성!
( 위에거는 그냥 html파일을 frame으로 나눈것이고 이거는 html내부에 특정위치에 내부 frame생성! )
[ex]
<html>
<head>
<style type="text/css">
</style>
</head>
<body>
<iframe src="t2.html" width="400" height="200">
</body>
</html>
# form ... 정리 필요!
사용자와의 상호작용을 할수 있는 태그
즉, 사용자로부터 어떤 입력을 하도록 하기 위한 태그이다.
ex) <input> , <textarea> , radio버튼, checkbox, select, submit, reset ....
[ex]
<html>
<head>
<style type="text/css">
</style>
</head>
<body>
<form> // 시작은 무조건 폼태그
<input type="text" value="aa">
<input type="password" value="aa">
<input type="button" value="bb">
<input type="checkbox">cc
<input type="checkbox">dd
<input type="checkbox">ee
<input type="radio">ff // name속성을 통해 그룹화가능
<input type="radio">gg
<select>
<option>hh
<option>ii
<option>jj
<option>hh
</select>
<input type="file">
<textarea cols="35" rows="5"></textarea>
</form>
</body>
</html>
