본문 바로가기

TUTORIAL


반응형 사이트 만들기(2019)

09. 반응형 웹 사이트 만들기(2019) - 아웃라이너

(2019/09) 반응형 사이트 만들기 - 아웃라이너

반응형 웹 사이트를 만들기 위한 레이아웃 아웃라이너 예제입니다. 영상을 보면서 같이 따라하세요^^

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="author" content="webstoryboy">
    <meta name="description" content="반응형 사이트 따라하기">
    <meta name="keywords" content="반응형사이트, 웹퍼블리셔, 웹접근성, HTML5, webstoryboy, webs">
    <title>반응형 사이트 만들기 : 아웃라이너</title>

    <!-- style -->
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/style.css">

    <!-- 파비콘 -->
    <link rel="shortcut icon" href="icon/favicon.ico">
    <link rel="apple-touch-icon-precomposed" href="icon/favicon-152.png">
    <link rel="icon" href="path/to/favicon.png">
    <link rel="icon" href="icon/favicon-16.png" sizes="16x16"> 
    <link rel="icon" href="icon/favicon-32.png" sizes="32x32"> 
    <link rel="icon" href="icon/favicon-48.png" sizes="48x48"> 
    <link rel="icon" href="icon/favicon-64.png" sizes="64x64"> 
    <link rel="icon" href="icon/favicon-128.png" sizes="128x128">

    <!-- HTLM5shiv ie6~8 -->
    <!--[if lt IE 9]> 
        <script src="js/html5shiv.min.js"></script>
        <script type="text/javascript">
            alert("현재 당신이 보는 브라우저는 지원하지 않습니다. 최신 브라우저로 업데이트해주세요!");
        </script>
    <![endif]-->
</head>
<body>
    
    <header>
        <h1>반응형 사이트</h1>
    </header>
    <nav>
        <h2>반응형 사이트 전체 메뉴</h2>
    </nav>
    <article>
        <h2>반응형 사이트 서브 타이틀</h2>
    </article>
    <main>
        <section>
            <h2>반응형 사이트 컨텐츠</h2>
            <section>
                <h3>반응형 사이트 왼쪽 컨텐츠</h3>
                <article><h4>반응형 사이트 왼쪽 컨텐츠1</h4></article>
                <article><h4>반응형 사이트 왼쪽 컨텐츠2</h4></article>
                <article><h4>반응형 사이트 왼쪽 컨텐츠3</h4></article>
            </section>
            <section>
                <h3>반응형 사이트 가운데 컨텐츠</h3>
                <article><h4>반응형 사이트 가운데 컨텐츠1</h4></article>
                <article><h4>반응형 사이트 가운데 컨텐츠2</h4></article>
                <article><h4>반응형 사이트 가운데 컨텐츠3</h4></article>
            </section>
            <section>
                <h3>반응형 사이트 오른쪽 컨텐츠</h3>
                <article><h4>반응형 사이트 오른쪽 컨텐츠1</h4></article>
                <article><h4>반응형 사이트 오른쪽 컨텐츠2</h4></article>
                <article><h4>반응형 사이트 오른쪽 컨텐츠3</h4></article>
            </section>
        </section>
    </main>
    <footer>
        <h2>반응형 사이트 푸터</h2>
    </footer>
    
    <!-- JavaScript Libraries -->
    <script src="js/jquery.min_1.12.4.js"></script>
    <script src="js/modernizr-custom.js"></script>
</body>
</html>































































<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="author" content="webstoryboy">
    <meta name="description" content="반응형 사이트 따라하기">
    <meta name="keywords" content="반응형사이트, 웹퍼블리셔, 웹접근성, HTML5, webstoryboy, webs">
    <title>반응형 사이트 만들기 : 아웃라이너</title>

    <!-- style -->
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/style.css">

    <!-- 파비콘 -->
    <link rel="shortcut icon" href="icon/favicon.ico">
    <link rel="apple-touch-icon-precomposed" href="icon/favicon-152.png">
    <link rel="icon" href="path/to/favicon.png">
    <link rel="icon" href="icon/favicon-16.png" sizes="16x16"> 
    <link rel="icon" href="icon/favicon-32.png" sizes="32x32"> 
    <link rel="icon" href="icon/favicon-48.png" sizes="48x48"> 
    <link rel="icon" href="icon/favicon-64.png" sizes="64x64"> 
    <link rel="icon" href="icon/favicon-128.png" sizes="128x128">

    <!-- HTLM5shiv ie6~8 -->
    <!--[if lt IE 9]> 
        <script src="js/html5shiv.min.js"></script>
        <script type="text/javascript">
            alert("현재 당신이 보는 브라우저는 지원하지 않습니다. 최신 브라우저로 업데이트해주세요!");
        </script>
    <![endif]-->
</head>
<body>
    
    <header>
        <h1>반응형 사이트</h1>
    </header>
    <nav>
        <h2>반응형 사이트 전체 메뉴</h2>
    </nav>
    <article>
        <h2>반응형 사이트 서브 타이틀</h2>
    </article>
    <main>
        <section>
            <h2>반응형 사이트 컨텐츠</h2>
            <section>
                <h3>반응형 사이트 왼쪽 컨텐츠</h3>
                <article><h4>반응형 사이트 왼쪽 컨텐츠1</h4></article>
                <article><h4>반응형 사이트 왼쪽 컨텐츠2</h4></article>
                <article><h4>반응형 사이트 왼쪽 컨텐츠3</h4></article>
            </section>
            <section>
                <h3>반응형 사이트 가운데 컨텐츠</h3>
                <article><h4>반응형 사이트 가운데 컨텐츠1</h4></article>
                <article><h4>반응형 사이트 가운데 컨텐츠2</h4></article>
                <article><h4>반응형 사이트 가운데 컨텐츠3</h4></article>
            </section>
            <section>
                <h3>반응형 사이트 오른쪽 컨텐츠</h3>
                <article><h4>반응형 사이트 오른쪽 컨텐츠1</h4></article>
                <article><h4>반응형 사이트 오른쪽 컨텐츠2</h4></article>
                <article><h4>반응형 사이트 오른쪽 컨텐츠3</h4></article>
            </section>
        </section>
    </main>
    <footer>
        <h2>반응형 사이트 푸터</h2>
    </footer>
    
    <!-- JavaScript Libraries -->
    <script src="js/jquery.min_1.12.4.js"></script>
    <script src="js/modernizr-custom.js"></script>
</body>
</html>