[HTML&CSS] HTML 템플릿 작성하기, <div> 의 쓰임새 및 <a href="#content">


<div> : HTML에서 어떤 구역을 지정할 때 쓰는 태그

<div id=[VALUE]> : div에 아이디를 지정

<a href="#content"> : 웹 접근성 측면에서 tab을 눌렀을 때 본문 바로가기가 나올 수 있게 하는 태그


HTML 템플릿


HTML 템플릿은 보통 div태그를 통해서 지정하게 된다. 아래는 div에 id를 부여해서 각 구역을 나누는 HTML템플릿의 한 예다.


header, container, footer로 구성하고 이 전체 div요소를 wrap으로 감싼다. container 안에는 또한 content를 포함한 여러 요소로 나눌 수 있다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <title>template</title>
</head>
<body>
    <p><a href="#content">본문바로가기</a></p>
    <div id="wrap">
        <!-- header -->
        <div id="header">
            
        </div>
        <!-- //header -->
        <!-- container -->
        <div id="container">
            <!-- content -->
            <div id="content">

            </div>
            <!-- //content-->
        </div>
        <!-- //container-->
        <!-- footer-->
        <div id="footer">

        </div>
        <!-- //footer-->
    </div>
</body>
</html>


출처 : https://www.inflearn.com/course-status-2/

이 글을 공유하기

댓글(0)

Designed by JB FACTORY