1. 박스 모델(Box Model)
: 각 HTML 태그 요소를 하나의 박스로 보고, 박스 크기, 박스 배경 색, 박스 여백 등 HTML 태그를 박스로 다루는 체계
2. 박스의 구성
- 콘텐츠 : HTML 태그의 텍스트나 이미지 부분
- 패딩(padding) : 콘텐츠를 직접 둘러싸고 있는 내부 여백
- 테두리(border) : 패딩 외부의 외곽선 (직선, 점선, 이미지 사용 가능)
- 여백(margin) : 박스의 맨 바깥 영역. 테두리 바깥 공간
3. 박스를 제어하는 CSS3 프로퍼티
① 박스의 크기 : width, height, margin, padding 등
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>박스 모델</title>
<style type="text/css">
body {
background: ghostwhite;
}
span {
background: deepskyblue;
}
div.box {
background: yellow;
border-style: solid; /* 직선 */
border-color: peru;
margin: 40px;
border-width: 30px;
padding: 20px;
}
</style>
</head>
<body>
<div class="box">
<span>DIVDIVDIV</span>
</div>
</body>
</html>
② 테두리의 두께와 모양과 색
p {
border-width : 3px;
border-style : dotted;
border-color : blue;
}
③ 테두리를 꾸미는 단축 프로퍼티 : border
border : width style color
<예시>
p {
border : 3px dotted blue;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>박스 모델</title>
<style type="text/css">
div {
background: yellow;
padding: 20px;
border: 5px dotted red; /* width style color */
margin: 30px;
}
</style>
</head>
<body>
<h3>박스 모델</h3>
<p>margin 30px, padding 20px, border 5px의 빨간색 점선</p>
<hr>
<div><img src="media/mio.png" alt="고양이눈"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>다양한 테두리</title>
</head>
<body>
<h3>다양한 테두리</h3>
<hr>
<p style="border:3px solid blue">3픽셀 solid</p>
<p style="border:3px none blue">3픽셀 none</p>
<p style="border:3px hidden blue">3픽셀 hidden</p>
<p style="border:3px dotted blue">3픽셀 dotted</p>
<p style="border:3px dashed blue">3픽셀 dashed</p>
<p style="border:3px double blue">3픽셀 double</p>
<p style="border:15px groove yellow">15픽셀 groove</p>
<p style="border:15px ridge yellow">15픽셀 ridge</p>
<p style="border:15px inset yellow">15픽셀 inset</p>
<p style="border:15px outset yellow">15픽셀 outset</p>
</body>
</html>
4. 고급 테두리 꾸미기
① 둥근 모서리 테두리 : border-radius
② 이미지 테두리 : border-image
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>이미지 테두리 만들기</title>
<style type="text/css">
p {
background: yellow;
width: 200px;
height: 60px;
padding: 10px;
border: 20px solid lightgray; /* border-width, border-style 동시 지정 */
}
/* round - 에지 이미지 반복 배치. 테두리 길이만큼 에지 이미지 크기 자동 조절 */
#round {
border-image: url("media/border.png") 30 round;
}
/* repeat - 에지 이미지 반복 배치. 에지 이미지 크기 자동 조절 안됨 */
#repeat {
border-image: url("media/border.png") 30 repeat;
}
/* stretch - 에지 이미지를 테두리 길이만큼 늘여 배치 */
#stretch {
border-image: url("media/border.png") 30 stretch;
}
</style>
</head>
<body>
<h3>이미지 테두리 만들기</h3>
<hr>
다음은 원본 이미지입니다.<br>
<img src="media/border.png" alt="원본">
<hr>
<p>20x20 크기의 회색 테두리를 가진 p 태그</p>
<p id="round">round 스타일 이미지 테두리</p>
<p id="repeat">repeat 스타일 이미지 테두리</p>
<p id="stretch">stretch 스타일 이미지 테두리</p>
</body>
</html>
5. 배경
① 배경색, 배경이미지 : background-color, background-image
div {
background-color : skyblue;
background-image : url("media/spongebob.png");
}
② 배경 이미지 위치 : background-position
background-position : center center;
③ 배경 이미지 크기 : background-size
background-size : 100px 100px /* 100x100 크기로 출력 */
④ 배경 이미지 반복 출력 : background-repeat
background-repeat : repeat-y; /* 수직 방향으로 반복 출력 */
⑤ background 단축 프로퍼티
div {
background : skyblue url("media/spongebob.png") center center/100px 100px repeat-y;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>배경 꾸미기</title>
<style type="text/css">
div {
background-color: skyblue;
background-size: 100px 100px;
background-image: url("media/spongebob.png");
background-repeat: repeat-y;
background-position: center center;
}
div {
width: 200px;
height: 200px;
color: blueviolet;
font-size: 16px;
}
</style>
</head>
<body>
<h3>div 박스에 배경 꾸미기</h3>
<hr>
<div>SpongeBob is an over-optimistic sponge that annoys other characters.</div>
</body>
</html>
'HTML5／CSS3 > 4. CSS3로 웹 페이지 꾸미기' 카테고리의 다른 글
| Day 43 : Exercise (0) | 2021.12.16 |
|---|---|
| Day 43 : 시각적 효과 (0) | 2021.12.16 |
| Day 43 : 색과 텍스트 꾸미기 (0) | 2021.12.16 |
| Day 42 : 셀렉터(selector) (0) | 2021.12.15 |
| Day 42 : 연습 문제 (0) | 2021.12.15 |