CSS - margin & padding, display, float, position

< CSS 박스 모델 >

블록 레벨 요소 : 태그를 사용해 요소를 삽입했을 때 혼자 한 줄을 차지하는 것, 넓이가 100%  <h1>, <div>, <p>...
인라인 레벨 요소 : 콘텐츠만큼만 영역을 차지하고 나머지 공간에는 다른 요소가 올 수 있음 <span>, <img>, <strong>...

1. 콘텐츠 영역 크기를 지정하는 width, height 속성

• 크기 or 백분율 or auto로 지정
• 주변의 여백이나 테두리를 뺀 콘텐츠 영역의 크기
• box-sizing 속성 : border-box (테두리까지 포함해서 너빗값을 지정) / content-box ( 콘텐츠 영역만 너빗값을 지정, 기본값 )

2. 여백을 조절하는 margin, padding 속성

두 박스 모델 사이의 여백 →  마진
한 박스 모델에서 테두리와 내용 사이의 여백 →  패딩

margin (마진) 속성 : 요소 주변의 여백

1. 요소와 요소 사이의 간격을 조절

margin - top, right, bottom, left 

div {
margin: 30px 50px; /*위아래 마진 30px, 좌우 마진 50px*/
}

기본형: margin: <크기> | <백분율> | auto

( 크기: px, em등의 단위, 백분율: 박스 모델을 포함한 부모 모델을 기준으로 % 지정 )

 

2. margin속성을 사용하여 웹 문서를 가운데 정렬하기

너빗값이 정해져있는 요소의 margin left, right을 auto로 설정하여 중앙정렬

#container {
  width:600px;  /* 컨테이너의 너비 */
  border:none;    /* 테두리 없앰 */
  margin: 0 auto;
}

3. 마진 중첩 이해하기

아래 마진과 위 마진이 서로 만날 때는 큰 마진값으로 합쳐짐.

오른쪽 마진과 왼쪽 마진이 만날 경우에는 중첩되지 않음

 

padding (패딩) 속성 : 콘텐츠와 테두리 사이의 여백

- 테두리 안쪽의 여백

padding - top, right, bottom, left

 

3. 배치 방법을 결정하는 display 속성

display 속성을 사용하면 블록 레벨 요소와 인라인 레벨 요소를 서로 바꿔서 사용할 수 있다. 

block	인라인 레벨 요소를 블록 레벨 요소로 만든다.
inline	블록 레벨 요소를 인라인 레벨 요소로 만든다.
inline-block	인라인 레벨 요소와 블록 레벨 요소의 속성을 모두 가지고 있으며, 마진과 패딩을 지정할 수 있다.
none	해당 요소를 화면에 표시하지 않는다.

[display 속성값]

 

여기서 의문이 생겼다. 인라인 블록은 뭐야...? 두가지 속성을 다 가지고 있다거?

inline vs block vs inline-block 차이점 알아보기

 

- inline 

대표적인 태그로는 span을 예로 들 수 있는데, text 크기만큼만 공간을 점유하고 줄바꿈을 하지 않는다.

• width / height 적용불가
• margin / padding - top / bottom 적용불가
• line-height를 원하는대로 사용할 수 없다.

- block 

block 속성은 무조건 한줄을 점유하고 있고, 다음 태그는 무조건 줄바꿈이 적용된다. 대표적인 태그는 div가 있다.

- inline-block

inline-block 속성은 inline 속성의 특징과 block 속성의 특징 둘 다 가지고 있는 속성이다. 기본적인 특징은 inline 속성과 비슷한데 (줄바꿈을 하지 않고, 동일한 라인에 작성가능) inline속성에서 할 수 없었던 width / height 변경 및 line-height를 커스텀하게 적용할 수 있는 특징이 있다.

• width/height 적용 가능
• margin/padding-top/bottom 적용 가능
• line-height 적용 가능

* 고려사항 *

• inline-block 사이에 공백이 생기게 되는데, parent 태그에 font-size: 0를 적용하면 해결된다.
• inline-block 끼리 높이가 안맞을 때 상위 공백이 생기게 되는데 vertical-align: top을 적용하면 해결할 수 있다.

예제 ) 

nav ul li {
      display:inline-block; /*인라인과 블록 레벨 요소의 특징을 모두 가짐*/ 
      padding:20px;
      margin:10px 20px; /*마진 위아래 10px, 마진 좌우 20px*/
      border:1px solid #222;
    }

4. 왼쪽이나 오른쪽으로 배치하는 float 속성

웹 요소를 문서위에 떠 있게 만든다. float : left / right / none (기본값)

블록 레벨 요소에만 적용할 수 있다. <div> <p> <ol> <ul> <table> <img> ...

자신이 가지고 있는 컨텐츠만큼의 크기만 가지거나, width값이 있다면 width값 만큼의 길이를 가지게 된다. (block의 성격을 무시)

