<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
.divAll {
width: 700px;
height: 700px;
margin: 0 auto;
margin-top: 200px;
background-image: url('img/heart.png');
background-position: center;
background-repeat: no-repeat;
}
.divTop {
width: 100%;
height: 10px;
background-image: url('img/heart.png');
background-size: 10px 10px;
}
.divLeft {
width: 10px;
height: 100%;
background-image: url('img/heart.png');
background-size: 10px 10px;
float: left;
}
.divRight {
width: 10px;
height: 100%;
background-image: url('img/heart.png');
background-size: 10px 10px;
float: right;
}
.divBottom {
width: 100%;
height: 10px;
background-image: url('img/heart.png');
background-size: 10px 10px;
clear: both;
}
</style>
</head>
<body>
<div class="divAll">
<div class="divTop"></div>
<div class="divLeft"></div>
<div class="divRight"></div>
<div class="divBottom"></div>
</div>
</body>
</html>
-------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
fieldset > fieldset {
display: none;
}
.food:CHECKED ~fieldset{
display: block;
}
.yesyes {
display: none;
}
.nono {
display: none;
}
.yes:CHECKED ~.yesyes{
display: block;
}
.no:CHECKED ~.nono{
display: block;
}
</style>
</head>
<body>
<fieldset>
<legend><h1>관심분야 선택</h1></legend>
요리<input type="checkbox" class="food">
<fieldset>
<legend>질문</legend>
요리에 관심이 있는가...?<br>
<input type="radio" class="yes" name="yn">네
<input type="radio" class="no" name="yn">아니오
<h1 class="yesyes">그렇다면...요리학원을 가!</h1>
<h1 class="nono">그렇다면...한번 해봐</h1>
</fieldset>
스포츠<input type="checkbox">
패션<input type="checkbox">
여행지<input type="checkbox">
</fieldset>
</body>
</html>
-------------------------------------------------------------------------
'노트필기' 카테고리의 다른 글
| [Web] JSP class 0717-1 (0) | 2017.07.17 |
|---|---|
| [Web] CSS class0717-2 (0) | 2017.07.17 |
| [Web] class 0714-1 (0) | 2017.07.14 |
| [Web] class 0713-2 (0) | 2017.07.13 |
| [Web] class 0713-1 (0) | 2017.07.13 |
