드림위버로 홈페이지 만들기

14. 레이어
■ 레이어 만들기
Object 팔레트의 레이어 버튼 이용/Insert>Layer
. Layer inspector를 이용하여 레이어를 선택하고, 감추거나 순서 등을 변경할 수 있다.
. Layer inspector를 보려면 Windows>Layers

. Prevent Overlaps 옵션을 체코하면 레이어와 레이어가 서로 겹치지 않게 할 수 있다.
. 레이어를 삽입한 후 레이어 표시기가 보이지 않으면 View>Invisible Elements를 클릭.

■ 레이어의 선택, 이동 및 크기 조절하기
선택방식
. 레이어 표시기를 선택/레이어의 좌측 상단에 나타나는 선택 핸들을 클릭/선택한 레이어의 영역 내에서 Shift키와 Ctrl키를 누른 상태에서 마우스를 클릭/Layer inspector에서 레이어 이름을 클릭.

레이어의 크기
. 마우스로 레이어의 크기를 조절하려면, 레이어를 선택하고 레이어의 경계선이나 코너의 검정색 사각형 핸들을 드래그.
. 키보드를 이용하여 레이어의 크기를 조절하려면, 레이어를 선택한 후 Ctrl키를 누른 상태에서 화살표키를 누름. Shift키와 Ctrl키를 누른 상태에서 화살표 키를 누르면 그리드의 증가값에 따라 크기가 조절됨.

레이어의 이동
. 마우스로 레이어를 이동시키려면, 레이어를 선택한 후 레이어의 좌측 상단에 나타나는 선택 핸들을 이동할 방향으로 드래그함.
. 레이어를 선택한 후 키보드를 이용하여 레이어를 한번에 1픽셀씩 이동하려면 화살표 키를 이용합니다. Shift키를 누른채 화살표 키를 누르면, 그리드 증가값만큼 이동합니다.

■ 레이어 순서 변경하기

Property inspector 이용
. Property inspector를 이용하여 레이어의 순서를 바꾸려면 Z-index값을 변경함.
Layer inspector 이용
. Layer inspector를 열기 위해 Window>Layers 명령을 선택
. Layer inspector에서 순서를 변경할 레이어를 선택한 후 위 혹은 아래로 드래그 함
레이어와 레이어 사이에 하이라이트 영역이 나타나면 마우스 버튼에서 손을 뗌. 그러면 레이어의 순서가 변경됨.

Layer inspector 다루기
레이어를 화면에 나타내거나 감추려면
. Layer inspector를 열기 위해 Window>Layers 명령을 수행.
. Layer inspector에서 레이어 이름 좌측 공간을 클릭함. 그러면 눈 모양의 아이콘이 나타남. 이 아이콘을 클릭함으로써 레이어를 보이게 하거나 보이지 않게 할 수 있습니다.

■ 레이어 이름을 바꾸려면
. Layer inspector에서 레이어 이름을 마우스로 더블클릭한 후 원하는 이름으로 레이어 이름을 바꿈. 그리고 Enter키를 눌러줌.

■ 레이어 안에 레이어를 삽입하려면
. Layer inspector에서 다른 레이어로 삽입하고 싶은 특정 레이어를 선택한 후 Ctrl키를 누른채 삽입시키고자 하는 레이어위로 드래그하면 타깃 레이어 둘레에 사각형 박스가 나타남. 이때 마우스 버튼에서 손을 떼면 드레그 중인 레이어가 삽입됨.