img {
      float:left;  /* 왼쪽에 떠 있게 */
      margin-right:40px;
}

 

이후에 오는 다른 요소들까지 똑같은 속성이 전달되어 둘러싼 형태가 되거나 부유된 영역 아래로 들어가게 된다.

float 속성을 더 이상 사용하고 싶지 않다면 clear 속성을 사용해야 한다.

○ float 속성을 해제하는 clear 속성

float : left 를 이용해 왼쪽으로 배치했다면 clear : left 로 종료, float : right 를 이용해 왼쪽으로 배치했다면 clear : right 로 종료

무조건 기본상태로 되돌리고 싶다면 clear : both

 

예제 ) 공부하는 중이라 설명은 정확하지 않을 수 있다..

박스1과 박스2는 마진 상쇄가 일어나지 않았고, div에 지정한 마진, 패딩, 컨텐츠만큼의 크기를 가진다. 박스3은 flaot속성이 전달되어 부유된 영역 아래로 들어가고 위쪽에 마진 상쇄가 일어난다. 박스3에 의해 상쇄된 위쪽 마진에 따라 박스1과 박스2가 배치되었다. 박스4는 clear속성으로 float이 해제되었으므로 평범한 박스 형태로 표현된다. floating하고 있는 요소의 마진 아래로 배치되는데 clear한 요소의 margin 위쪽은 반영되지 않는다.

div {
	padding:20px;
	margin:10px;
	}
#box1{
	background:#ffd800;
	float:left;  /* 왼쪽으로 플로팅 */ 
}
#box2 {
	background: #0094ff;
	float:left;  /* 왼쪽으로 플로팅 */
}
#box3 {
	background: #00ff21;
}
#box4 {
	background:#a874ff;
	clear:left;  /* 플로팅 해제 */
}

* display: inline-block과의 차이점?

inline-block은 가로로 배치하면서도 기본 마진과 패딩을 가지고 있지만, float : left로 붙어서 배치됨. 또한 clear속성으로 플로팅을 해체해야 한다.

 

레이아웃 예제 )

2단 레이아웃

* {
  margin:0;
  padding:0;
  box-sizing: border-box; /*테두리 포함 넓이 지정*/
}
#container{
  width: 1200px;
  margin: 20px auto; /*중앙정렬*/
}
#header{
  width: 100%; /*부모 요소와 같게*/
  height: 120px;
  background-color: rgb(198, 239, 239);
}
#sidebar{
  width: 300px;
  height: 600px;
  background-color: rgb(212, 212, 245);
  float: left;
}
#contents{
  width: 900px; /*넓이 지정*/
  height: 600px;
  background-color: beige;
  float: left; 
  /*만약 여기서 float속성을 작성하지 않으면 자동적으로 속성을 상속받게 되고
  뒤쪽으로 영역이 들어감. 따라서 넓이를 900이 아니라 1200으로 해야함.
  그러면 푸터에서 높이만 지정하면 원하는 배치는 가능함*/
}
#footer{
  width: 100%;
  height: 100px;
  background-color: aliceblue;
  clear: left;
}

5. 배치 방법(기준 요소)을 정하는 position 속성

○ 위치 지정 속성

left, right, top, bottom : 기준 위치 요소 사이에 왼쪽으로, 오른쪽으로, 위쪽으로, 아래쪽으로 얼마나 떨어져 있는지 지정

 

○ position 속성

static	문서의 흐름에 맞춰 배치한다. 기본값이며 left, right, top, bottom등의 위치 지정 속성은 무시된다.
relative	원래 위치를 기준으로 상대적(relative)으로 배치해준다. 요소의 위치 지정은 top, bottom, left, right 속성을 이용해서, 요소가 원래 위치에 있을 때의 상하좌우로 부터 얼마나 떨어지게 할지를 지정할 수 있다.
absolute	position 속성이 static이 아닌 첫 번째 상위 요소가 해당 요소의 배치 기준으로 설정된다. 없다면, DOM 트리에 최상위에 있는 <body> 요소가 배치 기준이 된다. 어떤 요소를 absolute로 설정하면, 부모 요소를 relative로 지정해주는 것이 관례이다.
fixed	배치 기준이 뷰포트(viewport), 즉 브라우저 전체화면이다. top, left, bottom, right 속성은 각각 브라우저 상단, 좌측, 하단, 우측으로 부터 해당 요소가 얼마나 떨어져있는지를 결정한다.

 

예제 )

css3요소의 position속성이 absolute이므로 기준 위치는 최상위 <body>, 기준위치 요소 사이에 right, bottom속성이 각각 60px

css3 요소의 position 속성이 absolute이고 상위 요소인 사진을 relative로 하면 사진이 기준 요소가 된다.