CSS에서 간단한 단일 열 웹사이트 레이아웃
이 강의에서는 간단한 단일 열 웹사이트 레이아웃을 만드는 연습을 할 것입니다. 예를 들어 다음과 같은 레이아웃을 만들어 봅시다:
구현을 시작해 봅시다. 일반적으로 각 레이아웃은 나머지 전체 사이트를 포함하는 <wrapper>라는 일반적인 div로 시작합니다:
<div id="wrapper">
</div>
우리의 경우 래퍼는 화면 중앙에 정렬됩니다:
#wrapper {
width: 800px;
margin: 50px auto;
}
또한 테두리를 갖게 됩니다:
#wrapper {
width: 800px;
margin: 50px auto;
border: 1px solid black;
}
이제 페이지의 기본 구조를 만들어 봅시다. 이 구조는 메뉴와 기본 콘텐츠로 구성됩니다:
<div id="wrapper">
<div id="menu">
</div>
<div id="content">
</div>
</div>
블록에 내용을 추가해 봅시다:
<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>
이제 블록에 스타일을 추가할 수 있습니다. 먼저 메뉴에 스타일을 추가해 봅시다:
#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;
}
이제 모든 코드를 함께 모을 수 있습니다:
<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>
#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이 요소 사이의 여백을 만들어야 하기 때문입니다.
