Layout of Web Page

• 웹 페이지 레이아웃은 어떤 정보를 페이지의 어떤 영역에 넣는냐에 관한 문제이다.
  CSS에서 정보 배치 단위를 정의하기 위해 널리 사용되는 태그가 바 <div>이다. <div>는 요소를 하나의 논리적인 그룹으로 묶거나, 페이지의 구획을 정의할 목적으로 사용된다. <div> 태그와 함께 id, class를 부여하여 스타일을 적용하게 되는데, id를 적용하면 우선순위가 매우 높다보니 다른 스타일 속성들이 쉽게 무력화된다. 따라서 class를 더 자주 쓰는 것을 추천한다.
  (단, 한 페이지에 하나만 있을법한 논리적인 구분은 id로 해도 무방하다. 로그인 페이지, 웰컴 팝업 등)
• HTML5에서는 div를 대신한 여러 태그가 제공된다.
  → Semantic Elements: <header>, <footer>, <nav> 등, 이를 의도적으로 사용하려고 노력하자.
  (Semantic Web & Semantic Tag 링크 참고)

CSS Layout

CSS 스타일링을 활용하여 웹 페이지의 레이아웃을 설정하는 방법은 position, display, float, grid, flex 등 다양하게 있다. 이번 포스트에서는 그 중 다음 주제에 대해 알아보려 한다.

1. position : relative, absolute, fixed
2. display : inline, inline-block, block
3. float

내용을 보며, 머릿속으로 CSS 코드와 레이아웃을 떠올려보자.

1. position: relative, absolute, fixed

position: relative;

position: relative;는 그 자체로는 특별한 위치 변화가 없고, 위치를 이동시켜주는 top, right, bottom, left 프로퍼티가 있어야 위치를 조정할 수 있다. 위치는 각 위치를 기준으로 상대적으로 이동하며, 마이너스 값을 주면 반대 방향으로 이동한다.

예를 들어, top: 10px;은 top 위치에서 하단으로 10px만큼 움직인다는 것을 의미한다. 만약 여기 -10px의 값이 들어가게 되면 하단이 아닌 상단으로 움직이게 된다.

position: absolute;

position: absolute;는 이름과 같이 절대적인 위치에 둘 수 있으며, 가장 가까운 위치에 있고 position이 relative, fixed, absolute 중 하나라도 포함하고 있는(static 제외) 부모 요소에 대해 절대적으로 움직인다.

일반적으로 absolute를 사용할 경우, 기준이 될 부모 요소에게 position: relative;를 부여하면 된다.

absolute 속성을 갖게 되면 block-element도 내용의 크기 만큼만 가로 크기를 갖게 된다. top, right, bottom, left 프로퍼티를 조정하면 부모를 기준으로 이동하고 크기 또한 위치에 따라서 변경된다.

position: fixed;

position: fixed;는 눈에 보이는 브라우저 화면의 크기만큼, 화면 내에서만 움직인다.

header를 고정하고 싶을 때 fixed를 사용하면 된다. 고정 header 혹은 footer를 사용한다면 margin-top, margin-bottom을 이용하여 들어갈 공간을 만들어줘야 한다.

2. display: inline, inline-block, block

CSS 상에서 페이지 레이아웃을 완성하는 주요 메서드는 display 속성에 포함된 모든 속성값 지정을 통해 이뤄진다. 보통 흐름상의 모든 요소는 한 가지 display 속성값을 갖고 있으며, 해당 요소의 기본 동장 방식을 지정하는데 사용된다. 이러한 기본값 디스플레이 동작을 CSS를 통해 변경할 수 있다.

기본적으로 inline의 속성을 가지는 요소들은 한 행 안에 존재하며, 줄바꿈이 일어나지 않는다. block의 속성을 가진 요소들은 한 행의 모든 영역을 차지하며, 줄바꿈이 일어난다.

display: inline;

inline 속성은 하나의 줄 안에 혹은 같은 줄 안에 존재하며, 줄바꿈이 일어나지 않는다. 해당 요소가 가진 내용만큼의 크기를 갖게 되며, width, height 속성을 설정해도 변화가 없다.

• inline 속성을 default 값으로 갖는 요소
  -> <span>, <a>, <img> 등
• 대부분의 formatting tag 또한 inline 속성을 갖는다.
  -> <em>, <strong>, <i>, <small> 등

display: inline-block;

inline 속성과 성질은 같지만, width와 height 속성을 설정할 수 있다는 차이점이 있다.

display: block;

block 속성은 같은 줄이 아닌 다음 줄에서 시작되며, 한 행의 모든 영역을 차지한다. 즉, block 속성을 가진 요소는 부모 요소의 전체 width의 영역을 차지한다고 보면 된다.

• block 속성을 default 값으로 갖는 요소
  -> <div>, <h1>, <p>, <li>, <section> 등

3. float

float은 주로 이미지 주변에 텍스트를 감싸기 위해 만들어진 프로퍼티이다. 페이지 전체의 레이아웃을 잡을 때에도 중요한 도구가 되는데, 요즘은 flex 속성을 기반으로 레이아웃을 잡는 경우가 훨씬 많기 때문에 float는 잘 사용되지 않는다. 하지만, 훨씬 이전에 작성된 코드를 봐야하는 경우도 종종 생기기 때문에 기본적인 내용을 알고 넘어가자.

• float 속성에는 left, right, none 가운데 하나를 값으로 줄 수 있다. 하지만 float 속성을 가진 요소는 부모가 높이를 인지할 수 없어 부모의 위치에서 벗어나는 경우가 있다.

• 이를 해결하는 세 가지 방법이 있다.

  1. 바깥 div태그의 마지막에 아무 태그를 넣고, clear 속성을 적용한다. 이 방법은 HTML 코드를 더 입력해야 한다는 부담이 있다.
  2. 주로 많이 사용하는 방법으로, 바깥 div에 overflow: hidden; 속성을 주면 된다.
  3. 바깥 div에도 float 속성을 준다. 그러면 float 높이를 인지하여 그만큼 높이를 차지하게 된다. 이 방법을 사용하면 div의 block 요소 성질이 없어지게 됨으로 width: 100% 속성을 추가할 필요가 있다.