CSS을 사용하여 레이아웃(layout) 잡기

 

 테이블로 레이아웃을 잡는 것보다 CSS를 사용하여 레이아웃을 잡는 것이 좀 더 어렵다. 이유는 테이블 방식은 영역의 너비나 높이를 지정하고 셀을 통해 레이아웃을 잡지만 CSS는 각 영역의 흐름에 따라 영역을 배치하여 레이아웃을 잡기 때문에 영역이 쌓이는 흐름에 대해 알아야 레이아웃을 잡을 수 있기 때문이다. 

 

 

■ CSS를 사용하여 레이아웃을 잡을 때 필요한 속성들

 

박스모델, 포지셔닝, 플루트 + visibility , overflow

 

위와 같은 속성과 문서내의 엘레멘트의 흐름을 가지고 레이아웃을 잡는다.

 

 

■ 엘레멘트가 쌓이는 흐름 

 

 우선 블럭 레벨 엘레멘트와 인라인 레벨 엘레멘트를 구분해야 한다. 블럭 레벨 엘레멘트는 엘레멘트 앞 뒤로 줄바꿈을 하고, 수직정렬을 하는 엘레멘트이다. 대표적인 엘레멘트로는 <p>, <div> 등이 있다. 인라인 레벨 엘레멘트는 엘레멘트가 앞 뒤로 배치될 때 줄바꿈을 하지 않고, 수평정렬하는 엘레멘트이다. 이렇게 흐름에 차이만 있는 것이 아니라 영역을 차지하는 부분도 블럭 엘레멘트와 인라인 엘레멘트는 구별된다.

 

 블럭레벨은 영역의 너비나 높이를 지정하면 콘텐츠의 영역이 지정한 영역보다 작아도 모든 영역을 차지하는 반면, 인라인 레벨은 아무리 너비나 높이를 지정해도 콘텐츠의 영역만큼만 영역을 사용할 수 있다.

 

 여기에 인라인-블럭 레벨 요소가 있는데, 인라인-블럭 레벨은 외부적으로 인라인 속성을 가지지만, 내부적으로 블럭 레벨의 속성을 가지는 레벨이다. 인라인-블럭 레벨은 외부적으로 인라인요소 이지만, 내부적으로 블럭 레벨 요소의 특징을 가지고 있기 때문에 폭과 넓이가 유지된다. 레벨을 변경하기 위해서는 display 속성을 사용하여 영역의 레벨을 변경할 수 있다.

 

 모든 요소는 자신이 들어갈 수 있는 영역이 있다면 차곡차곡 쌓이는 방식으로 영역을 차지합니다. 이 흐름을 바꾸기 위해서는 float 속성을 지정하여 변경할 수 있다. float 속성을 지정하면 영역의 쌓이는 흐름을 벗어나 독자적으로 영역을 차지한다. float 속성으로 왼쪽, 오른쪽으로 보낼 수 있는데 가운데로 위치시키는 것은 float 속성이 지원하지 않는다.

 

 또한, position 속성을 사용하여 엘레멘트 사이의 관계를 유지하면서 차지하는 영역을 변경할 수 있는데 relative 속성은 영역의 원래 위치에서 상대적으로 위치를 이동시키며, absolute 속성은 일반적인 흐름에서 벗어나 부모 요소의 시작점을 기준으로 절대적 위치에 영역을 위치시킨다.

 

 visibility 속성은 엘레멘트의 영역은 그대로 유지하면서 엘레멘트가 화면에 보일지, 숨길지, 겹칠지를 지정하는 속성이다. visibility 속성은 영역을 그대로 유지한다는 점에서 display 속성의 none 값과는 다른 결과를 출력한다.

 

 overflow 속성은 영역안의 콘텐츠의 내용이 영역보다 많을 경우 콘텐츠의 내용을 보일지, 감출지, 스크롤 할지를 결정하는 속성이다. 각각의 특성을 살려 CSS에서 레이아웃을 잡을 수 있다.