[CSS] 박스 모델(+border 속성, display 속성)

 

태그의 성격과 일반적인 쓰임에 따라

자신만의 부피를 갖는 것과 

화면 전체가 태그의 공간으로 해당되는 것이 있다. 

 

전자는 inline element

후자는 block level element

 

라고 한다. (element는 tag와 같은 말이다)

전자는 특정 문자열에 쓰는 태그 (a, u 등등)

후자는 더 넓은 범위에 쓰는 태그 (h1 , body 등등)

 

이렇게만 말만 보면 무슨 소리인지 모르겠지만, 눈으로 직접 보면 이해가 된다.

 

border 속성을 통해 이해해보도록 하자.

border 속성은 태그의 테두리border의 설정을 정한다.

 

이 때 세부적인 속성은 다음과 같다

 

border - width : 테두리의 폭

border - color  : 테두리의 색

border - style  : 테두리의 스타일 (실선, 점선 등등)

 

+) 

[태그 간 속성이 중복되는 경우] 

before

<style>

태그 1 {

 속성 1 : 속성값 1; 
 속성 2 : 속성값 2; 
 속성 3 : 속성값 3; 

}

태그 2 {

 속성 1 : 속성값 1; 
 속성 2 : 속성값 2; 
 속성 3 : 속성값 3; 

}

</style>

 

 

after

 

<style>

태그 1, 태그 2 { 

 속성 1 : 속성값 1; 
 속성 2 : 속성값 2; 
 속성 3 : 속성값 3; 

}

</style>

 

 

[중복 속성 1, 2, 3이 border인 경우]

 

<style>
태그 {

border : width style color ;

}

</style>

 

 

이렇게 쓸 일이 많을 것이다.

이 때 세 가지 속성값의 순서는 중요하지 않다. 

 

 

 

이제 똑같은 속성값을 설정하고 두 종류의 태그가 어떻게 다른지 보자.

 

 

 

 

하지만 두 종류의 태그가 서로의 특징을 가져갈 수도 있다.

이것을 가능하게 해주는 것이 display 속성이다.

 

'어떻게 보여줄지'를 결정하는 display 속성은 inline과 block이라는 기본값의 변경이 가능한데

속성값은 네 가지로 나뉜다.

 

display: block; inline의 요소를 가지게 함, block도 적용 가능

display: inline; block의 요소를 가지게 함, inline도 적용 가능

display: none; 태그를 감출 수 있음

display: inline-block; inline과 block의 중간 특징... 이라는데 솔직히 예제도 찾아보고 직접 실행도 시켜봤지만 잘 이해가 되지 않았다. 아무래도 더 배워야 이해할 수 있을 것 같다.

 

 

 

 

이제 박스 모델을 배워보자.

 

https://mdn.mozillademos.org/files/16558/box-model.png

 

content box - 실제 내용이 자리하는 영역, 폭width과 높이height 등의 속성으로 조절

padding box - content와 border 사이의 여백 영역, padding 속성으로 조절

border box - content와 padding을 감싸는 영역, border 속성으로 조절

margin box - 나머지 모든 부분을 감싸고, 다른 요소들과 구분을 해주는 영역, margin 속성으로 조절

 

*display가 block인 속성을 inline외에 자유롭게 조절하고 싶으면 width 로 조정이 가능하다

 

 

그럼 이제 이 박스 모델을 어떻게 활용할 수 있을까?

 

웹페이지 창에서 RMB(오른쪽 마우스 버튼) -> 검사 로 들어가면 

 

 

 

이 style 창에서

element가 어떤 css의 영향을 받고 있는가를 확인할 수 있는 아주 유용한 기능이 있다.

 

예를 들어, css 효과들 옆에 있는 체크박스들을 해제하거나 선택해서 효과의 변화를 볼 수 있다.

 

 

또한 스타일창에선

앞서 배운 박스모델과 박스모델의 사이즈-픽셀치를 확인할 수 있다. 

픽셀치의 경우 숫자를 두 번 클릭하고 up/down 혹은 직접 입력으로 조절이 가능하다

 

 

이렇게, 박스모델의 각 영역에 마우스를 갖다대면 어느 영역인지 알 수 있다. 사진 속 살구색 영역은 margin.

 

이 style창으로 조절을 한 결과가 실제 적용이 아니다.

그래서 최종적으로 마음에 드는 모습이 나오면 그 때 에디터를 사용하면 되기 때문에 자유롭게 만질 수 있다.

 

 

 

html의 태그 하나하나를 박스로 취급해, 부피감을 결정한다.

이 사실은 박스모델이 검사 창은 디자인적으로 상당히 중요한 기능을 한다는 것을 알 수 있다.

 

----------------------------

 

캡쳐 기능으로만 활용하고, 나머지 부분은 눈에 띄지도 않았었는데
박스 모델을 배우고 나니 그제서야 왜 이전까진 이 기능들을 몰랐을까 싶을 정도였다.
시야가 넓어진다는 것이 무엇인지 알 것 같았다.

출처 -

<생활코딩 : 박스모델>
https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model