CSS Basic Box Model

박스 유형 제어

①블록 박스와 인라인 박스
- 블록 태그

<p>, <hl>, <div>, <ul>

 

- 인라인 태그

<span>, <a>, <img>

 

②CSS3의 3가지 박스 유형 비교

블록(block) 박스	인라인(inline) 박스	인라인 블록(inline-block) 박스
항상 새 라인에서 시작	새 라인에서 시작 못함. 라인 안(inline)에 있음	새 라인에서 시작 못함. 라인 안(inline)에 있음
블록 박스 내에만 배치	모든 박스 내 배치 가능	모든 박스 내 배치 가능
옆에 다른 요소 배치 불가능	옆에 다른 요소 배치 가능	옆에 다른 요소 배치 가능
width와 height로 크기 조절 가능	width와 height로 크기 조절 불가능	width와 height로 크기 조절 가능
padding border, margin 조절 가능	margin-top, margin-bottom 조절 불가능	padding, border, margin 조절 가능

③display 프로퍼티

a {

  display: block;

}

블록 박스 스타일로 지정되면 width와 height 값을 주어 태그가 출력되는 출력 박스의 크기를 변경할 수 있으며, 한 줄을 독점적으로 차지하여 양 옆에 다른 요소가 배치되지 않는다.

 

a {

  display: inline;

}

인라인 박스로 지정되면 새 줄에 출력되지도 새 줄로 넘어가지도 못한다.

 

a {

  display: inline-block;

}

기본적으로 인라인 박스이면서 블록 박스처럼 height, width로 크기를 조절할 수 있고, padding(패딩_), margin(여백) 등을 조절할 수 있다.

 

 

박스의 배치

브라우저는 웹 페이지에 나타난 순서대로 HTML태그를 배치한다(normal flow). 그러나 position프로퍼티를 이용하면 normal flow를 무시하고 원하는 위치에 박스를 배치할 수 있다.

①정적 배치

div {

  position: static;

}

웹페이지가 작성된 순서대로 HTML 태그의 출력 위치를 결정. 브라우저의 디폴트 배치방식이며, 정적 배치의 left, top, bottom, right 프로퍼티의 값은 위치에 영향을 주지 않는다.

②상대 배치

div {

  position: relative;

}

기본 위치에서 left, top, bottom, right 프로퍼티의 값만큼 이동한 상대위치에 배치. left는 왼쪽 모서리의 이동 거리, top은 위쪽 모서리의 이동거리를 지정한다. 프로퍼티 값이 -이나 +이냐에 따라서도 이동방향이 다르다. top과 bottom이 동시에 지정되면 bottom은 무시되며, left와 right가 동시에 지정되면 right가 무시된다.

③절대 배치

div {

  position: absolute;

}

브라우저 크기가 변해도 배치된 태그 위치는 절대 변하지 않도록 배치한다. 따라서 레이아웃에서 빠지게 되며, 다른 컨텐츠의 넓이 역시 이 속성이 적용된 개체의 넓이만큼 줄어들게 된다. 또 left, top 프로퍼티로 위치를 지정할 수 있으며, 이 때 해당 개체보다 상단에 위치한 개체들 중 position:relative를 지닌 개체를 기준으로 배치되게 된다.

④고정 배치

div {

  position: fixed;

}

스크롤하거나 브라우저의 크기를 변경해도 HTML태그를 뷰포트의 특정 위치에 고정시키는 배치방식. 고정 배치는 절대 배치와 달리, 브라우저의 보이는 영역(viewport)에 고정시켜 브라우저에 항상 보이게 한다.

 

 

 

그 외 배치방식

①float 프로퍼티를 이용한 유동 배치

태그를 오른편이나 왼편에 항상 배치시킬 수 있으므로, 항상 같은 위치에 출력할 광고나 공지에 적합

img {

  float: right;

}

이미지를 브라우저의 오른쪽에 출력하도록 만든다.

②수직으로 쌓기

수직으로 쌓는 순서(stacking order)를 지정하는 프로퍼티로 값이 클수록 위에 쌓인다.

div {

  z-index: 3;

}

z-index의 지정이 없는 경우에는 HTML 문서에 나오는 순서대로 z-index 값이 자동 결정된다. 
z-index는 position 프로퍼티가 relative, absolute, fixed인 경우에만 작동된다.

③보이기 숨기기

img {

  visibility: hidden;

}

이미지가 보이지 않게 한다. hidden 대신 visible을 넣으면 보이게 된다.

④콘텐츠 자르기 말기

img {

  overflow: visible;

}

- 옵션
visible // 콘텐츠가 잘리지 않고 태그 영역을 넘어 출력(디폴트)
hidden // 콘텐츠를 태그 크기로 잘라 넘어가는 것은 보이지 않음, 스크롤바 없음
scroll // 스크롤바를 항상 부착하여 콘텐츠 출력
auto // 콘텐츠가 박스의 높이(height 프로퍼티)보다 넘치면 스크롤바 자동 생성.