CSS
22-12-21 css기초- 패딩과마진 , 박스사이징,박스레이아웃, float
JadeStone
2022. 12. 21. 18:15
-항상 기준은 윤곽이라고 하는 border가 기준.
-border (윤곽선) 안쪽으로 들어오는 여백을 패딩이라고 함. / 패딩: 개발자도구에서 초록색으로 표시
-margin은 border 기준으로 바깥 여백을 말함. / 마진: 개발자 도구에서 주황색으로 표시
-실제 박스의 너비와 높이 (크기) = 컨텐츠 크기 + 패딩 + 윤곽
<style>
p{
width: 300px;
height: 100px;
/* border: 1px solid red; */
border-top: 1px solid red;
border-bottom: 1px solid red;
border-left: 1px solid red;
border-right: 1px solid red;
border-radius: 10%;
}
</style>위에서 가로의 길이는 300(width)+1(윤곽선 왼쪽)+1(윤곽선 오른쪽) = 302px;
박스의가로: width + padding + border = 322px;
#
*패딩
-패딩은 패딩안에 컨텐츠를 안쪽으로 밀어넣을 때 사용.
<!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 20px 30px 40px; 위, 오른쪽, 아래, 왼쪽 (시계방향) */
/*4개주거나,3개,2개,1개 줄 수도 있다.*/
/* padding: 10px 30px;*/ /*위아래,좌우 */
padding: 10px 20px 30 px; /*위, 좌우, 아래*/
}
</style>
</head>
<body>
<p>
박스의가로: width + padding + border = 322px;
</p>
</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>
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; /*위아래, 좌우*/
}
</style>
</head>
<body>
<p>
마진:
</p>
</body>
</html>
#margin을 활용한 중앙박스 정렬
-많이 사용하니까 꼭 암기해두기.
.box{
margin: 0 auto /*박스크기가 지정되어야 함*/
}-text-align은 안에 든 컨텐츠를 정렬해주는 것임 박스 정렬하고 구분 잘 하기.
-박스가 2개 있고 가깝게 붙어있다면 이 2박스들의 margin은 겹친다.
(마진은 겹친다)
#box-sizing속성
*border-box
<!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 20px 30px 40px; 위, 오른쪽, 아래, 왼쪽 (시계방향) */
/*4개주거나,3개,2개,1개 줄 수도 있다.*/
/* padding: 10px 30px;*/ /*위아래,좌우 */
padding: 10px 20px 30 px; /*위, 좌우, 아래*/
box-sizing: border-box; /*상자의 크기를 border,padding은 제외하고 계산 , 딱 컨텐츠의 크기만 상자의 너비로 잡아준다.*/
}
</style>
</head>
<body>
<p>
박스의가로: width + padding + border = 322px;
</p>
</body>
</html>*border-box 의 결과
#버튼 디자인
<!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>
.btn-wrap{
background-color: #19ce60;
border: none;
color: #fff;
font-size: 20px;
font-weight: 500;
padding: 10px 30px;
cursor: pointer; /*손가락*/
text-decoration: none;
}
</style>
</head>
<body>
<button type="button" class="btn-wrap">naver버튼</button>
<a href="#" class="btn-wrap">naver버튼</a>
</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>
*{padding: 0; margin: 0; list-style: none;}
img{height: auto; max-width: 100%}
header{
background-color: black;
text-align: center;
}
header li{
display: inline;
}
header li a{
color: white;
text-decoration: none;
display: inline-block;
width: 70px;
height: 50px;
line-height: 50px;
padding: 0 10px;
box-sizing: border-box;
}
header li a:hover{
border-bottom: 1px solid white;
}
section{
margin: 0 auto; width: 1020px; margin-top: 50px;
}
section div{
padding: 20px;
border: 1px solid black;
}
</style>
</head>
<body>
<header>
<ul>
<li><a href="#">목록</a></li>
<li><a href="#">목록</a></li>
<li><a href="#">목록</a></li>
<li><a href="#">목록</a></li>
</ul>
</header>
<article>
<img src="img/1.jpg" alt="배너1">
</article>
<section>
<h3>오늘의 발견</h3>
<div>
컨텐츠내용...<br>
컨텐츠내용...<br>
컨텐츠내용...<br>
컨텐츠내용...<br>
컨텐츠내용...<br>
컨텐츠내용...<br>
컨텐츠내용...<br>
</div>
</section>
</body>
</html>#실습 결과
#박스 레이아웃 float ★★★★★
*3가지
1.display
2.float
3.position
이 세가지만 잘 쓰면 쉽게 레이아웃을 만들 수 있음.
★★★ coding404의 비법 float의 법칙 ( 꼭 암기하기 !!!!) ★★★
float을 적용시키면 부모의 높이값이 지정이 안되는 현상때문에 문제가 발생한다.
이때 부모요소에
1. 가상요소:after { content: ""; display: block; clear: both;}
2. overflow: hidden 중 택1을 적용해주면 된다.
그러면 부모 상자가 자식 상자를 감싸준다.
.box li{float: left;}이렇게만 써주면 부모가 자식을 감싸지못함
이 때 위에 두가지 방법을 사용해주면 부모가 자식을 감싸줌.
<!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>*결과
이때 위에 box-sizing: border-box; 를 해주지 않으면
border 의 두께 때문에 자식들의 박스 크기가 부모의 width 500px 을 넘어서기 때문에
아래와 같이 되어버린다. 이점 잘 기억해두자.
*플롯 활용
<!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"><!--left-->
<span>왼</span>
<span>왼</span>
<span>왼</span>
</div>
<div class="right"><!--right-->
오른쪽
</div>
<div style="clear:both";>
탑쌓기해제<!--float해제.-->
</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"><!--left-->
<span>왼</span>
<span>왼</span>
<span>왼</span>
</div>
<div class="right"><!--right-->
오른쪽
</div>
<div style="clear:both";>
탑쌓기해제<!--float해제.-->
</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"><!--left-->
<span>왼</span>
<span>왼</span>
<span>왼</span>
</div>
<div class="right"><!--right-->
오른쪽
</div>
<div style="clear:both";>
탑쌓기해제<!--float해제.-->
</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"><!--left-->
<span>왼</span>
<span>왼</span>
<span>왼</span>
</div>
<div class="right"><!--right-->
오른쪽
</div>
<div style="clear:both";>
탑쌓기해제<!--float해제.-->
</div>
<div>
...내용...<!--위에서 clear:both 쓰고난 이후로는 더이상 플롯의 영향을 받지 않음.-->
</div>
</div>
<!-- <div>
탑쌓기해제
</div> -->
</div>
</div>
</body>
</html>결과
#index03 실습
코드
<!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>
<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>
</div>
</body>
</html>
#index04
코드
<!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: 500px;
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"><!--안쪽 border-->
<img src="img/bgimg.png" alt="이미지">
<div>
내용...
</div>
</div>
</div> <div class="inner"><!--숨김 float: left-->
<div class="wrap"><!--안쪽 border-->
<img src="img/bgimg.png" alt="이미지">
<div>
내용...
</div>
</div>
</div> <div class="inner"><!--숨김 float: left-->
<div class="wrap"><!--안쪽 border-->
<img src="img/bgimg.png" alt="이미지">
<div>
내용...
</div>
</div>
</div> <div class="inner"><!--숨김 float: left-->
<div class="wrap"><!--안쪽 border-->
<img src="img/bgimg.png" alt="이미지">
<div>
내용...
</div>
</div>
</div> <div class="inner"><!--숨김 float: left-->
<div class="wrap"><!--안쪽 border-->
<img src="img/bgimg.png" alt="이미지">
<div>
내용...
</div>
</div>
</div> <div class="inner"><!--숨김 float: left-->
<div class="wrap"><!--안쪽 border-->
<img src="img/bgimg.png" alt="이미지">
<div>
내용...
</div>
</div>
</div> <div class="inner"><!--숨김 float: left-->
<div class="wrap"><!--안쪽 border-->
<img src="img/bgimg.png" alt="이미지">
<div>
내용...
</div>
</div>
</div> <div class="inner"><!--숨김 float: left-->
<div class="wrap"><!--안쪽 border-->
<img src="img/bgimg.png" alt="이미지">
<div>
내용...
</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>
.outter {
overflow: hidden;
width: 1600px;
margin: 0 auto;
}
.box {
float: left;
}
.leftbox {
border: 1px solid #777;
width: 1020px;
height: 310px;
box-sizing: border-box;
}
.middlebox {
border: 3px solid #777;
width: 236px;
height: 310px;
margin-left: 8px;
box-sizing: border-box;
}
.rightbox {
border: 1px solid #777;
width: 280px;
height: 310px;
margin-left: 8px;
box-sizing: border-box;
}
.leftbox {
overflow: hidden;
}
.leftbox .potobox {
width: 33.3333%;
height: 155px;
border: 1px solid #777;
box-sizing: border-box;
float: left;
}
.rightbox .rightboxinner{
height: 50.0000%;
border:1px solid #777;
box-sizing: border-box;
}
.rightbox .high{
overflow:hidden;
padding-top:50px;
}
.rightbox .high .text{
font-size: 12px;
color: silver;
padding-left:10px;
padding-right:10px;
}
.rightbox .high .safemelon{
float: left;
}
.rightbox .high .logintext{
float: right;
}
.loginbutton{
margin-top:22px;
text-align: center;
}
.rightbox .high .loginbutton button{
background-color: #19ce60;
border:none;
color: white;
width: 170px;
height: 30px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="outter">
<div class="box leftbox">
<div class="potobox">사진</div>
<div class="potobox">사진</div>
<div class="potobox">사진</div>
<div class="potobox">사진</div>
<div class="potobox">사진</div>
<div class="potobox">사진</div>
</div>
<div class="box middlebox">
<img src="img/bgimg.png">
</div>
<div class="box rightbox">
<div class="rightboxinner high">
<div class="text" >
<span class="safemelon">멜론을 더 안전하게 이용하세요</span>
<span class="logintext"; >회원가입</span>
</div>
<div class="loginbutton">
<button type:"button"; >로그인</button>
</div>
</div>
<div class="rightboxinner low">
</div>
</div>
</div>
</body>
</html>결과
