UI : 엘리먼트 배치

작업도중 알아가는 잊고 있었던 부분을 포스팅한다.

문서 UI 를 구성하는 방법중 테이블로 (Table) 구성하는 Grid 접근 방식.

해당 위치에 요소(Element) 를 배치하는 구성요소 방식이 있다.

특별하게 이름지어져 명명된것은 아직까지 없는듯 하다.

많이 쓰는 명칭으로는 CSS 레이아웃이라고도 하기도 하고. 틀린말도

아니지만.. 그냥 느낌이.. 완전 명확하게 정의되어진것 같은 느낌이 안든다.

엘리먼트 요소를 문서에 배치하는 것이다.

일단 CSS 레이아웃이란 이름으로.

이제 거의 왠만하면 테이블로 UI 를 구성하는 일은 없을것이다.

본래 목적. 순수하게 표로 사용하는게 맞기 때문이다.

테스트 환경 : Google Chrome, IE8, Opera, FF

보통 아래와 같이 버튼 박스를 배치하려 할 경우

버튼을 구성하는 코드를 다음과 같이 놓았다.

이제 여기서 부터 여러가지 방법이 있을것이다.

내가 본 사례로는

그래도 되기는 된다. 근데 뭔가 찝찝하다..

만일 이미지로 버튼을 구성해놓고 버튼안에 텍스트를 동적으로 바꿔서 재사용하게 해야 하는 경우,

span 엘리먼트에 float:left 속성을 주어야 하는 경우일때는

위 1 번방법은 사용불가. 2번은.. 완전 명확하게 UI 사이즈들이 명확하게 정의되어 있을때는 사용이

가능해진다. 근데 항상 반드시 그럴수 있는것만은 아니다. 그리고 브라우저별로 렌더링이 다를경우도

난감해지고. 크로스브라우징이 좀 난감해지는 경우도 있다.

그리고 3번은 개인적으로 정말로 아니라고 본다.

저대로 작성해놓고 적용시켜 놓고 보면 알 것이다. 이미 알고 있는 사람들도 많을것이고.

그래서 다시 근본적인 UI 구성하는 논리를 생각하면 "요소들의 배치" 이다.

이에 아주 친절한 속성인 margin:0 0 0 auto 을 이용해보자.

대신 그러기엔 위 ButtonBox 엘리먼트에 width 와 height 속성이 지정되어 있어야 한다.

그렇게 작성해보면.. 왠지 작성느낌이 상당히 명시적인 느낌이 든다.

그리고 요소가 배치되는 느낌도 들고.

이미 많이 알고 있는 사람들도 있을것이지만.. 삽질은 피하기 위해서 포스팅을 한다..ㅎㅎ;;

Creative Repository