본문 바로가기

Development/HTML

HTML UI 에 대해서

정말로 그 동안 계속 개발을 해오며, HTML UI 때문에 이만저만 고생한것이 아니다.
박스모델 등.. 테이블 코드를 이용한 그리드 레이아웃등.

어쨌건.. 그 동안 이런 저러한 테스트들을 통하여 결과를 다시 작성해 본다.

먼저 기본적이 웹사이트 UI 에 가장 많이 사용되는 UI 형태이다.


작성된 HTML코드는 다음과 같다.


이제 이와 같은 형태에서 많은 각각의 요소(엘리먼트) 안에 내용들이 할당된다.
HEADER 부분에는 평균적으로 메뉴가 들어가게 될것이고,
LEFT 부분에는 로그인및 배너및 기타요소가 들어가게 될것이고,
CONTENT 부분에는 말 그대로 컨텐츠등이 들어가게 될것이다.
FOOTER 에는 카피라이트 문구나, 소개형태의 내용이 들어가게 된다.

그런데 이와같은 형태의 UI에서 빈번하게 삽질하게 되는 경우는 내용에 따른 FOOTER 위치 변동과,
CONTENT와 LEFT 를 포함하고 있는 CONTAINER 의 세로 변동이었다.
이에 간단하게 테스트를 해보았다.

나는 레이아웃 모델중 요소를 각각의 위치에 배치하는 형태의 레이아웃 모델을 훨씬 선호하기 떄문에,
위와 같은 형태로 코드를 작성하고 테스트를 하게 되었다.

먼저 위 엘리먼트에 대한 스타일시트(CSS) 코드는 다음과 같다.

하이라이트 처리가 좀 귀찮은 관계로 캡쳐로 합니다잉.ㅎㅎ;;;

그럼 맨처음 이미지와 같은 형태로 레이아웃이 구성이 된다.
이제 여기에 아래와 같은 테스트 스크립트를 삽입해 보자.


그냥 CONTENT 요소에 넘버링을 찍는 간단한 for 문이다.
그리고 결과는... ㅎㅎ
아래와 같다. 만족스럽다. ㅎㅎㅎ


100까지 찍으면 캡쳐가 힘들어서 루프를 70까지만 돌린다.

테스트한 브라우저는 IE6,7,8,9 / 구글크롬, 오페라, 파이어폭스, 사파리 등 IE의 쿼크모드 렌더링을
제외하고는 모두 동일한 결과를 나타냈다.
다음으로 이렇게 작성해준 사람을 생각해서 댓글을 작성해주는 센서를 발휘하면 테스트 완료다.ㅎㅎ
어쨌건 백문이불여일타. 테스트를 많이하자~ 

CSS레이아웃,div레이아웃,css세로100%,footer하단고정,ui개발,css layout,박스모델

이에 더 괜찮은 방법이나 틀린점은 지적 부탁드립니다. ^^; 

'Development > HTML' 카테고리의 다른 글

IE8 이하에 HTML5 적용  (0) 2012.07.25
Visual Studio 2010 HTML 유효성 검사  (2) 2012.07.09
HTML UI 에 대해서  (0) 2012.03.12
최고의 HTML 편집기가 궁금합니다.  (0) 2011.11.09
3D로 강력해진 구글 ‘크롬9′ 공개  (0) 2011.02.10
HTML UI 구성  (0) 2010.11.17