본문 바로가기

HTML/code

sementic를 이용한 레이아웃

<!DOCTYPE html>    
<html lang="en">
<head>    
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>02_sementic를 이용한 레이아웃</title>
</head>
<body>
    <!-- 머릿말 -->
    <header style="background-color: #CAC2E4">
        <mark>div>h1{my homepage}+hr</mark>
        <h1>my homepage</h1>
    <hr>
    </header>
    <!-- 메뉴 -->
    <nav 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>
    </nav>
    <!-- 메인 컨텐츠 -->
    <section 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>
    </section>
    <!-- 꼬릿말 -->
    <footer style="background-color:#3D404A">
        <mark>div>p+hr</mark>
        <p>주식회사 그린 컴퍼니 ⓒgreen</p>
        <hr>
    </footer>
</body>
</html>

'HTML > code' 카테고리의 다른 글

div를 이용한 레이아웃  (0) 2023.03.28
기본 폼태그의 활용  (0) 2023.03.28
pre태그  (0) 2023.03.28
비디오 태크  (0) 2023.03.28
정의 목록 태그  (0) 2023.03.24