본문 바로가기
💻 1. 웹개발_Front end/1-3 CSS

[CSS] 04-3 여백을 조절하는 속성들

by 달님🌙 2021. 9. 5.
반응형

 

1. margin 속성 – 요소 주변 여백 설정하기

 

① 현재 요소 주변의 여백. 한 요소와 다른 요소 사이의 간격 조절

② 

 

③ margin 속성에서 사용 가능한 속성 값들

 

④ margin 속성 값 개수에 따른 차이

- 1개 : 네 방향 모두 동일한 값 적용

- 2개 : 첫 번째 값은 위아래, 두 번째 값은 좌우 margin 값

- 3개 : 빠진 값은 마주 보는 방향의 속성 값 사용

- 4개 : top -> right -> bottom -> left 순으로 적용

p {margin: 50px;} /*네 방향 마진 모두 50px*/
p {margin: 30px 50px;} /*위아래 마진 - 30px, 좌우 마진 - 50px*/
p {margin: 30px 20px 50px;} /*위 마진 - 30px, 좌우 마진 - 20px, 아래 마진 - 50px*/
p {margin: 30px 50px 30px 50px;} /*위아래 마진 - 30px, 좌우 마진 - 50px*/

 

 

<예제 – margin-001.html>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>박스간 간격 조절하기</title>
    <style>
        div {
            width: 200px;
            height: 100px;
            background: skyblue;
        }
        .box1 {
            margin: 30px 50px 30px 50px;
        }
        .box2 {
            margin: 30px 50px;
        }
        .box3 {
            margin: 50px;
        }
        .box4 {
            margin: 30px 5px 10px;
        }
    </style>
</head>
<body>
    <!--div.box*4-->
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>

</body>
</html>

 

 

<예제 – margin-center-001.html>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>박스간 간격 조절하기</title>
    <style>
        .box {
            width: 200px;
            height: 300px;
            background: orange;
            /*좌우 마진을 auto로 설정하면 요소의 가로길이를 뺀 공간의 길이를 
            좌우마진에 동일하게 배분, 브라우저창을 확대하거나 축소해도 항상 
            가운데 있는 것과 같은 효과*/
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

 

 

2. padding 속성 – 콘텐츠 영역과 테두리 사이 여백 설정하기

 

① 테두리 안쪽의 여백 설정

② 

 

③ 

 

<예제 – padding-001.html>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>콘텐츠와 테두리 사이 간격 조절</title>
    <style>
        div {
            width: 200px;
            height: auto;
            background: blue;
            display: inline-block;
            margin: 15px;
            color: white;
            border: 2px solid black;
        }
        .box1 {
            padding: 10px 30px 10px 30px;
        }
        .box2 {
            padding: 10px 30px;
        }
        .box3 {
            padding: 10px;
        }
        .box4 {
            padding: 30px 5px 10px;
        } 
    </style>
</head>
<body>
    <div class="box1">패딩1</div>
    <div class="box2">패딩2</div>
    <div class="box3">패딩3</div>
    <div class="box4">패딩4</div>
</body>
</html>

 

 

* 화면 구성 레이아웃

 

퀴즈

 

<퀴즈 1번>

<!doctype html>
<html lang="ko">
	<head>
		<meta charset="utf-8">
		<title>border 속성</title>
		<style>
			div {

				width: 500px;
				height: 500px;
				border-color: black;
				border-style: solid;
				border-width: 5px 20px 10px 15px;
				/*border-top-width: 5px;
				border-bottom-width: 10px;
				border-left-width: 15px;
				border-right-width: 20px;*/
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

 

<퀴즈 2번>

<!doctype html>
<html lang="ko">
	<head>
		<meta charset="utf-8">
		<title>display 속성</title>
		<style>
			nav ul {
				list-style-type: none; /*불릿 제거*/
			}
			nav ul li {
				display: inline-block; /*가로 배치*/
				padding: 10px 20px; /*패딩 속성*/
				margin: 10px; /*마진 속성*/
				border: 1px solid black; /*보더 속성*/
			}
			a:link, a:visited {
				color:black;
				text-decoration: none; /*밑줄 제거*/
			}
		</style>
	</head>
	<body>
		<nav>
			<ul>
				<li><a href="#">메뉴1</a></li>
				<li><a href="#">메뉴2</a></li>
				<li><a href="#">메뉴3</a></li>
				<li><a href="#">메뉴4</a></li>
			</ul>
		</nav>
	</body>
</html>

 

<퀴즈 3번>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #content{
            width: 582px;
            border:10px solid gray;
        }
        .box{
            display: inline-block;
            width:150px;
            height:150px;
            margin:20px;
        }
        #greenBox{
            background-color:green;
        }
        #orangeBox{
            background-color:orange;
        }
        #blueBox{
            background-color:blue;
        }
    </style>
