CSS에서 간단한 단일 열 웹사이트 레이아웃

이 강의에서는 간단한 단일 열 웹사이트 레이아웃을 만드는 연습을 할 것입니다. 예를 들어 다음과 같은 레이아웃을 만들어 봅시다:

구현을 시작해 봅시다. 일반적으로 각 레이아웃은 나머지 전체 사이트를 포함하는 <wrapper>라는 일반적인 div로 시작합니다:

html<div id="wrapper">
  
</div>

우리의 경우 래퍼는 화면 중앙에 정렬됩니다:

css#wrapper {
  width: 800px;
  margin: 50px auto;
}

또한 테두리를 갖게 됩니다:

css#wrapper {
  width: 800px;
  margin: 50px auto;
  border: 1px solid black;
}

이제 페이지의 기본 구조를 만들어 봅시다. 이 구조는 메뉴와 기본 콘텐츠로 구성됩니다:

html<div id="wrapper">
  <div id="menu">
    
  </div>
  <div id="content">
    
  </div>
</div>

블록에 내용을 추가해 봅시다:

html<div id="wrapper">
  <div id="menu">
    <a href="#">link text 1</a>
    <a href="#" class="active">link text 2</a>
    <a href="#">link text 3</a>
    <a href="#">link text 4</a>
    <a href="#">link text 5</a>
  </div>
  <div id="content">
    <h1>Proin tristique lorem</h1>
    <p>
      ...
    </p>
    <p>
      ...
    </p>
  </div>
</div>

이제 블록에 스타일을 추가할 수 있습니다. 먼저 메뉴에 스타일을 추가해 봅시다:

css#menu {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
  background-color: #484848;
}
#menu a {
  margin: 0 5px;
  padding: 15px 25px;
  text-decoration: none;
  color: #fff;
  font: bold 14px Arial;
}
#menu a:hover, #menu a.active {
  color: #484848;
  background-color: #fff;
}

이제 콘텐츠 요소에 스타일을 추가해 봅시다:

css#content {
  padding: 0 30px 20px;
}
#content h1 {
  text-align: center;
  margin-top: 0;
  margin-bottom: 10px;
}
#content p {
  padding: 0 10px;
  margin-bottom: 5px;
  font: 18px/1.3 Arial;
  text-align: justify;
}

이제 모든 코드를 함께 모을 수 있습니다:

html<div id="wrapper">
  <div id="menu">
    <a href="#">link text 1</a>
    <a href="#" class="active">link text 2</a>
    <a href="#">link text 3</a>
    <a href="#">link text 4</a>
    <a href="#">link text 5</a>
  </div>
  <div id="content">
    <h1>Proin tristique lorem</h1>
    <p>
      ...
    </p>
    <p>
      ...
    </p>
  </div>
</div>

css#wrapper {
  width: 800px;
  margin: 50px auto;
  border: 1px solid black;
}

#menu {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
  background-color: #484848;
}
#menu a {
  margin: 0 5px;
  padding: 15px 25px;
  text-decoration: none;
  color: #fff;
  font: bold 14px Arial;
}
#menu a:hover, #menu a.active {
  color: #484848;
  background-color: #fff;
}

#content {
  padding: 0 30px 20px;
}
#content h1 {
  text-align: center;
  margin-top: 0;
  margin-bottom: 10px;
}
#content p {
  padding: 0 10px;
  margin-bottom: 5px;
  font: 18px/1.3 Arial;
  text-align: justify;
}

팁 1

위에서 아래로 여백을 지정하는 것이 가장 편리합니다. 예를 들어, 메뉴와 콘텐츠가 있고 그 사이에 빈 공간이 있습니다. 분명히 이 공간은 메뉴의 하단 여백, 콘텐츠의 상단 여백, 또는 두 가지가 동시에 영향을 미쳐 만들 수 있습니다. 이 경우 메뉴에 하단 여백을 지정하고, 콘텐츠에서는 <h1의 기본 <padding 및 <margin을 제거하는 것이 좋습니다.

팁 2

자식 요소는 부모 요소 사이의 여백을 형성해서는 안 됩니다. 예를 들어, 메뉴가 있습니다. 이 메뉴의 하단 여백은 메뉴가 있는 div의 <margin이나 링크의 <margin으로 형성될 수 있습니다. 첫 번째 옵션을 선택하는 것이 좋습니다. 링크가 부모를 우회해서 작용해서는 안 되기 때문입니다.

팁 3

두 요소 사이에 여백이 있고 이 경우 시각적으로 <margin과 <padding 중 어떤 것을 선택해도 차이가 없다면, <margin을 선택하세요. <margin이 요소 사이의 여백을 만들어야 하기 때문입니다.

실습 과제