1. 패딩, 마진(매우 중요)
- 박스 속성은 웹 페이지의 레이아웃을 구성할 때 가장 중요한 속성이다.
- margin은 마진의 너비를 지정하는 속성 padding은 패딩의 너비를 지정하는 속성이다.
- margin 속성과 padding 속성은 width 속성과 height 속성과 별도로 적용된다.
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
p {
width: 300px;
height: 100px;
/* border: 1px solid red; - 한번에 선분 다 그어져있는 것 */
border-bottom: 1px solid red;
border-top: 1px solid red;
border-left: 1px solid red;
border-right: 1px solid red;
border-radius: 10%; /* 모서리 윤곽을 둥글게 함(%, px 둘 다 가능) */
}
</style>
</head>
<body>
<p>윤곽</p>
</body>
</html>
1) 패딩
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
body {background-image: url('img/bg_grid.jpg');}
p{
width: 300px;
height: 100px;
border: 1px solid #777;
background-color: aqua;
/* padding: 10px; 4, 3, 2, 1 */
/* padding: 10px 20px 30px 40px; 시계 방향으로 10 ~ 40(위, 오른쪽, 아래, 왼쪽) */
/* padding: 10px 30px; 위아래, 좌우 */
/* padding: 10px 20px 30px; 위, 좌우, 아래 */
}
</style>
</head>
<body>
<p>
박스의 가로: width + padding + border = 322px;
</p>
</body>
</html>
- 초록색 부분으로 표시된 곳이 패딩
2) 마진
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
body {background-image: url('img/bg_grid.jpg');}
p{
width: 300px;
height: 100px;
border: 1px solid #777;
background-color: aqua;
/* margin: 30px; */
/* margin: 10px 20px 30px 40px; 위, 오른쪽, 아래, 왼쪽 */
/* margin: 10px 20px 30px; 위, 좌우, 아래 */
/* margin: 10px 20px; 위아래, 좌우 */
}
.box{
text-align: center; /* 박스 안에 있는 텍스트의 정렬 */
margin: 0 auto; /* 박스 크기가 지정되어야 함*/
}
</style>
</head>
<body>
<p>
마진: 윤곽 기준으로 바깥 여백
</p>
<p>
패딩은 겹치지 않지만 마진은 겹칩니다. (즉, 개발자 도구로 열었을 때 위 아래의 간격이 20씩 늘어나는게 아니라 10 중첩 됨.)
</p>
<p class = "box">
상자를 정가운데로 보내고 싶으면 margin: 0 auto;
</p>
</body>
</html>
2. box sizing
- width 속성과 height 속성은 글자를 감싸는 영역의 크기를 지정하는 속성이다. box-sizing 속성은 이러한 공식을 변경할 수 있는 CSS3 속성이다.
- content-box 키워드의 경우 박스의 크기를 다음 공식으로 구한다. (기본값) - 박스 너비 공식
- border-box 키워드의 경우 박스의 크기를 다음 공식으로 구한다. (많이 사용됨) - border 값이 너비에서 빠진다
box-sizing: border-box; /* 상자의 크기를 border, padding은 제외하고 계산 */
* 예제
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
* {padding: 0; margin: 0; list-style: none;}
img {height: auto; max-width: 100%;}
#header {
background-color: #000;
text-align: center;
}
.gnb li {display: inline;}
.gnb li a {
display: inline-block;
color: #fff;
text-decoration: none;
width: 70px;
height: 50px;
line-height: 50px;
padding: 0px 10px;
box-sizing: border-box;
}
.gnb li a:hover {
border-bottom: 3px solid #fff;
}
.wrab {
margin: 0 auto;
width: 1020px;
margin-top: 50px;
}
.wrab .inner {border: 1px solid #777;}
</style>
</head>
<body>
<header id = "header">
<nav class = "gnb">
<ul>
<li><a href="#">목록</a></li>
<li><a href="#">목록</a></li>
<li><a href="#">목록</a></li>
<li><a href="#">목록</a></li>
</ul>
</nav>
</header>
<article>
<img src="img/1.jpg" alt="배너1">
</article>
<section class="wrab">
<h3>오늘의 발견</h3>
<div class="inner">
컨텐츠 내용...<br>
컨텐츠 내용...<br>
컨텐츠 내용...<br>
컨텐츠 내용...<br>
컨텐츠 내용...<br>
컨텐츠 내용...<br>
</div>
</section>
</body>
</html>
3. float
- 웹 페이지 레이아웃을 구성할 때에 반드시 사용하는 속성
- float을 적용시키면 부모의 높이값이 지정이 안되는 현상때문에 문제가 발생한다.
이때 부모요소에
1) 가상요소:affter { content: ""; display: block; clear: both;}
2) overflow: hidden 중 택 1을 적용해주면 된다
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
* {padding: 0; margin: 0; list-style: none;}
.box {
border: 1px solid #777;
/* float 적용시 부모가 자식을 감싸지 못하는 문제가 발생함 */
/* 1. 가상 요소 방법 적용 */
/* 2. 부모에 overflow:hidden; */
overflow: hidden;
width: 500px;
}
/* .box:after {content: ""; display: block; clear: both;} */
.box li {
float: left;
width: 20.0000%;
border: 1px solid #777;
box-sizing: border-box;
}
</style>
</head>
<body>
<ul class = "box">
<li>박스1</li>
<li>박스2</li>
<li>박스3</li>
<li>박스4</li>
<li>박스5</li>
</ul>
</body>
</html><!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
.list {
overflow: hidden;
width: 800px;
margin: 0 auto;
border: 1px solid #777;
}
.list .inner {
float : left;
width: 25.0000%;
border: 1px solid #777;
box-sizing: border-box;
}
.content {overflow: hidden;}
.content .left {float: left;}
.content .right {float: right;}
.content .left span {display: block;}
</style>
</head>
<body>
<div class = "list">
<div class = "inner">
<img src="img/bgimg.png" alt="이미지">
<div class = "content"><!-- overflow -->
<div class ="left">
<span>왼</span>
<span>왼</span>
<span>왼</span>
</div>
<div class = "right"> <!-- right -->
오른쪽
</div>
<!-- content 밖에다가 써도 되고, clear: both 사용하면 float 영향을 받지 않음 -->
<div style = "clear: both;">
탑쌓기 해제
</div>
<div>
clear: both 쓰면 플롯의 영향을 받지 않습니다.
</div>
</div>
<!--
<div>
탑쌓기 해제
</div>
-->
</div>
<div class = "inner">
<img src="img/bgimg.png" alt="이미지">
<div class = "content"><!-- overflow -->
<div class ="left">
<span>왼</span>
<span>왼</span>
<span>왼</span>
</div>
<div class = "right"> <!-- right -->
오른쪽
</div>
<!-- content 밖에다가 써도 되고, clear: both 사용하면 float 영향을 받지 않음 -->
<div style = "clear: both;">
탑쌓기 해제
</div>
<div>
clear: both 쓰면 플롯의 영향을 받지 않습니다.
</div>
</div>
<!--
<div>
탑쌓기 해제
</div>
-->
</div>
<div class = "inner">
<img src="img/bgimg.png" alt="이미지">
<div class = "content"><!-- overflow -->
<div class ="left">
<span>왼</span>
<span>왼</span>
<span>왼</span>
</div>
<div class = "right"> <!-- right -->
오른쪽
</div>
<!-- content 밖에다가 써도 되고, clear: both 사용하면 float 영향을 받지 않음 -->
<div style = "clear: both;">
탑쌓기 해제
</div>
<div>
clear: both 쓰면 플롯의 영향을 받지 않습니다.
</div>
</div>
<!--
<div>
탑쌓기 해제
</div>
-->
</div>
<div class = "inner">
<img src="img/bgimg.png" alt="이미지">
<div class = "content"><!-- overflow -->
<div class ="left">
<span>왼</span>
<span>왼</span>
<span>왼</span>
</div>
<div class = "right"> <!-- right -->
오른쪽
</div>
<!-- content 밖에다가 써도 되고, clear: both 사용하면 float 영향을 받지 않음 -->
<div style = "clear: both;">
탑쌓기 해제
</div>
<div>
clear: both 쓰면 플롯의 영향을 받지 않습니다.
</div>
</div>
<!--
<div>
탑쌓기 해제
</div>
-->
</div>
</div>
</body>
</html>
* 예제(1~2)
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
.box {
overflow: hidden;
border: 1px solid #777;
width: 800px;
margin: 0 auto;
}
.box .inner {
float: left;
width: 50%;
box-sizing: border-box;
}
.box .inner p {margin: 0px;}
.wrap {border: 1px solid #777;}
.content {overflow: hidden;}
.content .left{float: left;}
.content .right{float: right;}
.content button {width: 50%;}
.control {margin-top: 50px; border: 1px solid #777;}
</style>
</head>
<body>
<h3>과제2</h3>
<div class = "box">
<div class = "inner">
사진
</div>
<div class = "inner wrap">
<div>
<p>제목: ~~~ </p>
<p>내용: ~~~ </p>
</div>
<div class ="control">
<div class = "content">
<span class = "left">가격</span>
<span class = "right">10000원</span>
</div>
<div class = "content">
<button type = "button" class = "left"> 구매하기 </button>
<button type = "button" class = "right"> 장바구니 </button>
</div>
</div>
</div>
</div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
.box{
overflow: hidden;
width: 800px;
margin: 0 auto;
border: 1px solid #777;
padding: 5px;
}
.box .inner {
float: left;
width: 25%;
padding: 5px;
box-sizing: border-box;
}
.wrap {border: 1px solid #777;}
</style>
</head>
<body>
<h3>과제3</h3>
<div class = "box"> <!-- 바깥 -->
<div class= "inner"> <!-- 숨김 float: left -->
<div class= "wrap"> <!-- 안쪽 -->
<img src= "img/bgimg.png" alt="이미지">
<div>
내용...
</div>
</div>
</div>
<div class= "inner"> <!-- 숨김 float: left -->
<div class= "wrap"> <!-- 안쪽 -->
<img src= "img/bgimg.png" alt="이미지">
<div>
내용...
</div>
</div>
</div>
<div class= "inner"> <!-- 숨김 float: left -->
<div class= "wrap"> <!-- 안쪽 -->
<img src= "img/bgimg.png" alt="이미지">
<div>
내용...
</div>
</div>
</div>
<div class= "inner"> <!-- 숨김 float: left -->
<div class= "wrap"> <!-- 안쪽 -->
<img src= "img/bgimg.png" alt="이미지">
<div>
내용...
</div>
</div>
</div>
<div class= "inner"> <!-- 숨김 float: left -->
<div class= "wrap"> <!-- 안쪽 -->
<img src= "img/bgimg.png" alt="이미지">
<div>
내용...
</div>
</div>
</div>
<div class= "inner"> <!-- 숨김 float: left -->
<div class= "wrap"> <!-- 안쪽 -->
<img src= "img/bgimg.png" alt="이미지">
<div>
내용...
</div>
</div>
</div>
<div class= "inner"> <!-- 숨김 float: left -->
<div class= "wrap"> <!-- 안쪽 -->
<img src= "img/bgimg.png" alt="이미지">
<div>
내용...
</div>
</div>
</div>
<div class= "inner"> <!-- 숨김 float: left -->
<div class= "wrap"> <!-- 안쪽 -->
<img src= "img/bgimg.png" alt="이미지">
<div>
내용...
</div>
</div>
</div>
</div>
</body>
</html>