TIL 08 [CSS] DISPLAY AND POSITIONING

1. Position

• static : 기본값

  

• relative : 원래 위치해야 할 자리에서 위아래 좌우 여백 설정.
  (top bottom left right 네 개의 오프셋 값을 이용해 설정.)

  .box-bottom {
    background-color: DeepSkyBlue;
    position: relative;
    top: 20px;
    left: 50px;
  }

  

• absolute : 부모 요소 안의 모든 다른 요소들이 없는 것처럼 자리 설정.
  (top bottom left right 네 개의 오프셋 값을 이용해 설정.)

  .box-bottom {
    background-color: DeepSkyBlue;
    position: absolute;
    top: 20px;
    left: 50px;
  }

  

• fixed : 스크롤 해도 고정.
  (top bottom left right 네 개의 오프셋 값을 이용해 설정.)

  .box-bottom {
    background-color: DeepSkyBlue;
    position: fixed;
    top: 20px;
    left: 50px;
  }

  

2. Z-Index

• 정수를 값으로.
• 다른 요소와 겹칠 때: 숫자가 클수록 앞으로 온다.
• position: static; 일 때는 작동하지 않음.

3. Display

• inline
  : 줄바꿈 없이 한 줄에. (높이, 넓이 CSS로 지정할 수 없음 = 다닥다닥 붙어 있음..)
  : 인라인이 기본값인 요소: <em>, <strong>, <a> 등.
  : <p>, <div>, <h1>~<h6> 같은 블록 요소도 인라인으로 지정할 수 있다.

• block
  : 한 줄 전체를 차지.
  : height 조절 가능. (width 는 컨테이너 전체 값)
  : 블록이 기본값인 요소: <p>, <div>, <h1>~<h6>, <footer> 등.

• inline-block.
  : 한 줄에 놓이지만 높이, 넓이를 지정할 수 있다!

  .rectangle {
    display: inline-block;
    width: 200px;
    height: 300px;
  }

4. Float

• float: left; 또는 float: right;
• position: static; 또는 position: relative 일때 작동.
• width 값을 가져야만 제대로 작동.
  

5. Clear

플로팅 요소가 여러 개일 경우, 각각 height가 다를 때 각 요소들이 부딪혀서 레이아웃이 꼬일 수 있다. (플로팅 요소 + 플로팅 요소 아닌 경우에도)

• 선행 플로팅 요소 다음에 어떻게 배치될지 지정.

• 자신이 플로팅 요소이건 아니건 상관없이 적용됨.
  1) 플로팅 요소일 때: 모든 관련 플로팅 요소의 마진 경계 아래로 자신의 마진 경계를 옮김. (나중에 오는 플로팅 요소의 위치에 줄줄이 영향을 줌.)
  2) 플로팅 요소가 아닐 때: 모든 관련 플로팅 요소의 마진 경계 아래로 자신의 테두리 경계를 옮김. (마진 상쇄 X)

• clear: left;
  : 포함된 요소(상위 요소)의 다른 어떤 요소에도 해당 요소의 왼쪽이 닿지 않음.(float: left를 무력화)
  clear: right;
  : 포함된 요소(상위 요소)의 다른 어떤 요소에도 해당 요소의 오른쪽이 닿지 않음.(float: right를 무력화)
  clear: both;
  : 포함된 요소(상위 요소)의 다른 어떤 요소에도 해당 요소의 왼쪽과 오른쪽이 닿지 않음. => 양쪽에 플로팅 돼 있는 요소들의 아래로 이동.
  clear: none;
  :포함된 요소(상위 요소)의 다른 요소들과 닿을 수 있음..