CSS 레이아웃 - Position과 Block 정리

CSS 레이아웃의의 중요한 개념인 Position과 Block에 대해 정리해보고자 한다.

참고로 말로 풀어서 글처럼 작성하지 않고, 항목별로 개념을 분류하여 정리하였다.

 

 

CSS - Display 속성 : Block과 Inline

 

• CSS의 display 속성은 화면에 여러 요소들을 어떻게 배치할 지 결정한다.
• 웹페이지의 레이아웃(layout)을 결정한다고 해도 무방하다.

div {
  display: block;
}

 

✨ Block VS Inline

• Block
  • block 태그 옆엔 다른 요소가 올 수 없다.
  • block은 높이(height)와 너비(width)를 가진다.
  • block은 Box이고, 여백과 관련된 3가지 중요한 특징을 가진다.(inline도 가지고 있는 특징이다. 상하 margin만 제외하고)
  • : margin, border, padding
  • Block 속성을 갖는 HTML 요소 : <div>, <p>, <address>, ..
  • Block 속성을 갖는 HTML 요소는 width 속성을 부여하지 않으면 기본적으로 화면 크기의 좌우 끝 전체를 차지한다.

 

• Inline
  • inline 태그 옆에 다른 요소가 올 수 있다.
  • inline은 ✨높이(height)와 너비(width)를 가질 수 없다.
    • 따라서 ✨위, 아래에 margin을 가지지 않는다.
    • (가지도록 하려면 display 속성을 inline-block으로 바꾸어야 한다)
  • Inline 속성을 갖는 HTML 요소 : <span>, <a>, <img>, ..

 

여백과 관련된 속성 1 : margin

• margin은 요소의 경계(border)의 바깥에 있는 영역이다.
• block과 inline 요소 모두 가지고 있는 특징이나, inline은 상하에 margin을 가지지 않는다.

div {
  margin: 20px; /* 전방향 */
  margin: 20px 15px; /* 상하 좌우 */
  margin: 20px 5px 15px 10px; /* 상 우 하 좌 */
  
  margin-top: 20px;
  margin-bottom: 15px;
  margin-right: 5px;
  margin-left: 10px;
}

 

• margin에 auto 값을 주면 요소를 해당 방향의 중앙에 배치시킬 수 있다.

 /* 요소를 가로 방향 기준으로 중앙에 배치 */
.center {
  margin: 0px auto;
 }

 

• user agent stylesheet :
  • 이를 없에려면 Reset CSS를 적용해주면 된다.
• 브라우저가 기본적으로 부여한 style 속성
  ex) body { margin : 8px; }

 

• Collasping Margins :
  • 위, 아래에서만 일어난다.
• box 요소의 경계가 부모 box 요소의 경계와 일치하면, 이 두 margin이 하나로 취급되는 현상

 

여백과 관련된 속성 2 : padding

• padding은 box의 경계(border)로부터 안쪽에 있는 영역이다.
• block과 inline 요소 모두 가지고 있는 특징이다.

div {
  padding: 20px; /* 전방향 */
  padding: 20px 15px; /* 상하 좌우 */
  padding: 20px 5px 15px 10px; /* 상 우 하 좌 */

  padding-top: 20px;
  padding-bottom: 15px;
  padding-right: 5px;
  padding-left: 10px;

  /* 규칙은 margin과 동일하다. */
}

 

여백과 관련된 속성 3 : border

• border은 말 그대로 박스의 '경계'이다.
• block과 inline 요소 모두 가지고 있는 특징이다.
• border 스타일 종류 확인하기 (MDN 문서)

div {
  border: 1px solid black; /* border: 너비 스타일 색깔 */ 
}

span {
  border: 2px dotted blue;
}

 

• border은 다양한 속성값이 존재하나 대부분 이쁘지 않으므로 거의 한 종류만 쓴다.

 

또 하나의 Display 속성 : Inline-block

• inline-block은 높이와 너비를 가지는 동시에, 바로 옆에 다른 요소가 올 수 있는 display 속성이다.

div {
  display: inline-block;
}

 

• 그러나 많은 문제점을 가지고 있으므로 사용을 지양한다.
  • 【문제점 1】 정해진 형식이 없고, inline-block 요소들 사이에 의미불명한 빈 공간이 생긴다.
  • 【문제점 2】 반응형 디자인(Responsive Design)을 자원하지 않는다.
    • 창 크기가 달라지면 영향을 받는다.

 

CSS - Position

• CSS의 position 속성은 HTML 요소의 위치 설정 방식을 결정한다.

 

Position 속성 1 : Fixed

• fixed 요소는, 스크롤을 내려도 계속 처음 그 자리에 위치한다.
• top, bottom, left, right 속성 중 하나라도 수정 시, 해당 요소는 초기 위치가 무시되고, 앞 쪽의 레이어로 넘어간다.

div {
  position: fixed;
  top: 20px;
  right: 15px;
}

Position 속성 2 : Static

• static 요소는 Default(초기)값이다.
• 요소의 위치를 지정하지 않는다.

div {
  position: static;
}

Position 속성 3 : Relative

• relative 요소는, 처음 위치하는 곳을 기준으로 top, bottom, left, right 속성의 값만큼 위치를 (미세하게) 이동한다.

div {
  position: relative;
  top: 10px;
  right: 20px;
  /* 처음 위치를 기준으로 위로 10px, 오른쪽으로 20px 이동 */
}

Position 속성 4 : Absolute

• ✨ absolute 요소는, 가장 가까운 relative 부모의 영역을 기준으로 top, bottom, left, right 속성을 통해 요소를 배치한다.
  • 이때, relative처럼 요소를 (미세하게) 이동하는 것이 아니라,
  • 부모 요소의 영역 안에서, 각 방향의 맨 끝부터 top, bottom, left, right 속성값만큼 떨어진 곳에 요소를 배치하는 것이다.

 

• ✨ 만일 부모 중에 relative 요소가 없으면, absoulte 요소는 body를 기준으로 삼는다.
  • (부모 중에 position이 relative, fixed, absolute인 요소가 하나라도 있으면 그 부모가 기준이 된다)

 

• 코드 예시

div {
  width: 300px;
  height: 300px;
  background-color: wheat;
  position: relative;
}

div > div {
  /* 가장 가까운 relative 부모(div)의 영역을 기준으로, 맨 아래에서 10px, 맨 우측에서 20px 떨어진 곳에 배치 */ 
  position: absolute;
  bottom: 10px;
  right: 20px;
  
  width: 100px;
  height: 100px
  background-color: teal;
}

 

• 이 때, 해당 위치에 다른 요소가 있을 경우, 뒤로 밀리지 않고 덮어쓰게 된다.

 

• 어떤 Block 요소가 absolute 값을 갖게 되면, 크기를 지정하지 않아도 내용의 크기만큼만이 요소의 크기가 된다.