[HTML/CSS]박스모델_컨텐츠영역 꾸미기

모든 컨텐츠들은 자신만의 영역을 가지고 있다.

웹 페이지에서 모든 요소들은 공간을 가지고 있다.

이 영역들은 HTML의 태그로 인해 만들어지며, 각 영역들은 박스라고 부른다.

이 요소들은 직사각형 형태로 이루어져 있으며, CSS를 이용해서 크기/디자인 등을 적용시킬 수 있다.

박스 종류에 따른 특징

	block	inline	inline-block
줄바꿈 여부	가능	불가능	불가능
박스가 차지하는 너비	화면 100%	글자수 만큼	글자수 만큼
박스 크기 설정	가능	불가능	가능
대표 태그	<div>, <p>	<span>	-

• block 박스는 컨텐츠가 화면의 한 줄을 모두 차지하든 안하든, 화면의 한 줄을 모두 차지
• inline 박스는 다른 요소 옆으로 붙어서 존재할 수 있음
• inline 박스는 CSS를 이용하여 크기 조절을 할 수 없음. CSS를 선언해도, 적용되지 않음
• inline 박스에 block 성질을 넣어주려면(aka inline-block)  display: inline-block; 라는 코드를 CSS 코드의 선언블럭안에 선언해주면된다.

박스 구성 요소

 

웹 브라우저에서 개발자 도구를 연 다음, 'elements' 탭을 클릭하면

아래쪽의 'styles' 라는 부분에서 확인 할 수 있다.

개발자 도구에서 보이는 코드들에 커서를 올리면 해당 코드가

박스 구성 요소의 어느부분인지 확인이 가능하다.

 

 

 

border(테두리)

박스가 차지하는 크기를 확인 할 때 사용한다.

 

margin(바깥 여백)

테두리의 바깥부분을 차지하는 여백이다.

 

paddign(안쪽 여백)

테두리의 안쪽부분을 차지하는 여백이다.

 

박스와 관련된 속성과 사용법(속성값)

속성

border : 박스의 테두리를 꾸밀때 사용하는 속성

margin : 박스 테두리 바깥 여백을 꾸밀때 사용하는 속성

padding : 박스 테두리 안쪽 여백을 꾸밀때 사용하는 속성

 

사용법

-속성값을 한개만 주면 위, 오른쪽, 왼쪽, 아래에 모두 속성값이 적용된다.

-속성값을 두개를 주면, 첫번째 속성값은 위, 아래에 적용이 되고 두번째 속성값은 오른쪽, 왼쪽에 적용된다.

-속성값을 네개를 주면, 위쪽부터 시계방향으로 위쪽, 오른쪽, 왼쪽, 아래쪽에 각 각 적용된다.

-특정 방향에만 속성값을 주고 싶으면 속성명-top, 속성명-left .. 방식으로 속성을 선언한다.

-바깥여백에는 속성값으로 음수를 줄 수 있다. 음수를 받으면 엘리먼트끼리 거리가 줄어들며,

-극단적으로 사용하면 다른 엘리먼트들과 겹치게 할 수도 있고 사라지게 할 수도 있다.

박스의 크기

박스의 크기는 테두리 두께, 여백의 크기가 모두 계산된 후 최종적으로 결정이 된다.

따라서 테두리 두께와 여백의 크기까지 모두 고려한여 박스의 크기를 조정하고 싶다면

box-sizing : border-box; 라는 속성과 속성값을 선언해주면 된다.