위치

이전 다음 

상대위치 / 절대위치

  상대위치 절대위치
기본개념 바닥에 타일을 서로 겹치지 않게 쫙 펼쳐놓은 상태.
중간에 타일을 하나 추가하거나 타일의 크기가 커지면 인접한 타일은 아래로 밀리게 됨.
칠판에 포스티지를 덕지덕지 붙여놓은 상태.
포스티지를 추가로 붙이든, 포스티지의 크기가 바뀌던 다른 포스티지의 위치에 영향을 주지 않음.
기준위치 셀이 있어야할 자신의 위치를 기준으로 함.

예) 부모셀의 상단 내부여백이 20px, 좌측 내부여백이 15px 인경우 셀이 시작되는 위치는 부모셀 기준 위로부터 20px, 자로부터 15px 떨어진 지점에 위치하게 됨. 또한 해당 셀 위에 형제셀들이 존재한다면 해당 형제셀들이 차지하는 공간만큼 밀린뒤에 위치함.
부모셀의 꼭지점중 하나(Position 항목에 지정한 left/right, top/bottom)를 기준으로 위치가 지정됨.

부모셀의 내부여백값에 영향을 받지 않음
Position 지정 해당 값 지정시 자신을 기준으로 위치를 조정함.

셀의 내부여백이나 크기변경시는 뒤따르는 형제셀의 위치에 영향을 주지만, Position 값으로 상대위치가 바뀐경우 형제셀의 위치에 영향을 주진 않음. 즉, 형제셀과 겹칠 수 있음.

상대위치에서는 Position 은 거의 사용하지 않음.
부모셀 기준 원하는 위치를 지정할 수 있음.

대부분의 경우 Position 을 지정하지만, 지정하지 않는 경우 셀이 위치해야할 기본 위치를 시작점으로 간주함.
Position 값을 "0" 으로 준것과 빈것은 다름.
즉, 빈값은 Position 을 지정하지 않는다는 의미이고, "0" 으로 지정한것은 기준점(left,right,top,bottom)으로부터 0픽셀만큼 떨어지게 지정한것임.
용도 위아래로 층층이 단을 구성하는 경우 사용.

예) 헤더,본문,푸터처럼 단을 구성하는경우.
원하는 위치에 셀을 보여줄때 사용.
단, 형제셀이나 부모셀의 위치 및 크기에 영향을 주지 않으므로 셀 안에 들어갈 내용의 높이가 가변적으로 변하는 경우 사용하면 안됨.

절대위치로 지정시 인접한 셀의 위치에 영향을 주지 않기 때문에 게시판등 상황에 따라 셀의 높이가 가변적으로 변하는 셀에는 사용하면 안됨.
예를들어 내용이 긴 게시물을 볼때 하위 카피라이트 부분이 게시물 뒤로 가려지는 현상이 나옴.
그러므로 절대위치는 셀 안에 들어갈 내용이 고정되어 있고, 부모셀의 크기도 고정된 상황일때 사용.

상대위치 Float 설정

좌우 단으로 구성된 레이아웃을 만들때 Float 설정을 이용합니다. 또는 [크기]탭의 "반응형 설정"을 이용하여 좌우 단을 구성할수도 있습니다.

none left right
추가되는 형제셀들은 무조건 줄바꿈 처리됩니다. 즉, 차곡차곡 아래로 쌓이게 됩니다. 추가되는 형제셀들은 계속해서 앞의 형제셀 옆으로 붙으려고 합니다.(방향은 왼쪽).
단, 더이상 옆에 붙기에는 공간이 부족할때 자동으로 줄바꿈 처리됨.
추가되는 형제셀들은 계속해서 앞의 형제셀 옆으로 붙으려고 합니다.(방향은 오른쪽).
단, 더이상 옆에 붙기에는 공간이 부족할때 자동으로 줄바꿈 처리됨.
마지막 화면은 float 를 이용하여 좌우 단을 구성한 예입니다. 부모셀의 넓이를 감안하여 좌측과 우측 자식셀의 넓이를 지정하여 중간에 적당한 공간이 있는 단을 구성할수 있습니다.

block 대신 inline-block 으로 처리

Float를 사용하지 않는 [상대위치]상태에서 고정넓이 또는 최소넓이가 설정된 경우, 부모셀의 텍스트정렬 옵션에 따라 셀의 위치가 정렬되도록 할 수 있습니다.

block 대신 table-cell 으로 처리

