Welcolme my Tutorial blog

퍼블리셔와 디자이너를 위한 사이트입니다.
동영상과 소스를 보면서 따라하는 튜토리얼 사이트입니다.

Welcolme my Tutorial blog

웹 표준 사이트 따라하기 튜토리얼 입니다.
유튜브 영상과 같이 보면서 따라하는 튜토입니다.

Welcolme my Tutorial blog

사이트는 현재 만드는 중입니다.
버그와 잘못된 링크가 엄청 많습니다.

안녕하세요!

현재는 베타버전입니다.

이 사이트는 코딩을 동영상과 소스를 보면서 따라하는 튜토리얼 사이트입니다.

에디터가 드리는 인사

티스토리 뷰

<!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>
<!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>













<style>






























</style>











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

사이트를 만들기전 기본 레이아웃부터 만들고 시작합니다.

완성

공유하기

  • 네이버 블러그 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
  • 트위터 공유하기
  • 트위터 공유하기
태그보기

전체메뉴

질문하기
댓글
댓글쓰기 폼