레이아웃 구현하기 – 01

레일즈의 레이아웃 기능을 이용하면 도움이 될 것 같아서 레이아웃을 시간나는데로 만들어 보려고 한다.

우선 전체적인 레이아웃은 담당하는 파일은 application.html.erb 이고 app/views/layouts/ 디렉토리에 위치한다. 그 다음에 이 레이아웃에서 사용하는 스타일시트 파일은 application.css 이며, public/stylesheets/ 디렉토리에 위치한다.

$ rails any_app 로 새로운 레일즈 어플리케이션 골격을 만든 후에 각각의 디렉토리에 본 파일을 복사한다.

3열3단 구조 레이아웃

Directory Location of Layout Files

app/views/layouts/application.html.erb

public/stylesheets/application.css

public/images/column.png /* 3컬럼 표시를 위해 배경이미지로 사용하는 파일 */

본 레이아웃의 구조는 크게, head / trunk / foot 세개로 나누어 3단구조를 가진다.  그리고, trunk 는 col-left / col-center / col-right 로 구분해서 3컬럼의 세부 구조를 갖도록 하여 현재 인터넷 상에서 볼 수 있는 가장 기본적인 레이아웃 구조이다.

또한, 각 섹션의 padding 값은 0로 설정해 두었고 그 안에 내용을 삽입할 때는 별도의 div 태그를 사용하여 구획선과 내용물의 여백을 줄 수 있도록 하였다. 이 때 사용할 수 있는 클래스들의 이름을 여백값을 쉽게 알 수 있게 명명하였으며, 예를 들면, padding-none, padding-10, padding-15, padding-20, padding-25, padding-30 이다.

head 와 foot 섹션의 높이 속성은 min-height 를 이용하였으며 30px 로 설정해 두었다. 그리고 space holder 값인   값을 삽입해 두었다.

또한 각 섹션의 css 이름을 쉽게 알 수 있도록 각 섹션의 우측상단 모둥이에 css id 이름을 표시해 두었다. 프로그램 작업이 끝난 후에 불필요한 경우, application.html.erb 파일에서 삭제하면 된다.

3 단3컬럼 구조에서 얼마든지 레이아웃을 변형하여 사용할 수 있다. 예를 들면, 현재의 레이아웃 배열에서 3컬럼을 없애면 바로 3단레이아웃 구조를 만들 수 있고,  head 와 foot 를 없애면 바로 3컬럼레이아웃 구조를 만들 수 있다.

도움이 되기 바랍니다.

작성자 : 닥터최

글쓴이: 최효성

외과전문의,웹프로그래밍,컴퓨터 일러스트레이션 / Surgeon, Medical Illustration, Web Programmer

답글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Google+ photo

Google+의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

%s에 연결하는 중