티스토리 뷰

CSS/Layout

CSS Website Layout

carrot62 2020. 8. 2. 19:32

웹 페이지를 디자인하려면 각 항목의 영역을 나누는 것, layout을 파악하는 것이 중요하다. 

layout 예시

Header and Navigation Bar

  • Header
    • header 태그 또는 div를 사용해서 class 이름으로 header를 지정해줄 수도 있다
<header>
    /* header 속성 정의 */
</header>
  • Navigation Bar
    • nav 태그 또는 div를 사용해서 지정할 수 있다

<!DOCTYPE html>
<html>
<head>
<style>

	nav{
    	background-color: black;
        overflow: hidden;
    }
    nav a{
    	display: inline-block;
        /*또는
        display: block;
        float: left;        
        */
    	text-decoration: none;
        color: white;
        padding: 15px 20px;
        text-align: center;
    }
    nav a:hover{
    	background-color: rgb(230, 230, 230);
        color: black;
    }

</style>
</head>
<body>

<nav>
	<a href="#">Link</a>
    <a href="#">Link</a>
    <a href="#">Link</a>
</nav>

</body>
</html>

링크가 옆에 이어서 나오도록 설정하는 방법:

  1. display: inline-block;
  2. display: block; float: left;

Content

예제) 기본 3-column layout을 가지고 있지만, 작은 화면에서는 1-column layout처럼 보이게 만들기

반드시 box-sizing: border-box 설정을 전체에 적용하도록 하자.

* {
   box-sizing: border-box;
}

이 설정이 없다면, 다음과 같이 3개의 column은 나란히 나타나지 않는다:

box-sizing 속성을 정의하고 나면: 사용자가 각 column에 지정했던 width 설정(예: width: 33.33%)이 정상적으로 적용된다.

추가로 각 column이 화면과의 여백없이 딱 붙어나오게 하고 싶다면:

body{
    margin: 0;
}
/* Create three equal columns that floats next to each other */
.column {
  float: left;
  width: 33.33%;
  padding: 15px;
}

화면의 크기가 줄어들었을 때 각 column이 쌓이게 하고 싶다면:

/* Responsive layout - makes the three columns stack on
top of each other instead of next to each other */
@media screen and (max-width:600px) {
  .column {
    width: 100%;
  }
}

위 방법은 웹 페이지를 responsive layout으로 만드는 방법이다.

Column 이후에 float를 지우기 위해서는:

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

 요약 정리: 

완성된 이후의 모습

<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Website Layout</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

/* Style the header */
.header {
  background-color: #f1f1f1;
  padding: 20px;
  text-align: center;
}

/* Style the top navigation bar */
.topnav {
  overflow: hidden;
  background-color: #333;
}

/* Style the topnav links */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Change color on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Create three equal columns that floats next to each other */
.column {
  float: left;
  width: 33.33%;
  padding: 15px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width:600px) {
  .column {
    width: 100%;
  }
}
</style>
</head>
<body>

<div class="header">
  <h1>Header</h1>
  <p>Resize the browser window to see the responsive effect.</p>
</div>

<div class="topnav">
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#">Link</a>
</div>

<div class="row">
  <div class="column">
    <h2>Column</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
  </div>
  
  <div class="column">
    <h2>Column</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
  </div>
  
  <div class="column">
    <h2>Column</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
  </div>
</div>

</body>
</html>