오봉이와 함께하는 개발 블로그

HTML5 시멘틱 구조 예시 본문

FE/HTML

HTML5 시멘틱 구조 예시

오봉봉이 2021. 12. 6. 21:09
728x90

FrontEnd_day3 정리 (2021.12.06 월요일)

시멘틱 구조 예제

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>HTML 시멘틱 구조  css 적용</title>
        <link href="index.css" rel="stylesheet">
    </head>
    <body>
        <div id="wrap">
            <header>
                <div id="topMenu"> 로그인 이벤트 장바구니 고객센터 회원가입</div>            
            </header>
            <nav>
                <div id="mainMenuBox">메뉴</div>
                <div id="subMenuBox"> 서브 메뉴</div>
            </nav>
            <section>
                <article>
                    <div id="slideShowBox">슬라이드 쇼</div>
                </article>
                <article>
                    <div id="content">메인 내용</div>
                </article>
            </section>
            <footer>
                <div id="companyInfo">회사 정보</div>
            </footer>        
        </div>
    </body>
</html>

index.css

@charset "UTF-8";

#wrap {
    margin:0 auto;
    width:1000px;
    background-color:white;
    color:white;
}

header {
    background-color:#0C3;
    text-align:right;
    padding-right:20px;
    height:40px;
    line-height:40px;
}

#mainMenuBox {
    margin-top:10px;
    margin-bottom:10px;
    height:35px;
    line-height:35px;
    background-color:orange;
    text-align:center;
    color:blue;
}

#subMenuBox {
    height:35px;
    line-height:35px;
    background-color:#FF0;
    text-align:center;
    color:blue;
}

#slideShowBox {
    margin-top:10px;
    background-color:blue;
    text-align:center;
    height:200px;
    line-height:200px;
}

#content {
    margin-top:10px;
    background-color:navy;
    text-align:center;
    height:500px;
    line-height:500px;
}

#companyInfo {
    margin-top:10px;
    background-color:black;
    color:yellow;
    text-align:center;
    height:200px;
    line-height:200px;
}
728x90
저작자표시

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

HTML5 시멘틱 구조  (0) 2021.12.02
공간 분할 태그  (0) 2021.12.02
입력 양식 태그  (0) 2021.12.02
미디어 태그  (0) 2021.12.02
문서 삽입 태그  (0) 2021.12.02
'FE/HTML' Related Articles more
Comments