홈페이지를 반으로 나누는 것은 CSS만으로 간단히 가능하다. 일단 HTML5부분
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel='stylesheet' href='style.css' />
</head>
<body>
<div class="split left"> this is left part</div>
<div class="split right">this is right part</div>
</body>
</html>
일단 css경로는 같은 폴더에 있는 것으로 가정한다.
그리고 CSS코드
/* Split the screen in half */
.split {
height: 100%;
width: 50%;
position: fixed;
z-index: 1;
top: 0;
overflow-x: hidden;
padding-top: 20px;
}
/* Control the left side */
.left {
left: 0;
background-color: white;
}
/* Control the right side */
.right {
right: 0;
background-color: snow;
}
이러면 한쪽에는 흰색 백그라운드 칼라의 부분이, 그리고 오른 쪽은 스노우 칼라 백그라운드 부분이 생성된다.
끝.
'' 카테고리의 다른 글
CSS로 홈페이지 반드로 나누기. (0) | 2018.10.27 |
---|