자기개발👨‍💻/파이썬 웹

2강 - 03.10 웹사이트의 기본 구조

천숭이 2021. 8. 27. 11:01

웹사이트의 구조

 

실습1 - django 홈페이지 대략적인 구성

django 사이트의 대략적인 구조

<html> 구성요소 설명

 

실습1 - django 홈페이지 틀 잡기

*,
*::before,
*::after{
    box-sizing: border-box;
}

/* HEADER */
.header{
    background: yellow;
}

/* MAIN */
.main{
    background: lime;
}
.hero-section{
    background:aqua;
}
.main-content{
    background:blue;
    float:left;
    width:70%;
}
.slide-content{
    background:pink;
    float:right;
    width:30%;
}

/* CONTENT-INFO */
.content-info{
    background:green;
}
.links{
    background:lightgreen;
}
.footer{
    background:purple;
}
<!DOCTYPE html>
<html lang="en">
<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>The Web framework for perfectionists with deadlines | Django</title>
    <link rel="stylesheet" href="style.css">
    <!-- 상대요소: 지금 현재 내 위치에서의 파일 위치 -->
    <!-- 절대요소: 특정 파일의 고유한 경로 -->
</head>
<body>
    <header class="header">해더</header>
    <main class="main">
        <div class="hero-section">히어로</div>
        <div class="main-content">메인 콘텐츠</div>
        <div class="side-content">사이드 콘텐츠</div>
    </main>
    <footer class="content-info">
        <div class="links">링크</div>
        <div class="footer">푸터</div>
    </footer>
</body>
</html>

 

저작자표시 (새창열림)