반응형
1. HTML Code
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>우엉조림</title>
<link href="css/ex06.css" rel="stylesheet">
</head>
<body>
<h1>우엉조림</h1>
<p>
<span class="red">김밥 재료</span>로도 좋고 <span class="red">밑반찬</span>으로도<br>
<span class="green">효과 만점</span> <span class="green">영양 만점</span>인
<ins>우엉 조림</ins>을 만들어 보세요.
</p>
<ul>
<li>분량 : 4인분</li>
<li>요리시간 : 30분</li>
<li>칼로리 : 670cal</li>
</ul>
<h2>재료</h2>
<dl>
<dt>주재료</dt>
<dd>우엉, 통깨 약간</dd>
<dt>부재료</dt>
<dd>간장, 설탕, 물엿, 맛술, 물</dd>
</dl>
<h2>조리법</h2>
<ol>
<li>우엉은 껍질을 벗기고 알맞은 길이로 채를 썬다.</li>
<li>우엉을 식초물에 담구어 잡내와 색이 변하지 않게 한다.</li>
<li>프라이팬에 식용유를 넣고 살짝 볶는다.</li>
<li>간장, 설탕, 맛술, 물, 물엿과 우엉을 넣고 서서히 약한 불에서 조린다.</li>
<li>통깨를 뿌린다.</li>
</ol>
</body>
</html>
2. CSS Code
@charset "utf-8";
/* CSS Document */
*{
margin:0;
padding:0;
}
body{
font-family:sans-serif,"맑은 고딕";
font-size:14px;
color:black;
}
ul,li{
list-style:none;
}
a{
text-decoration:none;
color:black;
}
h1{
width:80%;
margin:auto;
border:2px solid orange;
border-top:3px solid red;
/* padding-left:20px; */
text-indent:30px;
}
h1:hover{
outline:3px solid gray;
}
.red{
background:red;
color:white;
}
.green{
background:green;
color:white;
}
ins{
background:gold;
text-decoration:none;
}
p{
width:60%;
border:1px solid black;
box-shadow:5px 5px 1px black;
margin:auto;
margin-top:20px;
padding:10px;
/* 줄 간격 */
line-height:2;
text-align:center;
}
p:hover{
border-radius:20px;
text-indent:20px;
transition:1s;
}
ul{
width:50%;
border:1px solid black;
box-shadow:5px 5px 1px black;
margin:auto;
margin-top:10px;
font-size:14px;
padding:5px;
}
ul li{
text-indent:20px;
background:url(../icon/pp090000000537.gif) no-repeat left top;
}
ul li:hover{
background:pink url(../icon/oo090000000494.gif) no-repeat left top;
cursor:pointer;
}
ul:hover{
box-shadow:5px 5px 1px blue;
text-shadow:1px 1px gray;
}
h2{
width:80%;
border-bottom:3px solid navy;
margin:auto;
text-indent:20px;
}
dl{
width:70%;
border:3px inset tomato;
padding:5px;
margin:auto;
margin-top:20px;
}
dl dt{
width:80%;
background:chocolate;
margin:5px;
margin-left:50px;
cursor:pointer;
}
dl dd{
width:80%;
background:gold;
margin:5px;
margin-left:50px;
/* 1) */
/* display:none; */
/* 2) */
/* visibility:hidden;
opacity:0; */
/* 3) */
/* position:relative;
left:-500px; */
/* 4) */
/* height:0;
overflow:hidden; */
}
/* position:relative; left:30px */
dl dt:hover+dd{
/* 1) */
/* display:block; */
/* 2) */
/* visibility:visible;
opacity:1;
transition:1s; */
/* 3)
transition:0.5s;
left:0px; */
/* 4) */
/* height:50px; */
}
dl{
/* 3) */
/* overflow:hidden; */
overflow:hidden;
}
dt{
border:5px solid transparent;
box-sizing:content-box;
}
dt:hover{
border:5px solid peru;
}
ol{
width:80%;
/* 그라데이션 */
background:linear-gradient(gold 0%, pink 100%);
margin:auto;
margin-top:10px;
padding:10px;
list-style-type:decimal;
}
ol li{
list-style-type:decimal;
text-indent:10px;
padding-left:10px;
list-style-position:inside;
}
ol:hover{
background:radial-gradient(pink 0%, gold 50%, snow 100%);
}
3. HTML / CSS 파일
ex06.html
0.00MB
ex06.html
0.00MB
4. 미리보기
반응형
'Python_WEB > HTML' 카테고리의 다른 글
| HTML5 - 190616 Basic Study 41(Float 해제 방법) (0) | 2019.06.16 |
|---|---|
| HTML5 - 190615 Basic Study 40(Note) (0) | 2019.06.15 |
| HTML5 - 190615 Basic Study 38(아이콘 리스트 예제) (0) | 2019.06.15 |
| HTML5 - 190615 Basic Study 37(롤 오버 효과 주기) (0) | 2019.06.15 |
| HTML5 - 190615 Basic Study 36(가로 네비게이션 바) (0) | 2019.06.15 |
