본문 바로가기

DHTML/CSS/META

CSS DIV 수직정렬 방법 4가지 (비추천) css로 수직 정렬하는 방법은 매우 다양하다.그러나 그 중 하나를 선택하기란 어렵다. 나는 그 중에서 최적의 방법을 같이 공유하려고 한다. 방법 1. div태그의 display속성을 table로 설정하는 방법이다. 이렇게 함으로써 div태그에 table속성에 있는 vertical-align 속성을 설정할 수 있다. #wrapper {display:table;} #cell {display:table-cell; vertical-align:middle;} Content goes here 하지만...아쉽게도 ie6에서는 display:table속성이 먹지 않는다는것을 명심해야한다. 방법 2. 이번에는 absolute속성을 이용하여 top속성에 50%를 주어 콘텐츠를 내리고 margin을 이용하여 콘텐츠 높이의 .. 더보기
CSS3: background-origin and background-clip background-originThe background-origin property is used to determine how the background-position of a background in a certain box is calculated. It takes three different values, border-box, padding-box and content-box. When you supply a value ofpadding-box, the position is relative to the upper left corner of the padding edge. With border-box it’s relative to the upper left corner of the border,.. 더보기
CSS3 명세 읽는 법 용어해설 Value유효한 값 또는 문법 Initial기본 값 (값을 지정하지 않은 경우의) Applies to속성을 적용할 수 있는 요소 (block, inline, inline-block ... all elements) Inherited속성이 자손에게 상속 되는지의 여부 (yes, no) Percentage퍼센티지 값을 적용할 수 있는지의 여부 (N/A 는 not applicable 또는 not available 으로써 적용할 수 없다는 의미) Media어떤 미디어 그룹에 적용할 수 있는 속성인지의 여부 (visual, interactive ...) Computed value절대 값이 어떻게 계산 되는지 포함되는 데이터 유형을 변수 형식으로 설명 (예를 들면 , ) a b공백으로 분리되어 나열된 값들은.. 더보기
background-attachment 속성 - background-attachment 속성 이 속성을 사용하면 문서가 스크롤될때 배경이미지의 스크롤여부를 지정할 수 있다. 이 속성을 사용하지 않으면 기본적으로 문서와 함께 스크롤 된다. - background-attachment : fixed fixed 로 지정하면 문서는 스크롤되지만 배경이미지는 , 스크롤 되지 않아서 배경위에 텍스트가 떠있는 느낌으로 표현된다. 더보기
정의 목록(<DL><DT><DD>) 정의 목록() 올바르게 쓰고 계신가요? DTD 명세(http://www.w3.org/TR/1999/REC-html401-19991224/struct /lists.html#edef-DD) 에 따르면, DL(Definition lists)은 DT(definition term), DD(definition description)와 함께 쓰인다. DT, DD의 순서에 상관이 없다. DT에는 인라인요소만 갖을 수 있다, DD에는 블록요소와 인라인요소 모두 갖을 수 있다. DT와 DD중 하나만 있어도 된다. DT와 DD는 여는 태그는 필요하지만 닫는 태그는 생략해도 상관없다 라고 쓰여 있습니다. 즉, 이렇게도 쓸 수 있지만, Dweeb Nerd 또는 Geek로 성숙 할 수 있는 흥분 잘하는 젊은 사람 Cracker .. 더보기
CSS 단어 자간 줄간격 조절 word-spacing:5pt; ////////단어간 간격 조절 letter-spacing:7pt; ////////자간 조절 line-height:200%; /////////줄간격 조절 (%,px,pt 등등 사용가능) 더보기
HTML CSS 에서 ul li 블릿, 기호, 점 없애기 HTML CSS 에서 ul li 블릿, 기호, 점 없애기 li 태그를 사용하게 되면 기본적으로 불릿이 생성이 된다. 예> 불릿 사용 안녕하세요. 블로그입니다. 결과> ● 안녕하세요. ● 블로그입니다. 예> 불릿 없애기 결과> 안녕하세요. 블로그입니다. 예> 불릿 없애기 + 들여쓰기 없애기 결과> 안녕하세요. 블로그입니다. 추가팁 리스트 태그(ul, ol, li)와 같은 기능을 CSS로 만들기.(list-style-type) 리스트 항목 lower-roman 리스트 항목 upper-roman 리스트 항목 lower-alpha 리스트 항목 upper-alpha 리스트 항목 upper-alpha 리스트 항목 disc 리스트 항목 circle 리스트 항목 square 리스트 항목 none 더보기
IE6 버그잡기 IE6 버그 1px의 높이의 선을 div로 만들어 사용하려는 전혀 되지 않는 것이 문제, width:1px은 잘 작동된다. MSIE6의 CSS에서 height 속성은 마치 min-height 처럼 작동하는 것 line-height를 1px로 잡는 등 여러방법을 동원했지만 답이 안나온다.. overflow:hidden; 추가한다. 오버플로 히든 값의 속성을 이해하기위해 포스팅하신 블로그 퍼옴 제가 UI 개발시 자주 사용하는 속성값중에서 overflow:hidden 이 있습니다. float 속성을 사용한 컨텐츠들을 바로 잡기 위하여 이 방식을 사용하고 있습니다. float 속성은 웹문서의 원하는 위치 어디에든 띄울수 있기때문에, 이를 물고기로 표현합니다. 하지만 이 물고기가 어항밖으로 나가면 안되고 이를 바.. 더보기