2018.12.03 화면배치(overflow,margin사용)
2018. 12. 3. 16:40ㆍHTML5&CSS
#1 화면배치하기 ( overflow의 사용)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>화면 배치</title>
<style>
header{background-color: aqua; height: 100px;}
nav{background-color: yellow; float:left; width: 25%;}
section{background-color:moccasin; float: left; width: 50%;}
aside{background-color: tomato; float:left; width: 25%;}
footer{background-color: gray; clear: both; height: 200px;}
.d1{ border:1px solid red; padding:10px; margin:5px; float:left; width:200px; height:273px; overflow: scroll; }
.d2{ border:1px solid red; padding:10px; margin:5px; float:left; width:200px; height:273px; overflow: hidden; }
</style>
</head>
<body>
<header>Header</header>
<nav>Nav</nav>
<section>
<div class="d1">Hello, My name is tic tak tokHelloHello, My name is tic tak tokHelloHello, My name is tic tak tokHelloHello,
My name is tic tak tokHelloHello, My name is tic tak tokHelloHello, My name is tic tak tokHello</div>
<div class="d2">Hello, My name is tic tak tokHelloHello, My name is tic tak tokHelloHello, My name is tic tak tokHelloHello,
My name is tic tak tokHelloHello, My name is tic tak tokHelloHello, My name is tic tak tok Hello,
My name is tic tak tokHello Hello, My name is tic tak tokHello Hello, My name is tic tak tokHello
My name is tic tak tokHelloHello, My name is tic tak tokHelloHello, My name is tic tak tokHello
My name is tic tak tokHelloHello, My name is tic tak tokHelloHello, My name is tic tak tokHello</div>
</section>
<aside>Aside</aside>
<footer>Footer</footer>
</body>
</html>
#2 화면배치( 중앙배치)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>화면 배치</title>
<style>
*{margin: 0; padding:0;}
.container{width: 1024px; margin: 10px auto;}
header{background-color: aqua; height: 100px;}
nav{background-color: yellow; float:left; width: 25%;}
section{background-color:moccasin; float: left; width: 50%;}
aside{background-color: tomato; float:left; width: 25%;}
footer{background-color: gray; clear: both; height: 200px;}
.d1{ border:1px solid red; padding:10px; margin:5px; width:60%;
display:table-cell;
/* height:273px; */
/* overflow: scroll; 스크롤 */
}
.d2{ border:1px solid red; padding:10px; margin:5px; width:40%;
display:table-cell;
/* height:273px; */
/* overflow: hidden; 숨기기*/
}
</style>
</head>
<body>
<div class="container">
<header>Header</header>
<nav>Nav</nav>
<section>
<div class="d1">Hello, My name is tic tak tokHelloHello, My name is tic tak tokHelloHello, My name is tic tak tokHelloHello,
My name is tic tak tokHelloHello, My name is tic tak tokHelloHello, My name is tic tak tokHello</div>
<div class="d2">Hello, My name is tic tak tokHelloHello, My name is tic tak tokHelloHello, My name is tic tak tokHelloHello,
My name is tic tak tokHelloHello, My name is tic tak tokHelloHello, My name is tic tak tok Hello,
My name is tic tak tokHello Hello, My name is tic tak tokHello Hello, My name is tic tak tokHello
My name is tic tak tokHelloHello, My name is tic tak tokHelloHello, My name is tic tak tokHello
My name is tic tak tokHelloHello, My name is tic tak tokHelloHello, My name is tic tak tokHello</div>
</section>
<aside>Aside</aside>
<footer>Footer</footer>
</div>
</body>
</html>
'HTML5&CSS' 카테고리의 다른 글
| 2018.12.04 로그인폼,텍스트 입력창,버튼 (0) | 2018.12.04 |
|---|---|
| .vscode 설정후 Ctrl + Shift + B 실행하기 (0) | 2018.12.04 |
| 2018.11.30 시멘틱구조 , 화면배치 , 로그인폼 (0) | 2018.11.30 |
| 2018.11.29 테이블여백 & 하이퍼링크 & id링크 (0) | 2018.11.29 |
| 2018.11.28 글자배경/이미지삽입/표만들기/리스트만들기 (0) | 2018.11.28 |