WebSquare5 화면 구성 방법
1. Static / Absolute 포지션 위주로 사용
WebSquare5에서 컴포넌트 배치를 할 때 Static과 Absolute 포지션을 주로 사용합니다. 각각의 특징은 다음과 같습니다:
2. Static Position
설명: 컴포넌트의 기본 포지션으로, position: static이 적용된 상태입니다. 좌표값 없이 컴포넌트가 HTML 렌더링 순서에 따라 자동 배치됩니다.
특징:
- 코드 순서대로 렌더링되어 위에서 아래, 왼쪽에서 오른쪽으로 배치.
- 주로 사용되는 포지션으로, 레이아웃이 안정적입니다.
예시:
style="width:150px; height:24px;"
3. Absolute Position
설명: position: absolute가 적용된 상태로, 부모 요소를 기준으로 좌표값을 설정하여 자유롭게 배치 가능합니다.
특징:
- 좌표값(
top, right, bottom, left)과 크기(width, height)를 지정하여 배치.
- 유연하게 위치를 지정할 수 있지만, 유지보수 및 협업 시 활용도가 낮아질 수 있습니다.
예시:
style="position:absolute; left:20px; top:10px; width:150px; height:24px;"
4. 기타 Position 유형
- Relative Position: Static을 기준으로 상대적인 위치를 설정. 위치 속성(
top, left 등)을 사용할 수 있습니다.
- Fixed Position: 뷰포트를 기준으로 고정되어 스크롤이 되어도 위치가 변하지 않음.
- Sticky Position: Relative와 Fixed의 혼합 형태로, 특정 조건에서 고정 위치를 가짐.
5. 왜 Static이 디폴트로 설정되는가?
렌더링 시 컴포넌트가 코드 순서대로 배치되기 때문입니다.
- Static 포지션은 사용자가 화면 로딩 중에도 안정적인 UI를 경험할 수 있게 합니다.
- 장점:
- 사용자 입장에서 로딩 시 혼란이 적음.
- 위 → 아래, 왼쪽 → 오른쪽 순서로 직관적인 배치.
6. WebSquare5에서 Position 설정 방법
- 포지션 선택:
- 상단 툴바에서 포지션 선택 메뉴를 클릭.
- Static, Relative, Absolute, None 중 선택.
- Position 적용:
- 새로운 컴포넌트를 생성하거나 기존 컴포넌트에 포지션 설정 가능.
- Absolute 선택 시 확인 창이 나타나며 적용 여부 확인.
7. 추가 팁
- Static 포지션을 기본으로 사용하되, Absolute 포지션은 특정 조건에서 유연한 레이아웃을 위해 선택적으로 활용합니다.
- 컴포넌트 위치 변경 시 협업 효율성을 고려하여 적절한 포지션을 사용하세요.
