다양한 레이아웃의 구성과 기능

 이 게시물은 HTML5 웹 프로그래밍 입문 3판-한빛 아카데미 책을 기반으로 작성됩니다*

* 스스로 공부하고 복습하는 개념으로 정리하는 것이기에 부족한 부분이 있을 수도 있습니다!*

 

---

이번 포스팅에서는 CSS3를 사용하여 정렬하는 방식과 레이아웃을 구성하고 좌표를 활용하는 방법에 대해 알아보려고 합니다.

 

1. 수평, 중앙, One True 정렬 레이아웃

 

1-1. 수평 정렬 레이아웃

지난 포스팅에서 배운 float와 overflow 속성을 이용해서 레이아웃 만드는 방식에 대해 살펴보도록 하겠습니다. 반드시 따라야 하는 규칙이 존재하는 데, 특별한 경우를 제외하면 대부분 이 규칙을 적용시키기 때문에 꼭 기억해두시면 좋을 것 같습니다.

" 자손에게 float 속성을 지정하고, 부모의 overflow 속성에는 hidden 키워드를 적용시킨다"

 

1-2. 중앙 정렬 레이아웃

중앙정렬은 포털을 비롯 해서 많이 사용되는 레이아웃 구성 방식입니다. 특정한 너비의 중앙에 내용이 위치하는 데 이를 중앙 정렬 레이아웃이라고 할 수 있습니다. 중앙 정렬 레이아웃을 만드는 방법은 간단합니다. 

중앙 정렬 하고 싶은 태그에 width 속성을 부여하고 margin 속성을 '0 auto'로 입력하면 됩니다. 코드를 실행하게 되면 body 태그에 해당하는 제목과 본문이 중앙에 위치하게 됩니다. 

예시를 보여드리도록 하겠습니다.

1-3. One True 레이아웃

국내 모든 포털 사이트의 메인 페이지는 one true 레이아웃을 사용합니다.

기본원리는 매우 쉬운데, 행을 독립적으로 생각해서 공간을 나눈다는 원리만 따르면 됩니다. 

 

2. 요소배치

 

2-1. 절대 위치를 사용한 요소 배치

절대 위치를 사용한 요소 배치는 지난 포스팅에서 다룬 내용입니다. "자손의 position 속성에 absolute 키워드를 적용하려면 부모의 height 속성을 입력합니다." 이 내용을 적요하면 쉽게 작성 가능합니다.

 

2-2. 요소를 고정 위치에 배치

바는 웹 페이지의 상하좌우에 붙어 사용자를 따라다니는 요소로, 인터넷 쇼핑몰이나 웹 응용 프로그램에서 많이 사용합니다. 고정된 바를 만드는 방식은 간단합니다.

우선 position 스타일 속성에 fixed를 적용하고 left, top, right , bottom 속성에 값을 입력하여 위치를 설정합니다. 이어서 width 속성과 height 속성으로 크기를 설정하면 됩니다. 

 

3. 글자 생략

한 행을 넘어가는 글자를 자동으로 생략하는 기능입니다.

글자를 생략하는 기능은 ellipsis 클래스를 만들면 쉽게 구현 가능합니다.

예시를 보여드리도록 하겠습니다.