HTML/code

div를 이용한 레이아웃

햇살코린 2023. 3. 28. 18:28

<!DOCTYPE html>
<html lang="en">    
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>01_div를 이용한 레이아웃</title>
</head>
<body>
    <!-- 머릿말 -->
    <div style="background-color: #CAC2E4">
        <mark>div>h1{my homepage}+hr</mark>
        <h1>my homepage</h1>
        <hr>
    </div>
    <!-- 메뉴 -->
    <div style="background-color: #706C8B">
        <mark>div>ul>li*4>a>{menu$}</mark>
        <ul>
            <li><a href="">html</a></li>
            <li><a href="">css</a></li>
            <li><a href="">javascript</a></li>
            <li><a href="">java</a></li>
        </ul>
    </div>
    <!-- 메인 컨텐츠 -->
    <div style="background-color:#535F79">
        <mark>div>h2{what is html?}+p+hr</mark>
        <h2>what is html?</h2>
        <p>html이란 hyper text markup language의 약자로 정보를 구조적으로 표현한 언어이며 프론트엔드 언어이다.</p>
        <hr>
    </div>
    <!-- 꼬릿말 -->
    <div style="background-color:#3D404A">
        <mark>div>p+hr</mark>
        <p>주식회사 그린 컴퍼니 ⓒgreen</p>
        <hr>
    </div>
</body>
</html>