본문 바로가기

TUTORIAL


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

(2019/01) 반응형 사이트 만들기 - 레이아웃 시멘틱 태그

(2019/01) 반응형 사이트 만들기 - 레이아웃 시멘틱 태그

반응형 웹 사이트를 만들기 위한 레이아웃 연습입니다. HTML5 시멘트 태그를 사용하여 만듭니다. 반응형 사이트 역시 레이아웃을 연습해야 합니다.

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


























  • rodi 2019.06.05 00:18 댓글주소 수정/삭제 댓글쓰기

    강의 너무 잘 보고 있습니다. 감사합니다.

  • 정회현 2019.07.23 16:10 댓글주소 수정/삭제 댓글쓰기

    안녕하세요 블라켓 설치 하다가 궁금한 점 있어 질문 드립니다
    블라켓 설치를 했는데 파일이름이 깨지는 현상이 있습니다.
    참고 파일을 보내고 싶은데 첨부할수없는 환경이라 이렇게 글로 남깁니다.
    새로운 파일을 열면 탭이 생기면서 탭에 파일명이 나와야 하는데 파일명이 안나오고 글자가 깨진것 처럼 나와요
    해결 할 수 있는 방법이 없을까요?

    • 한글을 쓰셔서 그렇습니다. 브라켓과 파일질라에서는 한글이 깨져서 에러나면 지워지지 않을 것입니다. 다른 에디터를 이용하면 지울 수도 있습니다.

  • mori 2019.08.21 05:39 댓글주소 수정/삭제 댓글쓰기

    웹표준 강의부터 쭉 정주행했습니다.
    반응형부터 출석체크 하려고 왔어요.

    http://over1991.dothome.co.kr/reponsive/layout.html
    일단 하나..!
    넘나 잘보고있습니다.