div 태그
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>div.html</title>
<style>
.box {
width: 300px;
border: 1px solid black;
margin: 10px;
}
.highlight {
color: yellow;
background-color: black;
}
#best {
font-weight: bolder;
}
#unique1 {
background-color: lightblue;
color: white;
text-align: center;
}
#unique2 {
border: 3px dotted lightgreen;
}
</style>
</head>
<body>
<h1>div 태그</h1>
<!--
div 태그
: css(스타일), js(기능)을 적용하기 위해 사용
: 웹 페이지의 여러 부분을 나누거나 묶는 데 사용
-->
<!-- class, id 속성을 사용하여 스타일링이나 기능 동작을 지정 -->
<!--
1. class 속성
: 마침표(.) 문자 뒤에 클래스 이름을 입력
-->
<div class="box highlight" id="best">
class 속성 - 제일 중요
</div>
<div class="box">
class 속성
</div>
<div class="box highlight">
class 속성 - 중요
</div>
<div class="box">
class 속성
</div>
<!--
2. id 속성
: 샾(#) 문자 뒤에 아이디 이름을 입력
-->
<div id="unique1">
id 속성1
</div>
<div id="unique2">
id 속성2
</div>
<hr />
<div class="container"></div>
<div class="container2"></div>
<div id="uni"></div>
<div id="unique"></div>
<div class=""></div>
</body>
</html>
form
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h3>롯데 자이언츠 티켓 예매</h3>
<form>
<fieldset>
<legend>날짜 선택</legend>
<label for="userId">사용자 아이디</label>
<input type="text" id="userId" />
<br />
<label>
사용자 비밀번호
<input type="text" />
</label>
</fieldset>
<fieldset>
<legend>좌석 선택</legend>
</fieldset>
</form>
</body>
</html>
form2
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>form02.html</title>
</head>
<body>
1. textarea
<textarea rows="5" cols="10" placeholder="후기를 작성해주세요">
안녕하세요 이승아입니다.
</textarea>
<br />
2. select & option 태그
<select size="2" multiple>
<option value="kr">한국어</option>
<option value="ch" selected>중국어</option>
<option value="ja">일본어</option>
</select>
<br />
3. datalist & option 태그
<input type="text" list="fruit" />
<datalist id="fruit">
<option value="Apple" />
<option value="Banana">선택옵션2</option>
<option value="Orange">선택옵션3</option>
</datalist>
<br />
4. button 태그 (>> input 태그의 각 속성값과 매칭)
<button type="submit">제출</button>
<button type="reset">초기화</button>
<!-- <button type="button">버튼</button> -->
<button>버튼</button>
</body>
</html>'HTML' 카테고리의 다른 글
| HTML 기본 활용 예시3( HyperLink) (0) | 2024.07.26 |
|---|---|
| HTML 기본 활용 예시2(Input) (0) | 2024.07.26 |