</head>
<body>
    <div id="content">
        <div class="box" id="greenBox"></div>
        <div class="box" id="orangeBox"></div>
        <div class="box" id="blueBox"></div>
    </div>
</body>
</html>

 

<퀴즈 4번>

 

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>market</title>
	<style>
		#container {  /* 전체 콘텐츠를 감싸는 div */
			width: 650px;/* 너비 */
			margin: 0 auto;/* 가로로 중앙에 배치 */
			padding: 5px;/* 테두리와 내용 사이의 패딩 여백 */		
		}
		#check {   /* 텍스트 부분을 감싸는 div */
			width: 640px;/* 너비 - 그림 너비 값에 맞춤 */
			border: 1px solid #ccc;/* 테두리 */
		}
		h1 {
			color: white;/* 글자색 */
			font-size: 1em;/* 글자 크기 */
			background: #222;/* 배경색 */
			margin: 0;/* 제목과 다른 요소 간의 마진 여백 */
			padding: 10px;/* 테두리와 제목 텍스트 사이의 패딩 여백 */
		}
		h2 {
			color: #ff0000;/* 글자색 */
			font-size: 1.2em;/* 글자 크기 */
			text-align: center;/* 가운데 정렬 */
		}
		p {
			font-size: 1.5em;/* 글자 크기 */
			line-height: 2em;/* 줄간격 */
			font-weight: bold;/* 굵게 */
			text-align: center;/* 가운데 정렬 */
		}
		.accent {
			color: blue;/* 글자색 */
		}
		.smalltext {
			font-size: 18px;/* 글자 크기 */
		}
	</style>
</head>

<body>
	<div id="container">
		<img src="images/top.jpg" alt="가정용 꿀사과 - 흠집이 있고 약간은 못생겼지만 맛과 영양은 그대로입니다. 질좋은 사과를 저렴하게 즐겨보세요">		
		<div id="check">
			<h1>확인하세요</h1>
			<h2>주문 및 배송</h2>
			<p><span class="accent">오후 2시 이전</span> 주문건은 당일 발송합니다<br>
			2시 이후 주문건은 다음날 발송합니다(주말 제외)</p>
			<hr>
			<h2>교환 및 환불</h2>
			<p>불만족시 <span class="accent">100% 환불</span>해 드립니다<br>
			고객센터로 전화주세요</p>
			<hr>
			<h2>고객센터 </h2>
			<p>0000-0000<br>
			<span class="smalltext">상담시간 : 오전 9시 ~ 오후 6시 (토/일, 공휴일 휴무)</span></p>
		</div>
	</div>
</body>
</html>

 

 

반응형
저작자표시 비영리 변경금지

'💻 1. 웹개발_Front end > 1-3 CSS' 카테고리의 다른 글

[CSS] 05-2 다단으로 편집하기  (0) 2021.09.05
[CSS] 05-1 CSS 포지셔닝과 주요 속성들  (0) 2021.09.05
[CSS] 04-2 테두리 관련 속성들  (0) 2021.09.05
[CSS] 04-1 CSS와 박스 모델  (0) 2021.09.05
[CSS] 03-3 그라데이션 효과로 배경 꾸미기  (0) 2021.09.05

관련글

댓글

티스토리툴바