반응형 HTML UI4 HTML UI 에 대해서 정말로 그 동안 계속 개발을 해오며, HTML UI 때문에 이만저만 고생한것이 아니다. 박스모델 등.. 테이블 코드를 이용한 그리드 레이아웃등. 어쨌건.. 그 동안 이런 저러한 테스트들을 통하여 결과를 다시 작성해 본다. 먼저 기본적이 웹사이트 UI 에 가장 많이 사용되는 UI 형태이다. 작성된 HTML코드는 다음과 같다. 이제 이와 같은 형태에서 많은 각각의 요소(엘리먼트) 안에 내용들이 할당된다. HEADER 부분에는 평균적으로 메뉴가 들어가게 될것이고, LEFT 부분에는 로그인및 배너및 기타요소가 들어가게 될것이고, CONTENT 부분에는 말 그대로 컨텐츠등이 들어가게 될것이다. FOOTER 에는 카피라이트 문구나, 소개형태의 내용이 들어가게 된다. 그런데 이와같은 형태의 UI에서 빈번하게 삽질하게.. 2012. 3. 12. UTF-8 형식으로 저장할때 생기는 공백 문제 php 웹사이트를 구축하다가 include 시 발생하는 문제. 아니 굳이 include 라기 보다는 html 문서 자체가 공백(여백)을 유지하고 있어서 UI 를 제작하는데 상당한 짜증이 났다. 그러다 보니 BOM (Byte Order Mark) 로 인한 문제였다. 보다 자세한 설명은 아래 링크에서 볼수 있다. http://corenet.tistory.com/133 내가 주로 사용하는 에디터는 울트라 에디트. 현재 버전은 15.00.0.1039 여기서는 파일을 저장할 당시 BOM 아님 이란 옵션이 나타난다. 이 옵션을 선택한채 저장을 하니 공백으로 인한 오류가 모두 사라졌다. 참으로 다행이란..ㅎㅎ;; 2011. 9. 15. [CSS] min-height, height 핵(hack)없이 사용하기 UI 코드작성은 정말 힘들다..ㅡㅡ; 출처 : http://blog.naver.com/weiss/130100739719 보통 min-height를 쓸땐, ie6에서 작용하지 않으므로, 기존엔 ie에서만 먹는 _height를 사용했다. 하지만 핵을 쓰는 것때문에 Validator에 걸림. 소스는 좀 길어지지만 핵 안쓰고, 모든 브라우저에서 정상적으로 작동하게 할 수 있는 방법 div { min-height:500px; height:auto !important; height:500px; } 순서 매우 중요 min-height : ie7이상 및 표준브라우저에서 작용. height:auto !important : 표준브라우저에서 아래 height 속성을 무시하고 min-height이상인 컨텐츠가 컨텐츠 영역을 .. 2011. 2. 25. HTML UI 구성 이번에도 간단하게 HTML과 CSS 로 UI 를 구성하는데, 나름 괜찮은 방법이기에 다시 포스팅을 한다. 이미 모두 사용하고 있을 수도 있지만.. 나는 기억력이 그다지 좋은 편이 아니기에 포스팅을 한다. 테스트 브라우저 : Google Chrome, IE8, IE6, FF, Opera div 태그로 UI 를 구성함에 있어 기본적인 원칙. 요소들의 배치. 이 것이 상당히 중요한 원칙이다. 이 원리를 구현하고자 테스트를 반복함으로 알수 있있다. 먼저 이러한 UI 를 구성하고자 타겟을 설정하였다. 색상으로 박스를 설정하였다. White (Background) : html, body, form, Wrap Yellow : header Container : blue Contents : brown box1 : cya.. 2010. 11. 17. 이전 1 다음 반응형