■ 레이어 속성 다루기
. Name : 스크립트나 Behaviors를 이용해 제어하려면 레이어에 이름을 지정해 줌.
. L, T : 페이지 또는 부모 레이어(parent layer)의 좌측 상단 모서리로부터의 떨어진 거리를 입력함.
. W, H : 레이어의 폭과 높이를 정함.
. Z-index : 레이어의 순서를 정함. 높은 숫자의 레이어가 보다 낮은 숫자의 레이어 위에 나타남.
. Vis : 레이어의 초기 디스플레이 상태를 정함.
Default : 디스플레이 상태를 웹 브라우저에게 맡깁니다. 대부분의 웹브라우저는 부모 레이어의 디스플레이 상태를 상속받아 적용함.
Inherit : 부모 레이어의 디스플레이 속성을 따름.
Visible : 레이어를 보여줌.
Hidden : 레이어를 감춤.
. Bg Image : 레이어의 배경 이미지를 설정하는 곳.
. Bg Color : 레이어의 배경색을 정하는 곳. 배경을 투명하게 하려면 빈칸으로 두면 됨.
. Tag : 레이어의 태그를 선택함. SPAN과 DIV는 CSS 형식을 따르는 태그이고, LAYER와 ILAYER는 넷스케이프 형식의 태그임. 익스플로러 사용자들은 SPAN이나 DIV를 선택하기 바람.
. Overflow(CSS 레이어만) : 레이어의 내용물이 레이어 보다 클 때 레이어의 상태를 조절하는 곳.
Visible - 레이어의 내용물이 모두 보이도록 레이어가 아래와 우측 방향으로 커짐
Hidden - 레이어의 크기를 유지하며, 넘치는 내용들은 보여주지 않음. 물론 스크롤바도 나타나지 않음.
Scroll - 레이어의 내용물이 넘치든 안 넘치든 레이어에 스크롤바가 나타나게 함.
Auto - 레이어의 내용물이 넘칠 때만 스크롤바가 나타나게 함.
Clip - 레이어의 일부만 보이게 하고 싶을 때 사용.
. Top, Left, PageX, PageY(Netscape 레이어 형식만) : 부모 레이어에 관련해 위치를 설정
. Source(Netscape 레이어 형식만) : 레이어 내에 또다른 HTML 문서를 보여주고자 할 때 사용함.
. A/B(Netscape 레어어 형식만) : 현재 선택한 레이어를 다른 레이어의 위나 아래로 옮길 때 이용함.

■ 레이어의 환경 설정하기
레이어에 관련된 기본 셋팅을 설정하려면 Edit>Preferences 명령을 선택한 후 Layer preferences를 이용함.
. Width/Height : Insert>Layer 명령을 이용해 레이어를 만들 때 레이어의 기본 크기를 설정함.
. Nesting : Ctrl키를 누르고 레이어를 그리면 이 옵션값을 일시적으로 변경할 수 있음.

■ 레이어 작업을 도와주는 그리드와 자 설정하기
그리드 다루기
. 그리드를 나타나게 하려면 View>Grid>Show 명령을 선택함.
. 표나 레이어가 그리드에 달라붙게 하거나 떨어지게 하려면 View>Grid>Snap To 명령을 선택함.
. 그리드 셋팅을 변경하려면 View>Grid>Settings 명령을 선택함.
. Visible Grid : 그리드를 보여줄지 감출지를 설정함.
. Spacing : 그리드가 나타나는 간격을 설정함.
. Color : 그리드의 색상을 설정함.
. Display : 그리드를 선으로 나타낼지 점으로 나타낼지를 설정함.
. Snapping : 이 옵션을 체크하고, 밑에 값을 설정하면 표나 레이어가 그리드에 정해진 값 이내로 접근하면 자동으로 그리드에 달라붙도록 함.

자 다루기
. 자를 나타나게 하려면 View>Rulers>Show 명령을 선택함.
. 작업창의 좌측 상단에 있는 자의 원점(0,0) 위치를 변경하려면 View>Rulers>Reset Origin 명령을 선택한 후, 원점을 클릭하여 원하는 곳으로 드래그하면 됨.
. 자의 측정 단위를 변경하려면 View>Rulers 명령을 선택한 후 Pixels, Inches, Centimeters 중의 하나를 선택하면 됨.