CSS의 모든것, 문법총정리3(margin,padding 총정리)및 적용예시

Devel/HTML&CSS&JAVASCRIPT|2020. 9. 5. 12:33
반응형
#margin 속성과 padding 속성
:margin 속성은 마진의 너비를 지정하는 속성이고 padding 속성은 패딩의 너비를 지정하는 속성이다


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Box 모델 실습</title>
<style type="text/css">
   div{
      width:100px;
      height: 100px;
      background-color: red;
      
      margin:10px;
      padding:30px;
   }
</style>
</head>
<body>
  <div></div>
</body>
</html>


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Box 모델 실습</title>
<style type="text/css">
   #one{
      width:100px;
      height: 100px;
      background-color: red;
   }
   #two{
      width:100px;
      height: 100px;
      background-color: red;
      
      margin:20px;
      padding:30px;
   }
</style>
</head>
<body>
  <div id="one"></div>
  <div id="two"></div>
</body>
</html>
#margin 속성
: Box 사이의 여백을 제어하고, 그 값들은 길이 또는 %로 설정한다.
margrin 순서는 상, 우 ,하, 좌 이다.
margin:10px 10px 10px 10px;  /* 상 우 하 좌 *


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Box 모델 실습</title>
<style type="text/css">
  div{
      width:100px;
      height: 100px;
      background-color: red;
  }
   #one{
      margin-top:10px;
      margin-right:10px;
      margin-bottom:10px;
      margin-left:10px;
    }
    #two{
      margin:10px 10px 10px 10px;  /* 상 우 하 좌 */
    }
    #three{
      margin:10px; /*상 우 하 좌 */
    }
    #four{
      margin:10px 20px;  /* 상하: 10px  좌우: 20 px*/
    }
    #five{
      margin:10px 20px 30px;  /* 상: 10px  좌우: 20 px 하:30px */
    }
</style>
</head>
<body>
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
  <div id="four"></div>
  <div id="five"></div>
  <div id="six"></div>
</body>
</html>
 
 

#margin : auto
:자동으로 중앙 정렬이 된다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>margin:auto 실습</title>
<style type="text/css">
  div {
    width: 300px;
    margin: auto;
    border: 1px solid red;
   }
</style>
</head>
<body>
  <h2>Use of the auto Value</h2>
   <p>You can set the margin property to auto to horizontally 
      center the element within its container.
      The element will then take up the specified width, 
      and the remaining space will be split equally 
      between the left and right margins:</p>
 
   <div>
      This div will be centered because it has margin: auto;
   </div>
</body>
</html>
 
 

#border 속성
: margin과 padding 사이에 둘러싸인 요소이다. 
 3가지 구성요소를 사용하여 border 속성을 설정할 수 있다.

#border-width속성
: border의 너비를 지정하는 속성이다. 
다음 키워드를 사용할 수 있다.


#border-style속성
: border의 형태를 지정하는 속성이다. 
다음 키워드를 사용할 수 있다.



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Box 모델 실습</title>
<style type="text/css">
  div{
      width:100px;
      height: 100px;
      background-color: red;
      margin:10px;
  }
   #one{
      border-top-width: 10px;
      border-right-width: 10px;
      border-bottom-width: 10px;
      border-left-width: 10px;
      
      border-top-style: solid;
      border-right-style: solid;
      border-bottom-style: solid;
      border-left-style: solid;
      
      border-color: black;
   
    }
    #two{
      border-width: 10px 20px;
      border-style: solid dotted;
      border-color: black;
    }
    #three{
      border-width: 10px;
      border-style: solid;
      border-color: black; 
    }
    #four{
      border: 10px solid black;
    }
</style>
</head>
<body>
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
  <div id="four"></div>
</body>
</html>
 

#padding 속성
: Content와 border 사이의 여백(안쪽 여백)을 의미한다.
padding의 순서는 상, 우, 하, 좌이다.(margin과 순서가 다르니 설정시 주의해야 한다.)
padding:10px 10px 10px 10px;  /* 상 우 하 좌 */


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Box 모델 실습</title>
<style type="text/css">
  div{
      width:100px;
      height: 100px;
      background-color: red;
      margin:10px; 
      border: 10px solid black;
  }
   #one{
      padding-top:10px;
      padding-right:10px;
      padding-bottom:10px;
      padding-left:10px;
    }
    #two{
      padding:10px 10px 10px 10px;  /* 상 우 하 좌 */
    }
    #three{
      padding:10px; 
    }
    #four{
      padding:50px 20px;  /* 상하: 50px  좌우: 20 px*/
    }
    #five{
      padding:50px 20px 30px;  /* 상: 50px  좌우: 20 px 하:30px */
    }
</style>
</head>
<body>
  <div id="one">hello</div>
  <div id="two">hello</div>
  <div id="three">hello</div>
  <div id="four">hello</div>
  <div id="five">hello</div>
</body>
</html>
 
 


저작자표시 변경금지

'Devel > HTML&CSS&JAVASCRIPT' 카테고리의 다른 글

금액이나 단위 3자리에 콤마 "," 추가 하는 방법  (0) 2021.11.24
CSS의 모든것, 문법총정리 적용예시4  (0) 2020.11.22
CSS의 모든것, 문법총정리2  (0) 2020.09.05
CSS의 모든것, 문법총정리(선택자, 자식, 자손,형제 개념과 적용예제)  (0) 2020.09.05
[HTML,CSS,JS] workshop예제(기본인적사항만들기)  (0) 2020.08.31
댓글()
loading

티스토리툴바