IT 소프트웨어/CSS7 [CSS]처음 나오는 자식요소, 마지막 자식요소에만 적용하기 (first-child, last-child) 서브메뉴1 서브메뉴2 서브메뉴3 서브메뉴4 서브메뉴5 이런식으로 서브메뉴를 만들고 각 메뉴사이에 라인을 긋는다고 하자. li {border-bottom:1px solid #ccc;} 이렇게 하면, 마지막 서브메뉴5 밑으로도 줄이 생기게 되는데, 메뉴 사이에만 라인을 넣어야 하기 때문에 마지막 서브메뉴5 에는 border-bottom:1px solid #ccc; 가 적용안되게 하고 싶다는 것이 문제의 핵심이다. 자식요소의 마지막 요소에만 적용하는 가상클래스가 있는데 그것이 바로 last-child 이다. li:last-child {border:0;} 이렇게 하면 마지막줄은 나타나지 않게 된다. 그런데, 애석하게도 last-child 는 CSS3부터 적용이 된다. 그러면, CSS2 에서는 어떻게? -> fi.. 2011. 3. 18. 표준코딩에서 vertical-align : middle; 적용하기 정말 어렵다... 가운데 정렬하는 것이 이럴게 어려울줄이야..-_-;;; 나의 과제는 이렇다. 창의 세로크기에 따라서 항상 100% 크기로 세로가 늘어나야 하고, 그리고 그안에 있는 글이나 이미지는 항상 middle 에 와야 하는것이다. vertical-align 속성 적용 가능 한 곳 : (아래의 경우만 된다고 한다.) 1. table내 2. inline 엘리먼트 : text, img, input (여러 inline엘리먼트 안에서 세로로 가운데 정렬이 되는 것/ div안에서의 가운데 정렬을 의미하지 않음) 드디어 실마리를 찾았다. 일단 IE8에서는 좀더 간단히 되는데 IE6,7에선 다른 방법을 해야된다. 아래 이미지를 참고... 내가 만든 소스는 이런것... 2010. 3. 11. header 있고 body 있을때 body가 100% 높이 유지하도록 menu body 2010. 3. 9. E:first-child, E:lang(c) 유용한 몇가지 CSS E:first-child (:first-child 수도 클래스) E 엘리먼트 중에서 맨처음에 나오는 E 엘리먼트를 선택한다. 리스트 등을 디자인 할 때 유용하게 사용할 수 있다. IE6에서는 구현되어 있지 않다. :first-child 수도 클래스는 첫번째 엘리먼트를 선택해 옴으로써 디자인 적용에 동적인 기능을 제공한다. 위의 리스트 디자인을 보면 각 항목간에 구분선이 있는 것을 볼 수 있다. 엘리먼트에 border-top 속성을 이용해서 구현을 할 경우 처음 나오는 리스트 항목에도 위에 줄이 생겨서 원하는 결과를 얻기는 힘들다. 그래서 이와 같은 경우 첫번째 항목에만 특정 class를 적용한다든가 해서 해결을 하게 된다. 하지만 이 리스트가 동적으로 생성되는 것이라면 첫번째 항목과 나머지 항목들을 구분.. 2010. 1. 26. float 된 div를 포함한 div의 백그라운드가 안 보일때, float된 div 높이가 브라우저에 인식 안될때 clear해주는 방법 위와 같이 상황에서 B,C를 각각 float:left; float:right; 를 시켰을 때 A에 적용한 백그라운드가 안보인다. 왜냐면 A 영역의 높이가 0px 되어 버리기 때문이다. 그 문제를 해결하기 위해 고민하다가 알아냈다..!!! A에 overflow:auto; 해준다. 도움받은곳 : http://dailylog.tistory.com/19 위의 방법말고 일반적으로 많이 쓰는 방법은... 2010. 1. 26. IE8에서 이미지 사이의 여백 생기는 문제 익스플로러 IE 8 에서 이미지간 여백이 생기는 문제 발생... 회사 이벤트 페이지에서 발견! 아래처럼 별다른 코딩없이 에 이미지만 넣었을 뿐인데... IE6, IE7에서는 문제가 없으나 이상하게 IE8에서만 발생...-_- 이것저것 다해 보다가 결국 해결.... 방법은... img {vertical-align:bottom;} ▼ 문제 있는 모습 ▼ 해결된 모습 2010. 1. 15. 이전 1 2 다음
