본문 바로가기

div

DIV를 남발을 하지말자 DIV 남발을 하지말자 TABLE 마인드에서 갓 DIV 마인드로 넘어오기 시작한 디자이너분들께서 실수하시는 부분 중 하나가, 바로 DIV를 남발하는 것입니다. DIV는 만병통치약이 아닙니다. 테이블의 단점 중 하나가 에 재차 이 들어가기 때문에, 겹테이블이 많아져서 페이지 로딩이 느려진다는 것 입니다. DIV도 예외는 아닙니다. DIV의 숫자가 늘어나면 자연적으로 페이지 로드가 느려집니다. 굳이 DIV를 쓰지 않아도 되는 곳에서 DIV 사용을 남발하는 것은 좋지 않은 습관입니다. 예를들어 보겠습니다. 올블릿 생성마법사 메뉴 1 메뉴 2 메뉴 3 이 소스에서 필요없는 부분은 어디일까요? 네, 바로 이 소스에 있는 모든 DIV 입니다. 굳이 ul을 div로 감싸지 않더라도, 굳이 H2 제목 태그를 div로 ..
IE에서만 발생되는 z-index 버그...ㅡㅡ^ 부모객체부터... 소스코드를 보면 노란 박스가 z-index 가 20인데도 z-index 가 10인 초록색 박스 밑으로 깔려버린다. 두 박스의 차이점은 노란박스를 싸고있는 다른 div 가 하나 더 있다는 차이점 뿐이고, 노란박스를 싸고 있는 div 는 position:relative 로 되어있다는 것이다. IE 에서만 이런경우 z-index 를 무시해 버린다. 이유는 잘 모르지만 노란박스가 20 의 z-index 값을 갖고있지만 노란박스를 싸고 있는 div 는 z-index 가 지정되지 않아 0 이고, 그의 자식인 노란박스가 그것을 따르는 것 같다. 시험삼아 노란박스를 싸고 있는 div(#container) 에 z-index 20 을 주니 정상적으로 동작했다. IE 에서는 포지션이 지정된 엘리먼트의 자식노드들은 부모 노드..
명쾌한 개념 정리 div display : inline block float 1. display block Element 를 정렬할때 display: inline; 이나 float를 사용한다고 알고계시는 퍼블리셔들이 몇명이있다. 하지만 display경우에는 말그대로 디스플레이될 상태를 설정하는것이다. 즉 ! inline 레벨로 할것이냐 block레벨로 할것이냐 아니면 숨길것이냐를 설정하는것이다. 예전에 어딘가에서 display: inline; 과 float:left;를 같은 용도로 정렬로 사용하는데 차이점을 묻는 글을 본적이 있다. block을 inline으로 하면 자연스럽게 인라인의 특징인 left정렬이 되는것이 당연하다. 예를 들어 span도 inline요소이다 이녀석을 aaaaaa 당연히 left정렬이 된다. 하지만 block요소들은 float로 설정하지않은이상은 떨어져서 ..
div 의 display 속성에 대해서... div 태그로 만든 Layer를 안보이게 하는 두가지 방법 1. display:none block 아예 사라지게 하는것. 보이지도 않고 해당 공간도 존재하지 않게 됨 2. visibility:hidden visible 보이지만 않고 해당 공간은 존재. width와 height값을 주었다면 그만큼 공간은 존재하게 됨 같은 기능을 하는 div 태그에 어떤건 display로 적혀있고 어떤건 visibility로 적혀있길래 디자이너 대리님께 여쭤보니 저리도 명쾌한 대답을.. 나도 누가 뭐 물어보면 아주 명쾌하게 대답하고 싶다.. + 추가로 알게 된 사실. display의 속성으로 none과 block만 있는 줄 알았는데 아니었다. none, block, inline, inline-block, list-item,..
DIV에 대해 개념 잡기[펌] HTML에서의 div는 Division Marker의 줄임말로서 영역을 구분짓거나 무리(구분)지어주는 엘리먼트이다. 오늘은 div에 대해 알아보자. div는 div를 열고 닫은 앞뒤로 줄바꿈이 되는 블럭 레벨 항목 block level element이다. div의 앞 뒤에 있는 항목들이 가로줄로 흐르지 않고, 엔터값을 입력한 것 처럼 아래로 줄 지어진다는 말이다. div로 레이아웃이나 박스를 구성하기 위해, CSS에서 가장 많이 쓰는 속성인 position 값으로는 static, relative, absolute, fixed, inherit가 있다. Position 속성 static CSS로 특별한 값을 지정해 주지 않아도 적용되는 기본값이다. HTML 파일에서 중첩되지 않은 여러개의 div를 작성하면,..