Preface
이번 장에선 기본적인 박스 모델을 만들어보고, 지난 장에서 언급했던 마진과 패딩에 대해 다시 한 번 자세히 공부했다.
처음 마진과 패딩의 정의를 봤을 땐 솔직히 잘 이해가 되지 않았었는데,
직접 두 속성을 코드에 적용해보며 비교하자 두 개념의 차이점을 확실히 알 수 있었다.
1. CSS와 박스 모델
- 블록 레벨 요소: 태그를 사용해 요소를 삽입했을 때 혼자 한 줄을 차지하는 것
1) 해당 요소의 너비가 100%이다.
2) 왼쪽이나 오른쪽에 다른 요소가 올 수 없다.
- 인라인 레벨 요소: 콘텐츠만큼만 영역을 차지하는 것
1) 나머지 공간에 다른 요소가 올 수 있다.
- 박스 모델 요소: 박스 형태인 요소
- 박스 모델의 구성
1) 콘텐츠 영역
2) 패딩
3) 테두리
4) 마진 etc.
- 콘텐츠 영역의 크기
1) 너비: width 속성 사용
2) 높이: height 속성 사용
- width와 height의 속성 값
1) 크기: 너비나 높이의 값을 px나 em 단위로 지정한다.
2) 백분율: 박스 모델을 포함하는 부모 요소를 기준으로 너빗값이나 높잇값을 백분율로 지정한다.
3) auto: 박스 모델의 너빗값과 높잇값이 콘텐츠 양에 따라 자동으로 결정된다. (기본값)
- 실제 박스 모델이 차지하는 크기는 콘텐츠 영역 외에도 콘텐츠와 테두리 사이의 여백, 테두리 두께까지 계산해야 한다.
- box-sizing 속성: 박스 모델의 너비와 높이를 어떻게 결정할 것인지 선택한다.
1) border-box: 테두리까지 포함해서 너빗값을 지정한다.
→ 요소의 크기를 계산하기 쉽다.
2) content-box: 콘텐츠 영역만 너빗값을 지정한다. (기본값)
- box-shadow 속성: 그림자 효과를 준다.
1) 수평 거리: 그림자가 가로로 얼마나 떨어져 있는지를 나타내며, 양숫값은 요소의 오른쪽에, 음숫값은 요소의 왼쪽에 그림자를 만든다.
→ 필수 속성
2) 수직 거리: 그림자가 세로로 얼마나 떨어져 있는지를 나타내며, 양숫값은 요소의 아래쪽에, 음숫값은 요소의 윗쪽에 그림자를 만든다.
→ 필수 속성
3) 흐림 정도: 값이 커질수록 부드러운 그림자를 표시하며, 음숫값은 사용할 수 없다.
4) 번짐 정도: 양숫값을 사용하면 그림자가 퍼져서 박스보다 그림자가 크게 표시된다. (기본값: 0)
5) 색상: 한 개만 지정할 수도 있고, 공백으로 구분해서 여러 개의 색상을 지정할 수도 있다. (기본값: 현재 색상)
6) inset: 안쪽 그림자로 표시한다.
2. 테두리 스타일 지정하기
- 박스 모델은 테두리나 마진, 패딩 등을 지정할 때 한꺼번에 똑같이 지정하거나, 모두 다르게 지정할 수 있다.
1) top, right, bottom, left 순으로 지정한다.
2) 2개만 지정하면 전자는 위아래, 후자는 양 옆 값을 나타낸다.
- border-style 속성: 테두리 스타일을 지정한다.
1) none: 테두리가 없다. (기본값)
2) hidden: 테두리를 감춘다.
3) solid: 테두리를 실선으로 표시한다.
4) dotted: 테두리를 점선으로 표시한다.
5) dashed: 테두리를 짧은 직선으로 표시한다.
6) double: 테두리를 이중선으로 표시한다.
→ 두 선 사이의 간격: border-width
7) groove: 테두리를 창에 조각한 것처럼 표시한다.
8) ridge: 테두리를 창에서 튀어나온 것처럼 표시한다.
- border-width: 테두리 두께를 지정한다.
1) 1px이나 5px처럼 크기를 직접 입력한다.
2) 예약어 중 하나를 선택한다. (thin, medium, thick)
- border-color 속성: 박스 모델에서 테두리 색상을 지정한다.
- border 속성: 테두리 스타일을 묶어서 지정한다.
→ 테두리의 두께와 색상, 스타일의 속성값 순서는 상관 없다.
- border-radius 속성: 꼭짓점 부분에 원이 있다고 가정해서 둥글게 처리한다.
1) 크기: 반지름의 크기를 px, em의 단위와 함께 수치로 표시한다.
2) 백분율: 현재 요소의 크기를 기준으로 비율로 지정한다.
3) 이미지 요소의 너비와 높이를 똑같이 만든 후 반지름값을 너비나 높이의 50%로 지정하면 원이 된다.
4) top-right, bottom-right, bottom-left, top-left를 사용하여 꼭짓점마다 따로 처리할 수 있다.
- 꼭짓점을 타원 형태로 만들기
1) border-radius 속성에 반지름 대신 타원의 가로 반지름값과 세로 반지름값을 넣는다.
→ 가로 반지름과 세로 반지름 사이에 슬래시(/)를 넣어서 구분한다.
2) 특정한 꼭짓점만 타원 형태로 만들 땐 슬래시 없이 사용한다.
3. 여백을 조절하는 속성
- 마진: 두 박스 모델 사이의 여백 (요소 주변의 여백)
1) 단위, 백분율, auto 값을 사용하여 지정한다.
2) 배치할 요소의 너빗값을 정한 후 margin-left와 right의 속성값을 auto로 지정하면 웹 문서의 내용이 화면 중앙에 배치된다.
- 마진 중첩(상쇄): 요소를 세로로 배치할 경우에 각 요소의 마진과 마진이 서로 만나면 마진값이 큰 쪽으로 겹쳐지는 현상
→ 위아래 마진이 만날 때 합쳐지는 것이고, 양 옆 마진이 만날 경우엔 중첩되지 않는다.
- 패딩: 한 박스 모델에서 콘텐츠 영역과 테두리 사이의 여백
- 웹 브라우저에서 전체 내용을 화면 중앙에 배치하고, 마진을 사용하여 박스를 구분하는 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>상품 소개 페이지</title>
<link rel="stylesheet" href="css/product-result.css">
</head>
<body>
<div id="container">
<div id="description">
<h1>레드향</h1>
<p>껍질에 붉은 빛이 돌아 <b>레드향</b>이라 불린다.</p>
<p>레드향은 <em>한라봉과 귤을 교배</em>한 것으로<br>일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
<p>비타민 C와 비타민 P가 풍부해<br> <strong>혈액순환, 감기예방</strong> 등에 좋은 것으로 알려져 있다.</p>
</div>
<div id="receipe">
<h2>레드향 샐러드 레시피</h2>
<p><b>재료 : </b>레드향 1개, 아보카도 1개, 토마토 1개, 샐러드 채소 30g</p>
<p><b>드레싱 : </b>올리브유 1큰술, 레몬즙 2큰술, 꿀 1큰술, 소금 약간</p>
<ol>
<li>샐러드 채소를 씻고 물기를 제거한 후 준비합니다.</li>
<li>레드향과 아보카도, 토마토를 먹기 좋은 크기를 썰어둡니다.</li>
<li>드레싱 재료를 믹서에 갈아줍니다.</li>
<li>볼에 샐러드 채소와 썰어 둔 레드향, 아보카도, 토마토를 넣고 드레싱을 뿌리면 끝!</li>
</ol>
</div>
<div id="package">
<h2>상품 구성</h2>
<table>
<caption>선물용과 가정용 상품 구성</caption>
<colgroup>
<col style="background-color:#eee;">
<col>
<col span="2" style="width:150px">
</colgroup>
<thead>
<tr>
<th>용도</th>
<th>중량</th>
<th>갯수</t>
<th>가격</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">선물용</td>
<td>3kg</td>
<td>11~16과</td>
<td>35,000원</td>
</tr>
<tr>
<td>5kg</td>
<td>18~26과</td>
<td>52,000원</td>
</tr>
<tr>
<td rowspan="2">가정용</td>
<td>3kg</td>
<td>11~16과</td>
<td>30,000원</td>
</tr>
<tr>
<td>5kg</td>
<td>18~26과</td>
<td>47,000원</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>table, th, td {
border:1px solid #ccc;
border-collapse: collapse;
}
th, td {
padding:10px 20px;
}
#container {
width:600px; /* 컨테이너의 너비 */
border:none; /* 테두리 없앰 */
margin:0 auto; /* 화면 중앙에 배치 */
}
div {
border:1px dotted #222; /* 테두리 */
padding:20px; /* 패딩 */
margin:20px; /* 마진 */
}
#description {
/* width: 400px; */
border-top-left-radius:30px; /* 왼쪽 위 모서리 라운딩 */
border-top-right-radius:30px; /* 오른쪽 위 모서리 라운딩 */
}
#package {
/* width: 400px; */
border-bottom-left-radius:30px; /* 왼쪽 아래 모서리 라운딩 */
border-bottom-right-radius:30px; /* 오른쪽 아래 모서리 라운딩 */
}
'Web Front > HTML + CSS + 자바스크립트' 카테고리의 다른 글
| [CSS] 이미지와 그라데이션 효과로 배경 꾸미기 (0) | 2022.07.28 |
|---|---|
| [CSS] 레이아웃을 구성하는 CSS 박스 모델 (2) (0) | 2022.07.27 |
| [CSS] 텍스트를 표현하는 다양한 스타일 (0) | 2022.07.23 |
| [CSS] CSS의 기본 (0) | 2022.07.21 |
| [HTML] 입력 양식 작성하기 (2) (0) | 2022.07.18 |
댓글