단단히

Box Model [ contents / padding / border / margin ] 본문

HTML,CSS/개념 정리

Box Model [ contents / padding / border / margin ]

이게아닌데 2022. 7. 23. 14:35

Box Model에 대해 알아보자.

Box Model은 모든 요소가 갖는 구조이다.

HTML의 기본 구조를 알아야 코드를 볼 때 편하다.

2022.07.21 - [HTML,CSS/개념 정리] - HTML 기본 코드

 

HTML 기본 코드

[ HTML의 기초 ] HTML은 코드를 작성한 파일이다. 브라우저에서 실행하여 결과를 볼 수 있는 마크업 코드이다. 표준 브라우저는 크롬, 익스플로러, 에지.. 등이 있다. 파일 확장자는. html이다. (인코

start-1199.tistory.com

 

 

 

border는 '테두리 선'이라고 생각하자.

padding과 margin을 설명할때 구간을 보여주기 때문이다.

 

 

<!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>BoxModel</title>
    <style>
      h1 {
        border: 1px solid rgb(255, 0, 0);
      }
    </style>
  </head>
  <body>
    <h1>BoxModel</h1>
  </body>
</html>

 

 

1px이고 색이 빨간( rgb(255,0,0) )인 테두리 선(border)이 들어간다.

아래는 위 코드의 결과이다.

h1은 블랙라인 요소 이기 때문에 해당 줄 모두가 선택된다.

 

 

[ padding ] ; 내부 여백

padding은 콘텐츠와의 여유 공간을 주는 것이다. 

 

 

<!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>BoxModel</title>
    <style>
      h1 {
        border: 1px solid rgb(255, 0, 0);
      }
      span {
        border: 1px solid rgb(0, 0, 255);
      }
    </style>
  </head>
  <body>
    <h1>BoxModel</h1>
    <span> box model을 알아보자! </span>
  </body>
</html>

 

 

여기서 알 수 있는 것은 span 요소는 인라인 요소라는 것을 알 수 있다.

자신의 자리만 차지하는 것이다.

Mangin과 Padding을 잘 확인하기 위해서 span을 사용하기로 하자.

 

 

 

 

 

<!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>BoxModel</title>
    <style>
      span {
        border: 1px solid rgb(0, 0, 255);
        padding: 20px;
      }
    </style>
  </head>
  <body>
    <span> box model을 알아보자! </span>
  </body>
</html>

 

 

 

 

 

위와 같이 padding은 콘텐츠를 둘러싼 공간을 말한다.

여백의 크기는 위, 오른쪽, 아래, 왼쪽 순서로 지정한다.

 

 

<!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>BoxModel</title>
    <style>
      span {
        border: 1px solid rgb(255, 0, 0);
        padding: 20px 10px 30px 50px;
      }
    </style>
  </head>
  <body>
    <span> 여백의 크기는 위, 오른쪽, 아래, 왼쪽 순서로 지정한다. </span>
  </body>
</html>

 

 

 

 

@charset "UTF-8";

span{
/* 각 위치마다 나눠서 지정 */
	padding-top: 20px;
	padding-right: 30px;
	padding-bottom: 30px;
	padding-left: 30px;
    
 /* 만약 여백이 위/아래 20px 오른쪽/왼쪽 30px 일 경우 */
 	padding : 20px 30px;
    
 /* 여백이 위 20px 오른쪽/왼쪽 10px  아래 30px일 경우 */
 	pading : 20px 10px 30px;
}

 

 

 

[margin] ; 외부 여백

전체를 div요소로 묶은 후 실행한다.

**위와 같이 span요소를 사용할 수 없다. 왜냐하면 span 요소는 margin이 먹히지 않는다.**

margin은 테두리(border)를 둘러싼 공간을 의미한다.

다른 요소와의 여유공간을 주는 것이다.

 

 

<!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>BoxModel</title>
    <style>
      div#wrap {
        border: 1px solid #000;
      }
    </style>
  </head>
  <body>
    <div id="wrap">
      <span>
        margin의 여백 설정은 padding과 동일하다. <br />
        여백의 크기는 위, 오른쪽, 아래, 왼쪽 순서로 지정한다.
      </span>
    </div>
  </body>
</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>BoxModel</title>
    <style>
      div#wrap {
        border: 1px solid #000;
        margin: 40px;
      }
    </style>
  </head>
  <body>
    <div id="wrap">
      <span>
        margin의 여백 설정은 padding과 동일하다. <br />
        여백의 크기는 위, 오른쪽, 아래, 왼쪽 순서로 지정한다.
      </span>
    </div>
  </body>
</html>

 

 

여백의 크기 지정 방법은  padding과 동일하다.

 

 

 

 

div{
	border : 2px solid #000;
    margin : auto;
}

 

 

margin : auto는 브라우저에서 수평 방향 마진 값을 자동으로 설정한다.

html요소의 왼쪽과 오른쪽 마진을 자동으로 설정하는 것이다.

*** 그 요소를 포함하고 있는 부모 요소의 정중앙에 위치하게 된다.***

 

모든 요소를 웹브라우저 창 화면 크기와 상관없이 가운데 위치시키려면

전체를 담고 있는 div요소에 margin : 0 auto; 를 선언하면 된다.

 

 

[ 정 리 ]

 

'HTML,CSS > 개념 정리' 카테고리의 다른 글

Semantic(시맨틱) 요소  (0) 2022.07.27
Border 테두리 선  (0) 2022.07.25
HTML 기본 코드  (0) 2022.07.21
Visual Studio Code 환경 설정  (0) 2022.07.18
visual studio code 설치  (0) 2022.07.15
'HTML,CSS/개념 정리' Related Articles more
Comments