HTML / CSS : CSS box model에 대해서 알아보자

HTML / CSS : CSS box model에 대해서 알아보자

오늘은, HTML을 보기 좋게 꾸며주는 CSS의 기능 중에

box model에 대한 배움을 정리해보고자 한다.

 

<CSS box model>

margin

 

border

 

padding

contents

 

구글의 개발자 콘솔에서 Elements 탭을 열면, style 란에 위와 같은

박스 모델에 대한 그림을 볼 수 있다. 콘솔창의 문자들과 씨름을 하다 지친 눈이

금새 박스모델의 구성도로 향하게 되었던 기억이 있다.

 

텍스트 박스, 버튼 등 HTML로 구현하는 기능중심의 요소에 디자인을 부여하는 CSS.

박스 모델은 컨텐츠와 가장 가까이서 각종 항목들을 조정하여주는데.

한 번 제대로 공부하여 두는것 만으로도 여러모로 적용해보며 내가 원하는 디자인을 구현해볼 수 있다.

 

• padding : 위의 모델처럼 background-color를 지정하지 않고서는 눈에 띄지 않는 영역.
                  contents 와 border 사이의 간격을 지정하는 요소이며, 상하좌우 방향별 값을 지정할 수 있다.  
    
• border : 위 모델에서 녹색 실선에 해당하는 요소.
                구획을 명확히 나누는 선의 형태로 브라우저에서 표현된다.
  
  
• margin : 위 모델에서, 가장 외부의 오렌지색 점선 - border 사이의 구간.
                브라우저 안에서 수평 또는 수직방향으로 나열되어 있는 요소들의 간격을 지정하기 위해
                사용하며, padding과 같이 상하좌우 방향별 값을 지정할 수 있다.

 

위의 박스 모델도 열심히(?) HTML 창에서 <div> 태그를 사용하여 만들어 보았다.

 

실제 red / blue의 border를 갖는 click 버튼을 만들고, 둘 사이의 간격을

꼭 붙인 케이스와 일정간격을 부여한 케이스를 아래에 구현해 보겠다.

 

1) 연달아 버튼을 만들고, 간격(margin)에 대한 속성을 부여하지 않은 경우.

<input type="button" style="border: 1px solid red; border-radius: 5px;" value="click me - red" />
<input type="button"style="border: 1px solid blue; border-radius: 5px;" value="click me - blue" />

 

2) 연달아 버튼을 만들고, 간격(margin)에 대한 속성을 부여하는 경우.

    * click me - red 버튼의 우측에만 10px의 margin을 적용.

<input type="button" style="border: 1px solid red; border-radius: 5px; margin: 0px 10px 0px 0px;" value="click me - red" />
<input type="button" style="border: 1px solid blue; border-radius: 5px;" value="click me - blue" />

 

2)번 항목에서 style 항목으로 지정한 내용 중에, margin : 0px 10px 0px 0px; 를 주목해보면

우측 한 방향으로만 margin을 부여하기 위해, 두 번째 항목에반 10px의 값을 입력한 것을 확인할 수 있다.

 

padding / margin 속성은 상-우-하-좌 순서로 값을 입력하게끔 규칙이 만들어져 있으니

style속성을 반영하는 때에는 참고하도록 하자.

(방향 지정 없이, 하나의 값을 입력하는 경우에는 모든 방향에 대해 같은 값을 적용하게 된다.)

 

Photo by Pankaj Patel on Unsplash