01. 반응형 사이트 만들기 - 레이아웃 시멘틱 태그

반응형 웹 사이트를 만들기 위한 레이아웃 연습입니다.
웹 페이지의 레이아웃은 웹 사이트의 외관을 결정짓는 매우 중요한 요소이니, 반응형 사이트 역시 레이아웃을 연습해야 합니다.
이번 강의에서는 HTML5 시멘트 태그를 사용하여 만듭니다. 웹표준 사이트만들기 강의를 떠올리면서 차근차근 같이 공부해 보아요~~~
여러분의 열공을 응원하며, 화이팅 입니다!!!

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>Document</title>
    <style>
        body {background: #c8e6c9;}
        #wrap {width: 1000px; height: 900px; margin: 0 auto;}
        header {width: 1000px; height: 100px; background: #2e7d32;}
        nav {width: 1000px; height: 100px; background: #388e3c; }
        aside {float: left; width: 300px; height: 600px; background: #43a047;}
        section {float: left; width: 700px; height: 600px; background: #4caf50;}
        footer {float: left; width: 1000px; height: 100px; background: #66bb6a;}
    </style>
</head>
        
<body>
    <div id="wrap">
        <header></header>
        <nav></nav>
        <aside></aside>
        <section></section>
        <footer></footer>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
        
<body>
    <div id="wrap">
        <header></header>
        <nav></nav>
        <aside></aside>
        <section></section>
        <footer></footer>
    </div>
</body>
</html>

body {
    background: #c8e6c9;
}
#wrap {
    width: 1000px; 
    height: 900px; 
    margin: 0 auto;
}
header {
    width: 1000px; 
    height: 100px; 
    background: #2e7d32;
}
nav {
    width: 1000px; 
    height: 100px; 
    background: #388e3c; 
}
aside {
    float: left; 
    width: 300px; 
    height: 600px; 
    background: #43a047;
}
section {
    float: left; 
    width: 700px; 
    height: 600px; 
    background: #4caf50;
}
footer {
    float: left; 
    width: 1000px; 
    height: 100px; 
    background: #66bb6a;
}

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

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

스터디 후기 이다*

스터디 후기 이다*

01. 반응형 사이트 만들기 - 레이아웃 시멘틱 태그

Code Youtube

Code Reference

Reference Site

사용 프로그램

Code example

사이트 제작/02 RESPONSIVE Related Articles

더보기

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역