[TIL] CSS Layout(Position, float, Inline-block)

(1) Position - relative, absolute, fixed

html 코드의 순서와 상관없이 웹 페이지의 어느 위치에나 요소를 배치할 수 있음.

• 종류에는 static, relative, absolute, fixed가 있는데
  주로 relative, absolute, fixed가 많이 쓰인다.

1) relative

• relative는 말 그대로 상대적이란 뜻이다.
  그 자체로써 의미가 있는 것이 아니라 다른 요소와의 위치관계를 상대적으로
  배치한다.

• top, right, left, bottom을 이용해서 위치를 이동시켜줄 수 있다.

• 아래 예제 코드를 보면,

.relative {
  position: relative;
}

.top-20 {
  top: -20px;
  left: 30px;
}

• position이 relative로 설정되면, 바로 그 위 div에 상대적으로 위치가 형성된다.

2) absolute

• absolute는 웹 페이지 내에서의 위치가 절대적이다.
  부모 요소에 대해 절대적으로 움직인다.

• 일반적으로 absolute를 쓰려면, 절대적으로 움직이고 싶은 부모에게 position:relative를 부여하면 된다.

• 아래 예제 코드를 보면,

  p {
  margin: 0;
  background-color: yellow;
  }
  .absolute {
  position: absolute;
  }
  .right-0 {
  right: 0;
  bottom: 0;
  }
  
  

• div는 position이 relative로 형성되었고, p는 absolute로 형성되었기 때문에, div 안에서 자신의 절대적인 위치를 형성한다.

3) fixed

• fixed는 뜻 그대로 고정되어 있다는 뜻이다.

• 일반적인 웹 페이지에서 상단 header의 Navigation Bar를 고정시킬 때 사용된다.
  absolute와는 별개로 부모가 relative일 필요가 없다.
  해당 페이지에서 고정된 Position을 설정하는 것이기 때문.
  

• 위 그림은 kakaocorp.com이다. 위의 navigation bar가 고정되어 있다.
  휠을 내려도 위의 navigation bar의 위치는 변치 않는다.
  position : fixed가 설정되어 있는 것으로 보인다.

(2) Inline, Inline-block, block

CSS의 Display 속성 중에는 inline, inline-block, block이 있다.

1) block

• HTML의 요소들 중 대부분은 Block이다.
• <header>, <footer>, <p>, <li>, <table>, <div> 등이 모두 block 요소다.
  block 요소는 요소 바로 옆에 다른 요소가 올 수 없다.
• 위 그림에서 마지막 줄을 제외한 나머지 4개의 태그는 전부 Block 요소다.
  Block은 그 줄 전체를 차지하는 요소다.

2) Inline

• Inline은 Block과는 다르게 텍스트만큼의 영역만 차지함
  - Span, a, img 등이 대표적인 inline 태그다.

3) Inline-block

• inline, block의 특징을 모두 가진 속성.
• block 속성처럼 width, height를 지정할 수 있음.
• inline 속성처럼 줄바꿈이 이루어지지 않으며 width, height가 지정되어 있지 않으면 자식 element만큼만 영역을 차지합니다.

(3) float와 clear 속성

• float이란 CSS Layout을 잡을 때 사용하는 요소다.
  특정 요소의 위치를 코드의 순서와 상관없이 원하는 대로 보낼 수 있다.
  
  
• 실제에서는 아래 이미지와 같이 텍스트로 감쌀 때 주로 쓰인다.
  left, right, none 값을 가진다.
  
  
  

간단한 예제

• 아래 예제에서 간단한 웹페이지를 구현할 때, 배너, 사이드바, main contents를 구현할 때 float 속성을 이용해서 요소를 원하는 곳으로 배치시킬 수 있다.

• HTML 코드의 일부

  <div class="main-page">
      <header>배너</header>
      <aside>사이드바</aside>
      <section>main contents</section>
    </div>

• CSS 코드의 일부

.main-page aside {
  float : left;
}

.main-page section{
  float : right;

• "main-page"의 결과

aside 태그에 있는 사이드바라는 초록색 박스는 float:left로 왼쪽으로 보낼 수 있다.
section 태그는 float:right로 오른쪽으로 보낼 수 있다.

float 사용 시 주의할 점

• div 안에 img를 첨부했을 때 float를 사용했더니 size가 box를 넘치는 경우가 있다.
• 이 때 사용하는 방법 중 자주 쓰이는 것이 Overflow다.

.clearfix{
  overflow : auto

• overflow를 div에 적용해서 아래와 같이 바꿀 수 있다.