본문 바로가기

CSS UI 구성

HTML UI 에 대해서 정말로 그 동안 계속 개발을 해오며, HTML UI 때문에 이만저만 고생한것이 아니다. 박스모델 등.. 테이블 코드를 이용한 그리드 레이아웃등. 어쨌건.. 그 동안 이런 저러한 테스트들을 통하여 결과를 다시 작성해 본다. 먼저 기본적이 웹사이트 UI 에 가장 많이 사용되는 UI 형태이다. 작성된 HTML코드는 다음과 같다. 이제 이와 같은 형태에서 많은 각각의 요소(엘리먼트) 안에 내용들이 할당된다. HEADER 부분에는 평균적으로 메뉴가 들어가게 될것이고, LEFT 부분에는 로그인및 배너및 기타요소가 들어가게 될것이고, CONTENT 부분에는 말 그대로 컨텐츠등이 들어가게 될것이다. FOOTER 에는 카피라이트 문구나, 소개형태의 내용이 들어가게 된다. 그런데 이와같은 형태의 UI에서 빈번하게 삽질하게..
UI : 엘리먼트 배치 작업도중 알아가는 잊고 있었던 부분을 포스팅한다. 문서 UI 를 구성하는 방법중 테이블로 (Table) 구성하는 Grid 접근 방식. 해당 위치에 요소(Element) 를 배치하는 구성요소 방식이 있다. 특별하게 이름지어져 명명된것은 아직까지 없는듯 하다. 많이 쓰는 명칭으로는 CSS 레이아웃이라고도 하기도 하고. 틀린말도 아니지만.. 그냥 느낌이.. 완전 명확하게 정의되어진것 같은 느낌이 안든다. 엘리먼트 요소를 문서에 배치하는 것이다. 일단 CSS 레이아웃이란 이름으로. 이제 거의 왠만하면 테이블로 UI 를 구성하는 일은 없을것이다. 본래 목적. 순수하게 표로 사용하는게 맞기 때문이다. 테스트 환경 : Google Chrome, IE8, Opera, FF 보통 아래와 같이 버튼 박스를 배치하려 할 경..