○ padding 속성의 이해
패딩은 '콘텐츠 영역'과 '테두리(border)' 사이의 여백 공간을 의미하게 됩니다. 마진(margin)과 마찬가지로, 패딩 역시 4개 방향에 적용하게 됩니다.
선택자 {
padding: 20px 30px 40px 50px;
}
선택자 {
padding-top: 20px;
padding-bottom: 50px;
}
아래 예제를 통해서, 지금까지 배워온 표와 태그 요소들을 사용해서 표를 한번 완성해 보도록 하겠습니다. 일단 아래 코드를 보지 않고, 하단의 이미지 화면을 CSS 없이 구현해 보는 것을 목표로 하겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/css_example.css">
</head>
<body>
<div id="container">
<div id="description">
<h1>Nat King Cole</h1>
<p>냇킹콜 탄생 <b>100주년</b> 기념 앨범</p>
<p>영화 <em>화양연화</em>를 본 사람들에게 익숙한 노래들입니다. <br>총 17곡의 주옥
같은 라틴의 정수가 콜의 연기 자욱한 목소리로 한 장의 LP에 담겨 있습니다.</p>
</div>
<div id="receipe">
<h2>젠틀 레인 (Gentle Rain)</h2>
<p><b>발매일 :</b> 2005년</p>
<p><b>발매회사 :</b> 강앤뮤직</p>
<ol>
<li>Raindrops (Intro)</li>
<li>After The Gentle Rain</li>
<li>Into The Rain</li>
</ol>
</div>
<div id="package">
<h2>한정판 구성</h2>
<table>
<caption>한정판 LP 상품 구성</caption>
<colgroup>
<col style="background-color: bisque;">
<col>
<col span="2" style="width:150px">
</colgroup>
<thead>
<tr>
<th>상품 종류</th>
<th>음반 형태</th>
<th>특전</th>
<th>가격</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">한정판</td>
<td>LP</td>
<td>8인치 싱글</td>
<td>70000원</td>
</tr>
<tr>
<td>TAPE</td>
<td>카세트 테이프 싱글</td>
<td>50000원</td>
</tr>
<tr>
<td rowspan="2">일반판</td>
<td>LP</td>
<td>소개 책자</td>
<td>60000원</td>
</tr>
<tr>
<td>CD</td>
<td>스티커</td>
<td>30000원</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
위의 HTML 문서를 통해서 일단 최소한의 스타일을 적용해 레이아웃을 형성하고, 표를 삽입했습니다. 현재 별도의 CSS가 적용되지 않은 상태의 화면은 아래와 같습니다.
이제 전체적인 구조에 대해서 말해보겠습니다. 우선 3개의 div는 전체를 모두 감싸는 div, id="container"로 감싸겠습니다. 단, 이 컨테이너의 width는 600px으로 고정하고 테두리를 없애서 가시적으로는 보이지 않는 역할을 합니다.
그리고 세 개의 div는 기본적으로 1px의 검은색 테두리를 갖는 것으로 합니다.
하단의 table의 경우 테두리를 그리고 각 셀에 적당한 패딩 값을 적용해 보기 좋게 표현합니다. 이를 CSS로 적용해 아래처럼 표현해 보겠습니다.
table, th, td {
border: 1px solid gray;
border-collapse: collapse;
}
th, td {
padding: 10px 25px;
}
div {
border: 1px solid black;
}
#container {
width: 600px;
border: none;
}
위 스타일을 적용하면, 아래 그림과 같이 변경됩니다.
이제 container 요소를 기준으로 브라우저의 가운데에 정렬을 맞추고, 세 개의 마진 값을 적용해 보겠습니다.
table, th, td {
border: 1px solid gray;
border-collapse: collapse;
}
th, td {
padding: 10px 25px;
}
div {
border: 1px solid black;
padding: 20px;
margin-bottom: 30px;
}
#container {
width: 600px;
border: none;
margin: 0 auto;
}
#description {
border-top-left-radius: 25px;
border-top-right-radius: 25px;
}
#package {
border-bottom-left-radius: 25px;
border-bottom-right-radius: 25px;
}
자, 이제는 바로 위의 완성 페이지 화면을 참고해 HTML과 CSS를 예제를 참조하지 않고 직접 처음부터 구축해 보시기 바랍니다.
'Programming > HTML+CSS' 카테고리의 다른 글
| [CSS] 4. 레이아웃 설계(2) - float 1 (0) | 2023.04.17 |
|---|---|
| [CSS] 4. 레이아웃 설계(1) - display (0) | 2023.04.14 |
| [CSS] 3. 박스 모델(5) - 여백 속성(margin, padding) 1 (0) | 2023.04.12 |
| [CSS] 3. 박스 모델(4) - 테두리 스타일 3 (0) | 2023.04.12 |
| [CSS] 3. 박스 모델(4) - 테두리 스타일 2 (0) | 2023.04.10 |
