day04 - box model
> box model
element 의 구조 - content, padding, border, margin
content: 텍스트나 이미지가 표시되는 내용 부분
padding: content 주위를 투명하게 하는 부분
border: content 와 padding 을 둘러싸는 부분
margin: border 바깥 부분을 투명하게 하는 부분
* 페이지의 element 에서 우클릭 - 검사 - Styles
맨 아래의 그림에서 margin, border, padding, content 가 각각 얼마나 차지하고 있는지 표시됨
> border
< css property >
1. border-style: border (테두리) 의 모양 설정
value: solid(직선), dotted(점선), double(이중선) 등
만약, 한번에 값을 네 개 작성하면 상-우-하-좌, 세 개 작성하면 상-좌우-하, 두 개 작성하면 상하-좌우 순으로 각 하나씩 설정됨
→ 시계방향
만약, 상하좌우 중 한 면만 설정하고 싶다면 border-top/bottom/right/left-style 로 작성
<head>
<style>
div{
height:100px;
width:200px;
}
#div1{
border-style:solid;
}
#div2{
border-style:solid dotted;
}
#div3{
border-style:solid dotted double;
}
#div4{
border-style:solid dotted double groove;
}
#div5{
border-top-style:solid;
border-bottom-style:double;
border-right-style:dotted;
border-left-style:solid;
}
</style>
</head>
<body>
<div id="div1">first text</div>
<div id="div2">second text</div>
<div id="div3">third text</div>
<div id="div4">fourth text</div>
<div id="div5">fifth text</div>
</body>
2. border-width: border 의 너비 설정 (px 혹은 %)
만약, 한번에 값을 네 개 작성하면 상-우-하-좌, 세 개 작성하면 상-좌우-하, 두 개 작성하면 상하-좌우 순으로 각 하나씩 설정됨
→ 시계방향
만약, 상하좌우 중 한 면만 설정하고 싶다면 border-top/bottom/right/left-width 로 작성
<head>
<style>
div{
height:50px;
width:200px;
border-style:solid;
margin:10px;
}
#div1{
border-width:10px;
}
#div2{
border-width:10px 5px 2px 1px;
}
#div3{
border-width:20px 10px 1px;
}
#div4{
border-width:20px 1px;
}
#div5{
border-top-width:10px;
border-bottom-width:20px;
border-right-width:30px;
border-left-width:5px;
}
</style>
</head>
<body>
<div id="div1">first text</div>
<div id="div2">second text</div>
<div id="div3">third text</div>
<div id="div4">fourth text</div>
<div id="div5">fifth text</div>
</body>
3. border-color: border 의 색상 설정
만약, 한번에 값을 네 개 작성하면 상-우-하-좌, 세 개 작성하면 상-좌우-하, 두 개 작성하면 상하-좌우 순으로 각 하나씩 설정됨
→ 시계방향
만약, 상하좌우 중 한 면만 설정하고 싶다면 border-top/bottom/right/left-color 로 작성
<head>
<style>
div{
height:50px;
width:200px;
border-style:solid;
margin:10px;
border-width:10px;
}
#div1{
border-color:green;
}
#div2{
border-color:green yellow red blue;
}
#div3{
border-width:green yellow red;
}
#div4{
border-width:green yellow;
}
#div5{
border-top-color:seagreen;
border-bottom-color:silver;
border-right-color:tomato;
border-left-color:blue;
}
</style>
</head>
<body>
<div id="div1">first text</div>
<div id="div2">second text</div>
<div id="div3">third text</div>
<div id="div4">fourth text</div>
<div id="div5">fifth text</div>
</body>
4. border: border 의 너비, 모양, 색상을 한번에 설정
width, style, color 순으로 작성
만약, 상하좌우 중 한 면만 설정하고 싶다면 border-top/bottom/right/left 로 작성
<head>
<style>
div{
height:50px;
width:200px;
margin:10px;
}
#div1{
border-width:10px;
border-style:dotted;
border-color:green;
}
#div2{
border:10px dotted green;
}
#div3{
border-top:5px solid red;
border-right:10px dotted blue;
border-bottom:20px double yellow;
border-left:1px solid skyblue;
}
#div4{
border-bottom:10px solid salmon;
}
</style>
</head>
<body>
<div id="div1">first text</div>
<div id="div2">second text</div>
<div id="div3">third text</div>
<div id="div4">fourth text</div>
</body>
> margin
margin 영역의 너비를 설정 (px 혹은 %)
만약, 한번에 값을 네 개 작성하면 상-우-하-좌, 세 개 작성하면 상-좌우-하, 두 개 작성하면 상하-좌우 순으로 각 하나씩 설정됨
→ 시계방향
만약, 상하좌우 중 한 면만 설정하고 싶다면 margin-top/bottom/right/left 로 작성
<head>
<style>
.container{
border:5px solid red;
}
.item{
border:5px solid blue;
width:200px;
height:50px;
}
#div1{
margin:5px;
}
#div2{
margin-top:10px;
margin-bottom:20px;
margin-right:30px;
margin-left:40px;
}
#div3{
margin:10px 30px 20px 40px;
}
#div4{
margin: 10px 30px 20px;
}
#div5{
margin:30px 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="item" id="div1">first text</div>
<div class="item" id="div2">second text</div>
<div class="item" id="div3">third text</div>
<div class="item" id="div4">fourth text</div>
<div class="item" id="div5">fifth text</div>
</div>
</body>
* margin 을 auto 로 작성하면 크기와 무관하게 항상 좌우로 중앙에 위치하게 됨
<head>
<style>
.container{
border:5px solid red;
}
.item{
border:5px solid blue;
width:200px;
height:50px;
}
#div6{
margin:auto;
}
</style>
</head>
<body>
<div class="container">
<div class="item" id="div6">center</div>
</div>
</body>
* 위 아래 margin 은 겹쳐짐
<head>
<style>
.container{
border:5px solid red;
}
.item{
border:5px solid blue;
width:200px;
height:50px;
}
#div7{
margin:50px;
}
#div8{
margin:30px;
}
</style>
</head>
<body>
<div class="container">
<div class="item" id="div7">seventh text</div>
<div class="item" id="div8">eighth text</div>
</div>
</body>
> padding
padding 영역의 너비를 설정 (px 혹은 %)
만약, 한번에 값을 네 개 작성하면 상-우-하-좌, 세 개 작성하면 상-좌우-하, 두 개 작성하면 상하-좌우 순으로 각 하나씩 설정됨
→ 시계방향
만약, 상하좌우 중 한 면만 설정하고 싶다면 padding-top/bottom/right/left 로 작성
<head>
<style>
.container{
border:5px solid blue;
margin:10px;
}
.item{
border:5px solid red;
}
#con1{
padding:10px;
}
#con2{
padding-top:10px;
padding-right:20px;
padding-bottom:30px;
padding-left:40px;
}
#con3{
padding:10px 20px 30px 40px;
}
#con4{
padding:10px 20px 30px;
}
#con5{
padding:10px 20px;
}
</style>
</head>
<body>
<div class="container" id="con1">
<div class="item">one</div>
</div>
<div class="container" id="con2">
<div class="item">two</div>
</div>
<div class="container" id="con3">
<div class="item">three</div>
</div>
<div class="container" id="con4">
<div class="item">four</div>
</div>
<div class="container" id="con5">
<div class="item">five</div>
</div>
</body>
> content
content 영역의 너비와 높이를 설정
1. width: 너비
2. height: 높이
(px 혹은 % , %는 부모요소 기준)
content 가 없으면 높이가 0인 element 가 만들어짐 (div6 참고)
<head>
<style>
div{
border:5px solid black;
margin:10px;
}
#div1{
height:20px;
width:200px;
}
#div2{
width:150px;
height:50px;
}
#div3{
width:50px;
height:70px;
}
#div4{
width:50%;
}
#div5{
width:30%;
margin:auto;
}
</style>
</head>
<body>
<div id="div1">one</div>
<div id="div2">two</div>
<div id="div3">three</div>
<div id="div4">four</div>
<div id="div5">five</div>
<div id="div6"></div>
</body>
> box size
box-sizing: 사이즈 설정
value
1) content-box : 기본값
2) border-box : border 까지의 크기가 width, height 로 설정됨 (width 와 height 가 box size 를 결정)
<head>
<style>
#div1, #div3{
width:200px;
height:100px;
padding:10px;
border:5px solid green;
margin:10px;
}
#div2, #div4{
background-color:blue;
width:200px;
height:100px;
margin-left:10px;
}
#div3, #div4{
box-sizing:border-box;
}
</style>
</head>
<body>
<div id="div1">one</div>
<div id="div2">two</div>
<div id="div3">three</div>
<div id="div4">four</div>
</body>