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