홈페이지를 반으로 나누는 것은 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;
}



이러면 한쪽에는 흰색 백그라운드 칼라의 부분이, 그리고 오른 쪽은 스노우 칼라 백그라운드 부분이 생성된다.


끝.

'Coding Study > HTML5' 카테고리의 다른 글

CSS로 홈페이지 반드로 나누기.  (0) 2018.10.27

+ Recent posts