프론트엔드/웹 표준 사이트 만들기
레이아웃 만들기
김곰댕
2021. 8. 30. 17:02
728x90
1번 레이아웃
<!DOCTYPE html>
<html lang = "ko"> <!--언어설정 : PC나 모바일을 통해서 웹에 접근하는 경우 웹 접근성을 향상시키기 위해 필요한 속성(주언어가 명시되어 있는 경우 해당언어에 맞게 점자 혹은 소리가 번역되어 올바른 해석으로 정보 전달이 가능해짐) -->
<head>
<meta charset = "UTF-8">
<title>layout1</title>
<!--css를 사용하기 위해서는 style을 먼저 선언해주어야함-->
<style>
body{background:#c8e6c9;}
/*margin: auto : 블록구조를 가운데 정렬 / text-transform : 텍스트를 대문자나 소문자로 변환*/
#wrap {width: 1000px; height: 900px; margin: 0 auto; font-size: 40px; color: #fff; text-align: center; text-transform: uppercase;}
/*line-height : 문장과 문장 사이의 간격 설정 (해당 기능을 사용하여 문자가 블록의 가운데에 있는것처럼 보이게 만들어줌)*/
#header {width: 1000px; height: 100px; line-height: 100px; background: #2e7d32;}
#nav {width: 1000px; height: 100px; line-height: 100px; background: #388e3c}
/*float: left 블록요소를 왼쪽으로 정렬*/
#side {float: left; width: 300px; height: 600px; line-height: 600px; background: #43a047}
#contents {float: left; width: 700px; height: 600px; line-height: 600px; background: #4caf50}
/*float를 사용하고 footer가 side와 contents의 뒤에 가려 보이지 않는 문제가 발생
해결법 : footer도 floa를 통해 정렬시켜준다. */
/*background : 배경이미지의 속성을 설정
background-color : 백그라운드 색상을 설정*/
#footer {float: left; width: 1000px; height: 100px; line-height: 100px; background: #66bb6a}
</style>
</head>
<body>
<!--div : 문서의 섹션을 만들거나 영역을 나눌때 사용 -->
<div id ="wrap">
<div id = "header">header</div>
<div id = "nav">nav</div>
<div id = "side">side</div>
<div id = "contents">contents</div>
<div id = "footer">footer</div>
</div>
</body>
</html>
<!--블록구조는 자기 영역에 다른애들이 오는것을 싫어함 : 1자구조가됨(자신의 오른쪽에 다른애가 오지 않게)-->
2번 레이아웃
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>layout2</title>
<style>
body {background-color: #b3e5fc;}
#wrap {width: 1000px; height: 900px; margin: 0 auto; font-size: 40px; text-align: center; color: #fff; text-transform: uppercase;}
#header{width: 1000px; height: 100px; line-height: 100px; background-color: #0277bd;}
#nav {width: 1000px; height: 100px; line-height: 100px; background-color: #0288d1}
#side_left {float:left; width: 300px; height: 600px; line-height: 600px; background-color: #039be5}
#contents {float:left; width: 400px; height: 600px; line-height: 600px; background-color: #03a9f4}
#side_right {float:left; width: 300px; height: 600px; line-height: 600px; background-color: #29b6f6}
#footer {float:left; width: 1000px; height: 100px; line-height: 100px; background-color: #0288d1}
</style>
</head>
<body>
<div id = "wrap">
<div id = "header">header</div>
<div id = "nav">nav</div>
<div id = "side_left">side_left</div>
<div id = "contents">contents</div>
<div id = "side_right">side_right</div>
<div id = "footer">footer</div>
</div>
</body>
</html>
3번 레이아웃
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>layout3</title>
<style>
body {background-color: #d1c4e9;}
#wrap {width: 1000px; height: 900px; margin: auto; font-size: 40px; color: #fff; text-align: center; text-transform: uppercase;}
/*class 사용 (.)*/
.side {float:left; width: 300px; height: 900px; line-height: 900px; background-color: #4527a0;}
.header {float:left; width: 700px; height: 300px; line-height: 300px; background-color: #512da8}
.contents {float:left; width: 700px; height: 300px; line-height: 300px; background-color: #5e35b1}
.footer {float:left; width: 700px; height: 300px; line-height: 300px; background-color: #673ab7}
</style>
</head>
<body>
<div id = "wrap">
<div class = "side">side</div>
<div class = "header">header</div>
<div class = "contents">contents</div>
<div class = "footer">footer</div>
</div>
</body>
</html>
<!--id 선택자 : id 선택자는 문서안에 있는 단 하나의 요소에 스타일을 적용하는 경우에 사용합니다. 선택지에 샤프(#)와 id(임의의 이름)을 붙여 식별합니다.
class 선택자 : class 선택자는 문서 안 복수의 요소에 스타일을 적용하는 경우에 사용합니다. 요소명에 피리어드(.)와 class명(임의의이름)을 붙여 구별합니다.-->
4번 레이아웃
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>layout4</title>
<style>
body {background-color: #ffe0b2 ;}
#wrap {width: 1000px; height: 900px; margin: auto; font-size: 30px; color:#fff; text-align: center; text-transform: uppercase;}
.header {width: 1000px; height: 100px; line-height: 100px; background-color: #ef6c00;}
.nav {width: 1000px; height: 100px; line-height: 100px; background-color: #f57c00;}
.side {float:left; width: 300px; height: 600px; line-height: 600px; background-color: #fb8c00;}
.contents1 {float:left; width: 700px; height: 300px; line-height: 300px; background-color: #ff9800;}
.contents2 {float:left; width: 700px; height: 300px; line-height: 300px; background-color: #ffa726;}
/*clear : left(왼쪽으로 붙는 float정렬을 취소한다.) / right(오른쪽으로 붙는 float정렬을 취소한다.) / both(왼쪽, 오른쪽으로 모두 붙는 float 정렬을 취소한다.)*/
.footer {clear: both; width: 1000px; height: 100px; line-height: 100px; background-color: #ffb74d;}
</style>
</head>
<body>
<div id = "wrap">
<div class = "header">header</div>
<div class = "nav">nav</div>
<div class = "side">side</div>
<div class = "contents1">contents1</div>
<div class = "contents2">contents2</div>
<div class = "footer">footer</div>
</div>
</body>
</html>
5번 레이아웃
<!DOCTYPE html>
<html lang ="ko">
<head>
<meta charset="UTF-8">
<title>layout5</title>
<style>
/*tag들의 여백을 조절*/
* {margin: 0; padding: 0;}
/*전체영역*/
#wrap {font-size: 30px; color: #fff; text-align: center; text-transform: uppercase;}
/*width는 100%가 기본값이기 때문에 100%인 경우에는 생략 가능*/
/*부모의 height값이 자식의 값이랑 동일한 경우 생략 가능*/
#header-wrap {width: 100%; height: 100px; background-color: #8d6e63}
#banner-wrap {width: 100%; height:300px; background-color: #a1887f}
/*height값을 생략한 경우*/
#content-wrap {width: 100%; background-color: #bcaaa4}
/*width: 100%를 생략한 경우*/
#footer-wrap {height: 300px; background-color: #d7ccc8}
.header-container {width: 1000px; height: 100px; line-height: 100px; margin: auto; background-color: #3e2723;}
.banner-container {width: 1000px; height: 300px; line-height: 300px; margin: auto; background-color: #4e342e;}
.content-container {width: 1000px; height: 500px; line-height: 500px; margin: auto; background-color: #5d4037;}
.footer-container {width: 1000px; height: 300px; line-height: 300px; margin: auto; background-color: #6d4c41;}
</style>
</head>
<body>
<!--전체영역(wrap) / 가운데 영역(container)-->
<div id = "wrap">
<div id = "header-wrap">
<div class = "header-container">header</div>
</div>
<div id = "banner-wrap">
<div class = "banner-container">banner</div>
</div>
<div id = "content-wrap">
<div class = "content-container">content</div>
</div>
<div id = "footer-wrap">
<div class = "footer-container">footer</div>
</div>
</div>
</body>
</html>
6번 레이아웃
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>layout6</title>
<style>
* {margin: 0; padding: 0;}
#wrap {font-size: 30px; color: #fff; text-align: center;}
#header {height: 140px; line-height: 140px; background: #ffe1e4;}
#banner {height: 450px; line-height: 450px; background: #fbd6e3;}
#contents {height: 950px; line-height: 950px;background: #ead5ee;}
#footer {height: 220px; line-height: 220px; background: #d6ebfd;}
/*
예제 5) layout5와 같은 방식으로 코드 작성
.header-container {width: 1100px; height: 140px; margin: 0 auto; background: #999;}
.banner-container {width: 1100px; height: 450px; margin: 0 auto; background: #888;}
.contents-container {width: 1100px; height: 950px; margin: 0 auto; background: #777;}
.footer-container {width: 1100px; height: 220px; margin: 0 auto; background: #666;}
*/
/*위의 코드를 더 간결하게 작성*/
/*inherit: 상속*/
.container {width: 1100px; margin: 0 auto; height: inherit; background: rgba(0,0,0,0.3);}
</style>
</head>
<body>
<div id = "wrap">
<div id ="header">
<div class = "container">header</div>
</div>
<div id ="banner">
<div class = "container">banner</div>
</div>
<div id ="contents">
<div class = "container">contents</div>
</div>
<div id ="footer">
<div class = "container">footer</div>
</div>
</div>
</body>
</html>
7번 레이아웃
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>layout7</title>
<style>
* {margin: 0; padding: 0;}
#wrap {font-size: 20px; color: #fff; text-align: center;}
#header {height: 140px;}
#banner {height: 450px; line-height: 450px; background: #4dd0e1;}
#content {height: 950px;}
#footer {height: 220px;}
#header-top {height: 70px; line-height: 70px; background: #b2ebf2;}
#header-nav {height: 70px; line-height: 70px; background: #80deea;}
#content1 {height: 90px; line-height: 90px; background: #26c6da;}
#content2 {height: 480px; line-height: 480px; background: #00bcd4;}
#content3 {height: 380px; line-height: 380px; background: #00acc1;}
#footer-nav {height: 60px; line-height: 60px; background: #0097a7;}
#footer-into {height: 160px; line-height: 160px; background: #00838f;}
.container {width: 1400px; height: inherit; margin: 0 auto; background: rgba(255, 255, 255, 0.3);}
</style>
</head>
<body>
<div id = "wrap">
<div id = "header">
<div id = "header-top">
<div class = "container">header-top</div>
</div>
<div id = "header-nav">
<div class = "container">header-nav</div>
</div>
</div>
<div id = "banner">
<div class = "container">banner</div>
</div>
<div id = "content">
<div id = "content1">
<div class = "container">content1</div>
</div>
<div id = "content2">
<div class = "container">content2</div>
</div>
<div id = "content3">
<div class = "container">content3</div>
</div>
</div>
<div id = "footer">
<div id = "footer-nav">
<div class = "container">footer-nav</div>
</div>
<div id = "footer-into">
<div class = "container">footer-into</div>
</div>
</div>
</div>
</body>
</html>
더보기
참고 :
https://www.youtube.com/watch?v=tHy498wdPaA
728x90