[HTML, CSS] 웹 화면의 레이아웃을 구성하자

📋   화면 레이아웃 구성하기

  웹 페이지 개발을 처음 기획할 때 우선적으로 하는 것은 화면의 레이아웃을 잡는 것이다. 사용자에게 강조해서 보여주고 싶은 요소를 어떤 모습으로 어디에서 보여줄 것인지는 중요한 문제이기 때문에 좋은 레이아웃을 갖추고 개발을 시작하는 것이 기획 단계의 핵심 과제이다. HTML 문서만 가지고 레이아웃을 잡는 것에는 한계가 있고, CSS 문서를 통해서 레이아웃을 완성시키게 된다. 이번 포스팅에서는 레이아웃을 구성할 때 사용할 수 있는 CSS 속성에 대해서 알아보자.

💡   Position 속성 사용하기

  CSS의 Position 속성을 통해서 웹 문서 상의 요소를 배치하는 방법을 지정할 수 있다. 속성에 부여할 수 있는 값으로 static, relative, absolute, fixed, sticky 가 있다. 그 중에서 자주 사용하는 relative, absolute, fixed에 대해 자세히 알아보자.

  relative

  Position의 기본값인 static이었을 때 배치되는 위치를 기준으로 상대적 위치를 지정할 수 있는 속성이다. top, right, bottom, left 값을 통해서 오프셋을 적용시켜 위치시킨다.

  absolute

  Position 속성에 absolute를 부여하게 되면 요소를 배치하는 기준점이 바뀌게 된다. 부모 요소 중에 position 속성이 relative, fixed, absolute로 지정된 요소가 하나라도 있으면 해당 부모 요소의 위치를 기준으로 top, right, bottom, left 값만큼 오프셋을 적용시켜 위치시킨다. 만일 위의 조건에 해당하는 요소가 없다면 브라우저 창을 기준으로 오프셋을 적용하게 된다.

  fixed

  명칭에서 유추되는 것처럼 브라우저 창을 기준으로 위치가 정해진다. 마찬가지로 좌표 속성에 값을 부여해서 원하는 위치를 정해주면 된다. 주요 특징으로 화면 스크롤이 일어나도 자신의 위치를 계속해서 지키고 있게 된다. 이러한 특성 때문에 네비게이션 바와 같이 사용자에게 계속해서 보여줘야 하는 요소에 자주 사용된다.

🗂   Display 속성을 사용하기

  Display 속성 또한 웹 페이지 레이아웃을 결정하는 CSS의 중요한 속성 중 하나이다. 어떤 값을 부여하느냐에 따라서 html 요소가 브라우저에서 보여지는 방식을 정할 수 있다. none, block, inline, inline-block을 주로 사용한다. flex를 사용하여 레이아웃을 배치하는 방식은 추후에 따로 설명해보겠다.

  none

  요소를 화면에서 보이지 않도록 설정할 때 부여한다. visibility 속성을 hidden으로 했을 때는 영역을 차지하지만, display = none은 영역도 차지하지 않는다.

  block

  display=block 은 <div>, <p>, <ul>, <ol> 등의 태그들에 기본적으로 부여되는 값이다. 가로 영역을 모두 채우는 특징을 가지고 있어서 다음에 나오는 요소들은 줄바꿈이 된 채로 보여지게 된다. margin과 width, height 속성을 모두 부여할 수 있어서 레이아웃 구성 시 자주 사용된다.

  inline

  display=inline 은 <span>, <a>, <img> 등의 태그들에 기본적으로 부여되는 값이다. block과 달리 가로 영역을 모두 채우지 않고, 컨텐츠 크기만큼 영역을 차지한다. inline 속성을 부여하게 되면 width와 height를 지정할 수 없고, margin-top과 margin-height도 부여할 수 없다는 특징을 가지게 된다.

  inline-block

  block과 inline의 중간 형태의 특징을 띄는 속성으로 줄 바꿈 없이 한 줄에서 연속적으로 나타나지만 margin, width, height 속성을 정의할 수 있다.

🧷   Float 속성을 사용하기

  마지막으로 다루어볼 속성은 float이다. Flex가 레이아웃에 자주 사용되는 요즘에는 많이 쓰이지 않지만, 예전에는 많이 사용되었다. 주로 이미지와 텍스트를 함께 보여주는 article 형식의 문서에서 자주 사용되며, 배치하고자 하는 위치에 따라 left, right, inline-start, inline-end의 값을 지정해주면 된다.

😀   Conclusion

  MDN 사이트에 방문하면 웹 페이지 레이아웃을 구성하는 다양한 방법에 대해서 확인할 수 있다. 다양한 사용자 환경에 대응하는 레이아웃까지 고려한다면 더 많은 노력이 요구된다. 그만큼 웹 페이지 개발에 있어 중요한 단계이기 때문에 첫 단추를 잘 끼워나가야 추후 과정이 진행되는데 지장이 없을 것이다.

참고자료

https://developer.mozilla.org/ko/docs/Web/CSS/position
https://engkimbs.tistory.com/922
https://developer.mozilla.org/ko/docs/Web/CSS/display
https://ofcourse.kr/css-course/display-%EC%86%8D%EC%84%B1