코드 그라데이션
7. 박스 모델 (2) 테두리와 여백 본문
테두리 스타일 지정하기
- 박스 모델을 사용해 웹 문서에 요소를 배치하려면 각 박스 모델의 크기와 여백, 테두리 스타일 등을 고려해야 한다.
- 특히 테두리 스타일은 점선인지 실선인지 뿐만 아니라, 테두리 두께와 색상을 지정할 수 있다.
박스 모델의 방향
- 맨 위쪽은 top
- 오른쪽은 right
- 아래는 bottom
- 왼쪽은 left
- 시계 방향임을 기억하세요.
box-style : 테두리 스타일 지정
- 기본값은 none
box-style의 속성값
예제
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>BorderStyle</title>
<style>
div {
width: 200px;
height: 100px;
display: inline-block;
margin: 15px;
text-align: center;
font-size: 20px;
line-height: 100px;
border-width: 5px;
/* 테두리 굵기 */
}
#box1 {
border-style: solid;
border-width: 2px;
border-color: red;
}
/* 실선 */
#box2 {
border-style: dotted;
border-width: thick thin;
border-top-color: blue;
}
/* 점선 */
#box3 {
border-style: dashed;
border-width: thick thin thin thick;
/*top, right, bottom -> left right를 따라갑니다.*/
border-left-color: orange;
}
/* 짧은 직선 */
#box4 {
border-style: double;
border-width: thick thin; /*top, right, bottom -> left right를 따라갑니다.*/
border-left-color: green;
}
#box5 {
border-style: groove;
border-width: thick; /*top, right, bottom -> left right를 따라갑니다.*/
border-left-color: yellow;
}
#box6 {
border-style: inset;
border-width: thick thin thin; /*top, right, bottom -> left right를 따라갑니다.*/
border-left-color: pink;
}
#box7 {
border-style: outset;
border-width: thick thin thin; /*top, right, bottom -> left right를 따라갑니다.*/
border-left-color: purple;
}
#box8 {
border-style: ridge;
border-width: thick thin thin; /*top, right, bottom -> left right를 따라갑니다.*/
border-left-color: aqua;
}
</style>
</head>
<body>
<div id="box1"> 실선 테두리 </div>
<div id="box2"> 점선 테두리 </div>
<div id="box3"> 짧은 직선 테두리</div>
<div id="box4"> double </div>
<div id="box5"> groove </div>
<div id="box6"> inset </div>
<div id="box7"> outset </div>
<div id="box8"> ridge </div>
</body>
</html>실행 결과
border-width : 테두리 두께 지정
- 크기 직접 지정하거나 예약어를 입력
- thin < medium < thick 순으로 두꺼워진다.
예제
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>박스모델</title>
<style>
div {
width:200px;
height:100px;
display:inline-block;
margin:15px;
border-style:solid; /* 테두리 스타일 - 실선 */
}
#box1 {
border-width:2px; /* 네 방향 모두 2px */
}
#box2 {
border-width:thick thin; /* top & bottom - thick, left & right - thin */
}
#box3 {
border-width:thick thin thin; /* top - thick, right - thin, bottom - thin, left - thin */
}
#box4 {
border-width:10px 5px 5px 10px; /* top - 10px, right - 5px, bottom - 5px, left - 10px */
}
</style>
</head>
<body>
<div id="box1"> </div>
<div id="box2"> </div>
<div id="box3"> </div>
<div id="box4"> </div>
</body>
</html>실행 결과
border : 테두리 스타일 묶어서 지정
- 테두리의 스타일, 두께, 색상을 한꺼번에 쓸 수 있음. 순서는 상관없다.
border-radius : 둥근 테두리를 만드는 속성
- 정말 동그란 원 형태를 표현하고 싶으면 border-radius : 50% 로 지정하면 된다.
- 더 정확하게는 이미지 요소의 너비와 높이를 똑같이 만든 후 반지름값을 두 개중에 하나의 50%로 지정하면 된다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>박스모델</title>
<style>
#circle {
border-radius:50%; /* 테두리를 원으로 */
}
</style>
</head>
<body>
<img src="images/photo.jpg">
<img id="circle" src="images/photo.jpg">
</body>
</html>실행 결과
예제 2
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>BorderRadius</title>
<style>
#round {
border-radius: 25px; /* 모든 꼭짓점을 둥글게 */
}
#allRound{
border-radius: 50%;
}
</style>
</head>
<body>
<img src="images/안녕.jpg">
<img id="round" src="images/안녕.jpg">
<img id="allRound" src="images/안녕.jpg">
</body>
</html>실행 결과
꼭짓점마다 따로 둥글게 처리하기
- border 과 radius 사이에 위치를 나타내는 예약어를 사용하면 된다.
예제 3
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>BorderRadius2</title>
<style>
div {
width:200px;
height:100px;
display:inline-block;
margin:15px;
background:red;
border:2px solid blue;
}
.round1{
border-radius : 50px/40px;
}
.round2{
border-bottom-right-radius : 50% 20%;
}
.round3{
border-top-left-radius: 50px 40px;
}
.round4{
border-bottom-left-radius: 45px;
}
</style>
</head>
<body>
<div class="round1"></div>
<div class="round2"></div>
<div class="round3"></div>
<div class="round4"></div>
</body>
</html>실행 결과
# 꼭짓점을 타원으로 만들기
margin : 요소 주변의 여백을 설정
- 마진을 이용하면 요소와 요소 사이 의 간격 을 조절할 수 있다.
- 마진도 박스 모델의 4개 방향에 한번에 똑같이 지정할 수도 있고,
- margin 다음에 하이픈(-)을 넣고 위치를 나타내는 예약어 top, right, bottom, left를 사용해서
특정 방향에만 지정할수도 있다. - 값이 여러 개라면 top -> right -> bottom -> left 순으로 지정
예제
- 마진 속성으로 여백 조정하기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>마진</title>
<style>
div {
width:300px;
height:200px;
display:inline-block;
border:1px solid #222;
}
#margin1 {
margin:40px;
}
#margin2 {
margin:30px 50px
}
#margin3 {
margin:30px 27px 50px
}
#margin4 {
margin:30px 27px 28px 40px;
}
#margin5{
margin-right:70px;
}
</style>
</head>
<body>
<div id="margin1"></div>
<div id="margin2"></div>
<div id="margin3"></div>
<div id="margin4"></div>
<div id="margin5"></div>
</body>
</html>
실행 결과
margin을 이용하여 웹 문서 정렬하기
- 문서 전체를 정렬할 때 사용한다.
- 화면 중앙에 배치하려면 배치할 요소의 속성값이 저장되어 있어야 한다. 그리고 margin-left/right의 속성값이 auto로 지정되어 있어야 한다.
예제 - 웹 문서 전체를 중앙 정렬.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>상품 소개 페이지</title>
<style>
body {
background-color:#222;
}
#container {
background-color:#fff;
width:600px;
margin:20px auto;
padding:20px;
}
table, th, td {
border:1px solid #ccc;
border-collapse: collapse;
}
th, td {
padding:10px 20px;
}
</style>
</head>
<body>
<div id="container">
<h1>레드향</h1>
<p>껍질에 붉은 빛이 돌아 <b>레드향</b>이라 불린다.</p>
<p>레드향은 <em>한라봉과 귤을 교배</em>한 것으로<br>일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
<p>비타민 C와 비타민 P가 풍부해<br> <strong>혈액순환, 감기예방</strong> 등에 좋은 것으로 알려져 있다.</p>
<hr>
<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>
<hr>
<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>개수</th>
<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>
</body>
</html>실행 결과
마진 중첩(마진 상쇄)
- 요소를 세로로 배치할 경우에 각 요소의 마진과 마진이 서로 만나면 마진값이 큰 쪽으로 겹쳐지는 문제
- 여백은 두 번 겹쳐서 지정되지 않음.
- 여러 요소를 세로로 배치할 때, 중간 마진이 지나치게 커지는 것을 방지.
- 마진 중첩은 아래 마진과 위 마진이 서로 만날 때 큰 마진값으로 합쳐지는 것.
- 오른쪽 마진과 왼쪽 마진이 만나는 경우엔 중첩되지 않음.
예제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>마진 오버랩</title>
<style>
* {
box-sizing:border-box;
}
div {
width:300px; /* 너비 */
height:200px; /* 높이 */
margin:50px; /* 마진 */
}
#box1 {
background:red;
}
#box2 {
background:pink;
}
#box3 {
background:blue;
}
</style>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
</body>
</html>실행 결과
패딩(padding) : 콘텐츠와 테두리 사이의 여백을 설정
- 패딩 : 콘텐츠 영역과 테두리 사이의 여백
- 패딩과 마진은 여백이 어느 위치에 있는지만 다를 뿐 박스 모델에서 패딩을 지정하는 방법은 마진과 거의 동일하다.
- top, right, bottom, left 순으로 지정
예제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>패딩</title>
<style>
h1 {
display:inline-block;
border:1px solid #000;
}
#padding1 {
padding:20px 30px 40px 50px;
}
#padding2 {
padding:20px 30px;
}
#padding3 {
padding:20px;
}
</style>
</head>
<body>
<h1>Java</h1>
<h1 id="padding1">Java</h1>
<h1 id="padding2">Java</h1>
<h1 id="padding3">Java</h1>
</body>
</html>실행 결과
문제 : 박스 모델 영역에 여백 추가하고 중앙에 배치하기
실행 결과
정답 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>IT 수강생 모집</title>
<link rel="stylesheet" href="css/Q3.css">
</head>
<body>
<div id="container">
<div id="description">
<h1>위키</h1>
<p>위키(wiki,이 소리의 정보듣기 (도움말·정보))는 불특정 다수가 협업을 통해
직접 내용과 구조를 수정할 수 있는 웹사이트를 말한다</p>
<p>또한 일반적인 위키에서 텍스트는 단순화된 <del>마크업 언어</del>
(<i>위키 마크업</i>)을 이용하여 작성되며,
리치 텍스트 에디터의 도움을 받아 편집하기도 한다.
<br><sup>[1]</sup> 위키는 지식경영이나 기록 등 다양한 용도로 이용된다.
공동체용 웹사이트나 조직 내 인트라넷에 쓰이기도 한다.
그러나 주로 개인적인 용도로 이용되는 위키도 있는데,
이를 개인 위키라고 한다.
</p>
</div>
<div id="receipe">
<h1>IT 수강생 모집</h1>
<h2>IT에 관심 있는 여러분 환영합니다</h2>
<p>메가 IT에서 모두를 대상으로 수강생을 모집합니다. 학부나 전공에 상관없습니다. <br>
평소 IT에 관심있었던 사람들의 지원바랍니다.</p>
<ul>
<li><b>모집 기간 :</b> 4월 2일 ~ 5월 11일</li>
<li><b>모집 분야 :</b> 프론트, 백엔드, 게임개발</li>
<li><b>지원 방법 :</b> 양식 작성 후 이메일 접수<br>
<i>지원서 양식은 메가IT 홈페이지 공지 게시판에 있습니다.</i></li>
</ul>
</div>
<div id="package">
<h1>IT 수강생 지원 양식</h1>
<table>
<tr>
<th rowspan="3">개인정보</th>
<th>이름</th>
<td></td>
</tr>
<tr>
<th>나이</th>
<td></td>
</tr>
<tr>
<th>연락처</th>
<td></td>
</tr>
<tr>
<th>IT 지원 분야</th>
<td colspan="2"></td>
</tr>
</table>
</div>
</div>
</body>
</html>728x90
'Front > Mega-CSS' 카테고리의 다른 글
| 9. 배경색과 배경 이미지 (0) | 2023.05.14 |
|---|---|
| <중요> 8. 웹 문서 레이아웃, 위치 (0) | 2023.05.14 |
| 6. 박스 모델 (1) 블록 레벨 요소, 인라인 레벨 요소 (0) | 2023.05.13 |
| 5. 목록 스타일, 표 스타일 (1) | 2023.05.13 |
| 4. 텍스트 스타일 (0) | 2023.05.13 |
'Front/Mega-CSS' Related Articles
more
Comments