셀의 display 속성을 table-cell 로 설정할때 다음과 같은 스타일을 구현할 수 있습니다.

  1. 인접한 좌우 셀의 높이가 다르더라도 항상 가장 큰 높이로 똑같이 보여줍니다. 해당 속성을 이용하여 좌우 구분선 또는 배경색으로 단을 구분지어 보여줄 수 있게됩니다.

    [Float 속성으로 좌우 단을 만든 경우(인접한 셀의 높이가 각각 제각각)]
    넓이 : 30%
    오른쪽 검은테두리
    넓이 : 70%
    높이가 가변적으로
    더 클수도 있는 상황

    [table-cell 속성으로 좌우 단을 만든 경우]
    넓이 : 30%
    오른쪽 검은테두리
    넓이 : 70%
    높이가 가변적으로
    더 클수도 있는 상황
  2. 고정 넓이셀과 가변 넓이셀 구성으로 부모셀에 꽉 차게 보여줄 수 있습니다.

    [table-cell 속성으로 좌우 단을 만든 경우]
    넓이 : 200px 고정
    오른쪽 검은테두리
    넓이 : 100% 또는 자동
    인접한 셀에서 차지한 넓이를 제외한 만큼 채워 보여줌
    Float 설정만으론 이와 같은 스타일 구현은 어려움
  3. 단, table-cell 속성 사용 시, 반응형 레이아웃 구성은 할 수 없음

새로운 줄에서 시작

Float를 사용하는 경우 같은 Float 설정을 한 인접한 셀 옆에 붙이지 않고 강제로 아래로 떨어져 보이게 합니다.

Position

일반적으로 [절대위치]설정을 한 셀의 위치를 지정할 때 사용합니다. [상대위치]의 경우는 Position을 설정할 경우는 특별히 없습니다.

마우스로 이동시킬 수 있습니다

특별히 사용할 경우는 없지만, 필요시 마우스 드래그로 셀 위치를 변경할 수 있게 합니다. 단, 페이지 새로고침되는 경우 원래 위치로 보여줍니다.

빌더상에서 마우스로 셀위치를 변경합니다

[절대위치]상태에서 마우스 드래그로 셀의 위치를 설정할 수 있게 해줍니다. 셀의 위치를 쉽게 설정하기 위한 용도이므로 위치를 잡은 후에는 해당 속성을 해제하세요. 해제하지 않는 경우 나중에 잘못 움직여 위치가 잘못 바뀔 수 있습니다.

빌더상에서 마우스로 셀의 크기를 변경합니다

[절대위치]상태에서 마우스 드래그로 셀의 크기를 설정할 수 있게 해줍니다. 위와 마찬가지로 설정후에는 해당 옵션 해제를 권장합니다.

노출순서(z-index)

각 셀이 겹쳐지지 않는 경우 별도로 노출순서를 지정할 필요는 없습니다. 단, 셀간 또는 셀 안에 있는 모듈에서 다른 셀과 겹쳐서 보여지는 경우 노출순서를 임의로 변경할때 설정합니다.

  • 번호가 클수록 앞에 표시됩니다.
  • 형제셀과 노출순서가 같은경우 나중에 등록한 셀이 앞에 표시됩니다.
  • 셀의 노출순서가 아무리 높아도 부모셀의 노출순서가 부모셀의 다른 형제셀보다 낮다면 우물안의 개구리일뿐입니다. 즉, 다른 부모셀에 가려지는 경우 부모셀의 노출순서를 조정하셔야 합니다.

좌우 스크롤 / 상하 스크롤

페이지 레이아웃에서 브라우저의 스크롤에 따라 항상 따라다니거나, 가려지지않고 항상 보이게 하고 싶은 경우 해당 설정을 합니다. 위치 조정시 애니메이션 타입을 1000분의 1초 단위로 지정할 수 있습니다. "0"으로 지정하는 경우 별다른 효과없이 바로 고정되게 합니다. 스크롤 샘플 보기

또한 아래와 같은 Javascript 함수를 정의해 놓으면 해당 이벤트 발생시 자동 실행됩니다.
함수명은 "셀 고유 ID" + "_[top|left]_[on|off]" 형식으로 지정하면 됩니다.
예를들어 셀 고유 ID가 "cell_0_2" 인경우는 다음과 같습니다.

  • cell_0_2_top_on() : 상하 스크롤시 위치고정 이벤트가 발생할때 실행될 함수명
  • cell_0_2_top_off() : 상하 스크롤시 위치고정 이벤트가 사라질때 실행될 함수명
  • cell_0_2_left_on() : 좌우 스크롤시 위치고정 이벤트가 발생할때 실행될 함수명
  • cell_0_2_left_off() : 좌우 스크롤시 위치고정 이벤트가 사라질때 실행될 함수명
  • ※ 추가적으로 위치고정 이벤트가 발생할때 top_on, left_on 클래스가 해당 셀에 추가되며, 이벤트 사라질때 top_off, left_off 클래스가 추가됩니다.

스크롤 여부에 관계없이 셀의 위치를 항상 화면에 고정시킵니다

Position을 지정할때 부모셀 기준이 아니라 웹브라우저 화면전체를 기준으로 합니다.

태그 유형

기본적으로 셀은 "div" 태그를 이용하여 표현됩니다. 필요시 의미에 맞는 셀의 유형을 지정할 수 있습니다. 자세한 내용은 HTML5 Semantic Elements를 참고하세요.

본문이 들어있는 셀입니다 / 메인메뉴가 들어있는 셀입니다

키보드(탭)로 페이지 서핑 시 상단에 "본문으로 바로가기" 또는 "메뉴 바로가기" 링크를 추가하여 해당 위치로 바로 갈수 있게 합니다.

이전 다음 
go top