05. 반응형 웹 사이트 만들기(2019) - 반응형 레이아웃 유형3

반응형 웹 사이트를 만들기 위한 레이아웃 연습입니다.
웹 페이지의 레이아웃은 웹 사이트의 외관을 결정짓는 매우 중요한 요소입니다.
앞으로 몇가지 반응형 레이아웃을 같이 연습하고, 본격적인 사이트 만들기를 들어갈 것입니다.
하나하나씩 따라하시면서 같이 기본부터 다지도록 해보아요~~~
여러분의 열공을 응원하며, 화이팅 입니다!!!

Code Youtube

Code Reference

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

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

Reference Site

∗ dothome - CLICK

사용 프로그램

∗ filezilla - CLICK
∗ brackets - CLICK
∗ sublime - CLICK
∗ visualstudio - CLICK

Code example

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>layout3</title>
    <style>
        * {margin: 0; padding: 0;}
        body {background-color: #e3f2fd;}
        #wrap {width: 1200px; margin: 0 auto;}
        .header {width: 100%; height: 100px; background: #81d4fa;}
        .aside {float: left; width: 30%; height: 900px; background: #4fc3f7}
        .article1 {float: left; width: 70%; height: 300px; background: #29b6f6;}
        .article2 {float: left; width: 70%; height: 300px; background: #03a9f4;}
        .article3 {float: left; width: 70%; height: 300px; background: #039be5;}
        .footer {clear: both; width: 100%; height: 100px; background: #0288d1;}

        /* 화면 너비 0 ~ 1200px */
        @media (max-width: 1240px){
            #wrap {width: 100%;}
            .article1 {height: 450px;}
            .article2 {height: 450px;}
            .article3 {width: 100%;}
        }
        /* 화면 너비 0 ~ 768px */
        @media (max-width: 768px){
            .aside {width: 100%; height: 300px;}
            .article1 {width: 50%;}
            .article2 {width: 50%;}
        }
        /* 화면 너비 0 ~ 480px */
        @media (max-width: 480px){
            .article1 {width: 100%;}
            .article2 {width: 100%;}
        }
    </style>
</head>
<body>
    <div id="wrap">
        <header class="header"></header>
        <aside class="aside"></aside>
        <section class="article1"></section>
        <section class="article2"></section>
        <section class="article3"></section>
        <footer class="footer"></footer>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>layout3</title>
</head>
<body>
    <div id="wrap">
        <header class="header"></header>
        <aside class="aside"></aside>
        <section class="article1"></section>
        <section class="article2"></section>
        <section class="article3"></section>
        <footer class="footer"></footer>
    </div>
</body>
</html>

* {margin: 0; padding: 0;}
body {background-color: #e3f2fd;}
#wrap {width: 1200px; margin: 0 auto;}
.header {width: 100%; height: 100px; background: #81d4fa;}
.aside {float: left; width: 30%; height: 900px; background: #4fc3f7}
.article1 {float: left; width: 70%; height: 300px; background: #29b6f6;}
.article2 {float: left; width: 70%; height: 300px; background: #03a9f4;}
.article3 {float: left; width: 70%; height: 300px; background: #039be5;}
.footer {clear: both; width: 100%; height: 100px; background: #0288d1;}

/* 화면 너비 0 ~ 1200px */
@media (max-width: 1240px){
    #wrap {width: 100%;}
    .article1 {height: 450px;}
    .article2 {height: 450px;}
    .article3 {width: 100%;}
}
/* 화면 너비 0 ~ 768px */
@media (max-width: 768px){
    .aside {width: 100%; height: 300px;}
    .article1 {width: 50%;}
    .article2 {width: 50%;}
}
/* 화면 너비 0 ~ 480px */
@media (max-width: 480px){
    .article1 {width: 100%;}
    .article2 {width: 100%;}
}

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

728x90

저작자표시

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

스터디 후기 이다*

스터디 후기 이다*

05. 반응형 웹 사이트 만들기(2019) - 반응형 레이아웃 유형3

Code Youtube

Code Reference

Reference Site

사용 프로그램

Code example

사이트 제작/02 RESPONSIVE Related Articles

더보기

티스토리툴바