210601 UIUX WebDesign CSS 연습_6

ITisIT210·2021년 6월 6일
0

CSS

목록 보기
6/93
post-thumbnail
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>우엉조림</title>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    body {
        font-family: "맑은 고딕";
        font-size: 16px;
        line-height: 1.5;
        background-color: #c1eaea;
    }
    div {
        margin: 50px 605px auto;
        padding: 50px;
        background-color: #fff;
        border: 5px double #3399cc;
    }
    h1 {
        color: #3399cc;
        background-color: #fff;
    }
    p {
        margin: 15px 0px;
        padding: 15px 20px;
        color: #fff;
        border-top: 5px solid #009999;
        background-color: #00cccc;
    }
    ul {
        margin: 30px;
    }
    h2 {
        margin-top: 30px;
        margin-bottom: 15px;
        padding-bottom: 15px;
        color: #00cccc;
        border-bottom: 1px solid #00cccc;
    }
    dt {
        color: #3399cc;
    }
    dd {
        margin-bottom: 5px;
        padding: 10px;
        background-color: #eee;
    }
    ol {
        padding-left: 40px;
    }
</style>
</head>

<body>
<div>
    <h1>우엉조림</h1>
    <p>
        김밥 재료로도 좋고 밑반찬으로도 <br>
        효과 만점 영양 만점인 우엉 조림을 만들어 보세요.
    </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>
</div>

</body>
</html>
profile
Engineering is the closest thing to magic that exists in the world.

0개의 댓글

관련 채용 정보