웹스퀘어 개발자과정3(그리기모드)

브라우져에 html UI태그들이 그려지는 기준을 고정위치와 상태위치로 나눌 수 잇다.
어떤 방식으로 구성할 지는 CSS의 속성의 position으로 결정된다. 

static - 소스코드의 순서대로 배치 
absolute - 기준점을 중심으로 배치
relative - static의 확장으로 위치의 속성을 사용할 수 있다. 
fixed - absolute기반의 고정좌표 
sticky - relative기반의 고정좌표 

상단의 change Draw Mode를 클릭한다. Palette에서 원하는 해당 컴포넌트를 사용하고 absolute의 mode를 사용하면 개발자가 원하는 위치에 컴포넌트를 배치할 수 있게 만들수 있다. span을 선택하며 컴포넌트의 위치를 변경할 수 있다. 
trigger을 사용하여 버튼을 쉽게 만들수 있다 trigger나 span등과 같은 컴포넌트는 배치된 이후 double click을 하면 label의 값을 변경할 수 있다. 

ctrl + 마우스 왼쪽을 클릭하면 2개이상의 컴포넌트를 한번에 묶을 수 있고, 마우스 우측을 클릭하고 최하단을 확인하면 해당컴포넌트들을 하나의 group의 형태로 만들 수 있다. 그러나 이러한 방식의 형태는 렌더링의 순서에 문제가 생긴다.top과 left의 속성을 전부 변경해줘야하기 때문에 추천하지 않는다. 

static으로 사용학 되면 위치값이 없고 화면상에 그려진 순서대로 표현한다. css를  이용하여 위치를 변경할 수 있다. span태그를 선택하고 컴포넌트를 생성시에 생성되는 위치를 지정할 수 있다. 

group과 같이 자식요소를 갖는 level을 block level요소라고 하며 block level의 요소의 하위자식요소들을 inline 요소라고 합니다. 이두가지를 이용하여 요소를 적절히 위치를 둘 수 있다.