728x90

플로트를 이용한 간단한 2단 레이아웃을 만들어 보도록 하겠습니다.

구조는 아래 이미지를 참고해 주세요.

이번 레이아웃을 만들기 위한 CSS는 아주 간단합니다.

각 단에 원하는 너비값을 지정하고 네비게이션은 왼쪽으로 본문 영역은 오른쪽으로 플로트를 지정하면 됩니다.

레이아웃

스타일

<div id=wrapper>

<div id=mainNav></div>

<div id=content></div>

<div id=clear></div>

</div>

#content {

width:700px;

float:right;}

#mainNav{

width:200px;

float:left;}

#clear{clear:both;}

푸터가 확실히 이 두개의 플로트 아래에 오도록 하기 위해서 푸터에는 플로트 해제해야합니다.

만약 플로트해제를 하지 않는다면 푸터는 content의 오른쪽에 위치하게 될것입니다.

이렇게 기본적인 레이아웃이 완성되었습니다.

출처: 네이버 블로그

주소: http://baraem2005.blog.me/20169490375

 

728x90

'CSS' 카테고리의 다른 글

익스플로어 6에서 png파일 투명하게 보이기  (0) 2013.01.08
CSS 스타일시트 속성정리  (0) 2013.01.08
CSS 레이아웃-중간 정렬하기  (0) 2013.01.08
CSS로만 만드는 툴팁  (0) 2013.01.08
CSS 링크 스타일  (0) 2013.01.08
Posted by 정망스
,
728x90

1.AbsoluteLayout

 

의미상으로 RelativeLayout의 반대 속성을 가지는 레이아웃이다. 관계나 순서상에 상관없이 지정한 절대 좌표에 차일드 뷰를 배치한다.

 

차일드 뷰의 좌표를 layout_x, layout_y 속성으로 지정해 놓으면 부모의 좌상단을 기준으로 한 좌표에 뷰가 배치된다.

 
장비의 해상도나 방향이 수시로 바뀔 수 있는 모바일 환경에서는 유연하지 못하고 관리하기도 어렵다. 그래서 공식 문서에는 AbsoluteLayout을 사용하지 말라고 되어 있으며 제공되지 않는 레이아웃이라고 생각해도 무방하다.

 


<AbsoluteLayout>
  <TextView android:layout_x="50px" android:layout_y="100px" android:text="(50, 100)" />
  <TextView android:layout_y="200px" android:layout_y="70px" android:text="(200, 70)" />
</AbsoluteLayout>


2.FrameLayout

 

형태상으로 모든 레이아웃중에 가장 단순하다. 차일드를 배치하는 규칙이 따로 없고 모든 차일드는 프레임의 좌상단에 나타난다. 차일드가 두 개 이상일 때는 추가된 순서대로 겹쳐서 표시된다.

 

 

 

 

Visibility를 사용하여 이미지 출력을 조정한다.

 

3. TableLayout


표 형식으로 차일드를 배치하는 레이아웃이다.


테이블은 임의 개수의 TableRow 객체로 구성되며 TableRow 객체 하나가 곧 행이다. TableRow 안에는 임의 개수의 열이 배치되는데 행 안의 열 하나를 셀이라고 부르며 셀에는 차일드 뷰 하나가 들어간다. TableRow 개수가 곧 가로 행의 개수이며 TableRow 안에 배치되는 뷰의 개수가 곧 세로 열의 개수가 되고 테이블의 전체 크기는 행*열이 된다.

TableRow 객체의 높이는 항상 wrap_content로 강제된다.
셀에 배치되는 자식 뷰는 무조건 주어진 셀 안에 배치되므로 layout_width 속성은 따로 지정할 수 없으며 항상 fill_parent로 가정된다.
차일드 뷰의 높이는 디폴트로 wrap_content로 되어 있지만 원한다면 셀 안을 가득 채울 수는 있다.

 

 

728x90
Posted by 정망스
,


맨 위로
홈으로 ▲위로 ▼아래로 ♥댓글쓰기 새로고침