Orchemi

Orchemi

I start where others stop.

[CSS] 레이아웃과 박스 모델

작성:    

업데이트:

카테고리:

태그: , ,

박스 모델

  • HTML 태그가 겹쳐져 여러 박스를 구성한다.
*html 파일

<!DOCTYPE html>
<html lang="ko">
  <head>
    <title>box model</title>
    <link ref="stylesheet" href="CSS문서명.css" />
  </head>

  <body>
    <div id="box_model">
      <span>Hello World</span>
    </div>
  </body>
</html>

* css 파일 #box_model {
  width: 300px;
  height: 300px;
  background-color: yellow;
  border: solid 20px red;
  margin-left: 50px;
  padding-left: 50px;
}
  • width/height : content 영역의 크기를 의미
  • border : 테두리를 의미
  • padding : 테두리와 content 영역 사이의 공간
  • margin : 테두리 외부의 공간


  • 이 각각의 요소들에 대한 자세한 설명은 아래에서 하도록 한다.


박스 모델의 4가지 요소

  • 박스 모델에는 박스의 크기와 간격을 정의하는 요소로 margin, border, padding, content 속성이 있다.


가. margin 속성

  • 테두리(border) 속성을 기준으로 바깥쪽 영역
  • 배치 작업에서 좌표를 설정할 때 사용

    margin - top/right/bottom/left 설정 한 줄로 정리할 수도 있다.

* css 파일 #box_model {
  /* 12시를 기준으로 시계 방향으로 top, right, bottom, left 속성 의미 */

  margin: 40px 30px 20px 10px;
}

그리고 위의 코드의 출력은 아래 코드의 출력과 같다.

* css 파일 #box_model {
  margin-top: 40px;
  margin-right: 30px;
  margin-bottom: 20px;
  margin-left: 10px;
}

즉, 시계방향으로 좌표 설정


나. border 속성

  • 공간의 테두리

solid 속성값 : 실선
dotted 속성값 : 점선

  • 색상, 두께, 종류 등 여러 속성값의 순서는 상관이 없다.
* css 파일 #box_model {
  border: solid 20px red;
}


다. padding 속성

  • border 속성(테두리)과 content 속성(내용)의 간격
  • margin 속성과 같이 좌표를 설정할 때 사용
#box_model {
  /* 12시를 기준으로 시계 방향으로
    top, right, bottom, left 속성 의미 */

  padding: 40px 30px 20px 10px;
}

그리고 위의 코드의 출력은 아래 코드의 출력과 같다.

* css 파일 #box_model {
  padding-top: 40px;
  padding-right: 30px;
  padding-bottom: 20px;
  padding-left: 10px;
}


라. content 요소

  • 태그에 포함되어 있는 내용물


마. margin/padding 기본설정 바꾸기!

  • <html>과 <body> 태그는 기본적으로 margin/padding 속성을 가지고 있다.
  • 때문에 원치 않는 공백이 생길 수 있다!

이 공백을 없애려면 어떻게 해야할까.

* css 파일 html,
body {
  margin: 0;
  padding: 0;
}
  • 쉼표(,)는 and의 의미를 담고 있으며, <html>과 <body> 태그에 margin: 0 속성과 padding: 0 속성을 함께 적용하겠다는 뜻

댓글남기기

참고