Layout

RA_MI·2022년 2월 25일
0

HTML

목록 보기
1/1

본 게시글은 Webstoryboy님 강좌 영상을 보며 따라한 내용입니다.
- 반응형 웹사이트 만들기(2019) -

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #wrap    {width: 960px; height: 800px; margin: 0 auto; color: aliceblue; text-align: center;}
    #header  {width: 960px; height: 100px; line-height: 100px; font-size: 20px; background-color: #111;}
    #nav     {width: 960px; height: 100px; line-height: 100px; font-size: 20px; background-color: #222;}
    #sidebar {width: 360px; height: 500px; line-height: 500px; font-size: 20px; background-color: #333; float: left;}
    #contents{width: 600px; height: 500px; line-height: 500px; font-size: 20px; background-color: #444; float: left;}
    #footer  {width: 960px; height: 100px; line-height: 100px; font-size: 20px; background-color: #555; clear: both;}
</style>
<body>
    <div id ="wrap">
        <div id="header">header</div>
        <div id="nav">nav</div>
        <div id="sidebar">sidebar</div>
        <div id="contents">contents</div>
        <div id="footer">footer</div>
    </div>
    
</body>
</html>

0개의 댓글