1. Description
<fieldset>는 Element들을 Group으로 묶고, <legend>로 그룹명을 넣는다.
2. Example
3. Code
더보기
<!-- ---------------------------------------------------------
--
-- Author: 1q74.tistory.com
--
--------------------------------------------------------- -->
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>[1q74.tistory.com] css/fieldset</title>
<style>
fieldset#_1q74-example-container {
border: solid 1px;
border-style: dotted;
padding: 10px;
}
div[name="_1q74-example-1"] {
background: green;
width: 100px;
height: 100px;
display: inline-block;
}
div[name="_1q74-example-2"] {
background: lightgreen;
width: 100px;
height: 100px;
display: inline-block;
}
</style>
</head>
<body>
<fieldset id="_1q74-example-container">
<legend>Div Boxes</legend>
<div name="_1q74-example-1">
box#1
</div>
<div name="_1q74-example-2">
box#2
</div>
</fieldset>
</body>
</html>4. File
[css][fieldset]example.html
0.00MB
5. See also
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset
'CSS > Cookbook' 카테고리의 다른 글
| 【CSS/Cookbook】How are the display values different between block and inline block? (0) | 2023.05.24 |
|---|---|
| 【CSS/table】Creating table with div(div로 테이블 만들기) #1 (0) | 2023.03.16 |
| 【CSS/Cookbook】Making HTML Random Color Code(HTML 랜덤 색상 만들기) (0) | 2023.03.16 |
| 【CSS/Common】<li>태그에서 bullet표시 없애기 (0) | 2023.03.01 |
| pseudo-class에 대하여 (0) | 2023.02.23 |