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

본격적으로 반응형 웹 사이트를 만들기를 시작하겠습니다.
반응형 웹 사이트를 만들기 위한 레이아웃 아웃라이너 강의입니다.
저와 함께 하나하나씩 잘 따라해 보세요.

Code Youtube

Code Reference

소스는 여기서 다운 받을 수 있습니다. 바로가기

완성된 예제는 여기서 확인 할 수 있습니다. 바로가기

Reference Site

∗ dothome - CLICK
∗ html5-outliner - CLICK

사용 프로그램

∗ brackets - CLICK
∗ sublime - CLICK
∗ visualstudio - CLICK
- 에디터는 본인이 편한것으로 사용하시면 되고, 저는 이번 강의에서 sublime을 사용하였습니다. -

Code example

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

도움이 되셨다면 구독과 좋아요 버튼을 꾸욱~~!!
여러분의 댓글은 영상을 제작하는데 많은 힘이 됩니다.
모르시거나 궁금한 사항은 언제든지 댓글로 남겨주세요.
최대한 힘이 되어 드리겠습니다.
오늘도 수고하셨습니다.

728x90

저작자표시

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

webs portfoliodeveloper

Port developer

challenge

1.

2.

3.

completed 전체 보기

스터디 과정 26기 수료 | 김현* 프론트 취업 완료

스터디 과정 26기 수료 | 양다* 프론트 취업 완료

스터디 과정 26기 수료 | 김아* 프론트 취업 완료

스터디 과정 26기 수료 | 김가* 프론트 취업 완료

스터디 과정 25기 수료 | 이태* 프론트 취업 완료

스터디 과정 26기 수료 | 양다* 프론트 취업 완료

스터디 과정 26기 수료 | 김아* 프론트 취업 완료

스터디 과정 26기 수료 | 김가* 프론트 취업 완료

국비지원 과정 30기 수료 | 김성* 프론트 취업 완료

국비지원 과정 30기 수료 | 양다* 프론트 취업 완료

국비지원 과정 30기 수료 | 이영* 프론트 취업 완료

국비지원 과정 30기 수료 | 이중* 프론트 취업 완료

국비지원 과정 30기 수료 | 박선* 프론트 취업 완료

국비지원 과정 30기 수료 | 최진* 프론트 취업 완료

국비지원 과정 30기 수료 | 김석* 프론트 취업 완료

국비지원 과정 30기 수료 | 김대* 프론트 취업 완료

국비지원 과정 30기 수료 | 권규* 프론트 취업 완료

국비지원 과정 30기 수료 | 권혜* 프론트 취업 완료

국비지원 과정 30기 수료 | 김민* 프론트 취업 완료

국비지원 과정 30기 수료 | 김대* 프론트 취업 완료

portfolio 전체 보기

재밌는 포트폴리오

포트포리오

프론트앤드 개발자

프론트앤드 개발자

프론트앤드 포트폴리오

가로 세로 포트폴리오

귀여운 포트폴리오

쿨한 포트폴리오

페이지 포트폴리오

프론트앤드 개발자

프론트앤드 개발자

프론트앤드 개발자

프론트앤드 개발자

웹 퍼블리셔

프론트앤드 개발자

프론트앤드 개발자

프론트앤드 개발자

프론트앤드 개발자

디자인 및 퍼블리셔

프론트앤드 개발자

interview 전체보기

review

스터디 후기 이다*

스터디 후기 이다*

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

Code Youtube

Code Reference

Reference Site

사용 프로그램

Code example

사이트 제작/02 RESPONSIVE Related Articles

더보기

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역