CSS 레이아웃

display 속성

• 페이지의 레이아웃을 결정하는 속성
• 모든 HTML 엘리먼트는 display 값을 갖고 있으며 대부분 block이거나 inline

display 속성 종류

• block
  • 기본적으로 하나의 줄을 차지하고 가능한 최대의 가로 넓이를 가짐
  • 대표적인 태그에는 div, p, form, header, section 등이 있다.
• inline
  • 특정 텍스트를 감싸하는 형태의 디스플레이 속성
  • 대표적인 태그에는 span, a 등이 있다.
• inline-block
  • 줄 바꿈 없이 다른 인라인 엘리먼트와 나란히 배치되는 디스플레이 속성
  • 대표적인 태그에는 button이 있다
• flex
  • 화면의 비율을 기준으로 레이아웃을 구성할 수 있는 최신 레이아웃 속성
• none
  • 화면에 표지되지 않음
  • 대표적으로 script 태그가 있다.
  • visibility 속성과는 다르게 none 엘리먼트는 화면에 해당 요소에 대한 공간을 차지하지 않는다.

 

박스 레이아웃

특정 엘리먼트의 width를 500px로 주고 padding을 20px로 준 경우, 사용자가 기대하는 것은 넓이가 500px인 엘리먼트이지만 실제로는 padding이 적용되어 넓이가 540px인 엘리먼트가 출력된다. 이처럼 엘리먼트의 width와 함께 padding, border 등의 속성의 추가되면 최종 넓이를 계산하기가 어려워질 수 있다.

이럴 때 box-sizing 속성을 border-box로 주면 padding, border 등의 속성 값을 넓이 반영하지 않는다. 따라서 이 속성을 활영하면 500px 엘리먼트가 표시된다. padding 속성의 값은 넓이가 500px인 엘리먼트 내부에 적용되는 것이다.

이러한 이유로 CSS 코드를 작성할 때 아래와 같은 코드를 추가하고 시작하는 경우가 많다. 페이지의 모든 엘리먼트에 동일한 박스 레이아웃 컨셉을 적용하면 레이아웃을 잡기가 수월해진다.

* {
	box-sizing: border-box;
}

 

position

• 해당 엘리먼트가 페이지에 어떻게 위치할 지를 지정하는 속성
• static
  • 기본 값(엘리먼트에 따로 값을 지정하지 않을 경우 static 값이 된다.)
  • 위치가 지정되지 않았다는 의미
• relative
  • top, right, left, bottom과 같은 속성을 주지 않으면 static과 동일하게 위치한다.
  • 각의 방향을 기준으로 태그 안쪽 방향으로 이동
    • 따라서 top: -20px, left: 20px 속성을 주면 위쪽으로 20px, 왼쪽으로 20px 떨어진 곳에 엘리먼트가 위치하게 된다.
• fixed
  • 사용자에게 비춰지는 화면을 기준으로 위치가 지정
  • 페이지가 스크롤 되거나 페이지 크기가 축소, 확대되어도 동일한 위치에 남아 있다.
    • position: fixed, bottom: 0, right: 0 으로 속성을 지정하면 페이지 우측 하단에 고정된 엘리먼트가 표시된다.
• absolute
  • position 값이 설정된 가장 근접한 엘리먼트를 기준으로 fixed와 같이 위치가 설정된다.
  • 만약 페이지에 포지션 값을 따로 설정한 엘리먼트가 없다면 document body를 기준으로 위치가 지정된다.
  • absolute를 사용할 때는 꼭 근처 엘리먼트에 relative를 지정한다.

 

참고

• https://joshua1988.github.io/web-development/css/layout-basic/