CSS15 40 Creative Design Layouts: Getting Out Of The Box Over the last months we have seen a strong trend towards more individual web designs. These designs use realistic motifs from our regular life, such as hand-drawn elements, script fonts, pins, paper clips, organic textures and scrapbooks. That’s not a big surprise as they manage to serve the function which faceless shiny glassy 3D-buttons completely fail to deliver: convey the individuality and .. 2008. 9. 4. :root :root 페이지내 모든 블럭의 최상위를 지정하는 것으로 html엘리먼트와 거의 비슷한 역할을 수행한다. Explorer Mac, Mozilla and Safari를 지원 사용예는 삼성전자 애니콜의 css img {border:0px; vertical-align:top;} input, select {font-size:12px; vertical-align:middle; color:#4D4D4D;} select {height:19px;} :root select {height:17px;} ol,ul,li {list-style:none; vertical-align:top;} 관련링크 : http://www.quirksmode.org/css/root.html 2008. 3. 7. 스크롤바 칼라 지정 스타일 적용시 body태그나 원하는 블록에 다음과 같은 스크롤바 칼라를 지정하게 되는데, 각각의 스타일이 IE 스크롤바에서 적용되는 영역이 표시되어 있습니다. 스타일 예 scrollbar-arrow-color:#fff; scrollbar-track-color:#fff; scrollbar-face-color:#ccc; scrollbar-highlight-color:#ccc; scrollbar-3dlight-color:#ccc; scrollbar-shadow-color:#ccc; scrollbar-darkshadow-Color:#ccc;스타일 적용 영역 2007. 11. 19. IE6에서 블록의 높이 100% 사용하기 IE7이나 FF2에서는 블록의 높이 100%의 사용이 가능하다. 예를 들면 내용 그러나 IE6의 경우는 블록의 높이가 100%로 유지되지 않는데 이때는 다음과 같은 방법을 사용하면 된다. 관련 예제 블로그 http://hyeonseok.com/pmwiki/index.php/Css/Height 주요내용 우선 height 100%를 사용하려면 html element와 body element의 높이를 100%로 확보해 주어야 합니다. #body 는 min-height 로 100%높이를 유지 해주고, #content-area 는 원하고자 하는 컨텐츠 영역을 확보 합니다. 이때, IE 는 min-height 를 지원하지 않으므로, conditional comment를 사용하여 height를 100% 로 확보 합니.. 2007. 11. 19. vertical-align에 대해 잘 못 알고 있는것 과일장수님의 글입니다. http://blog.naver.com/frui2store?Redirect=Log&logNo=20003795265 이전에 나온 모든 CSS관련된 책에는... vertical-align이 Block내의 상하 정렬 위치를 결정하는 속성으로 설명되어 있습니다. 이는 잘못된 것입니다. W3C.org에 권장된 사안이 아닌...브라우저에서 적용되는 예를 가지고 책의 내용을 만들었기 때문이죠. 저 또한 근 1년전까진 해도 그렇게 알고 있었지만, 익스플로러 6.0 SP1을 설치하고부터 이상하게 vertical-align속성이 이전까지와는 달라서, W3C.org에 들어가서 원문을 보니... vertical-align속성이 하는 역할은 inline내에서 서로 다른 font와 font-size가 배열.. 2007. 11. 1. 조건부 주석에 대해 조건부 주석은 윈도우의 익스플로러에서 표현(work)이 된다. 표현이 된다고 말한 이유는 크로스 브라우져의 지원시 익스플로서 사용자 만을 위한 표현 또는 콘텐츠 제공이 가능하기 때문이다. IE5부터 지원이 되었고 이후 5.0, 5.5, 6.0, 7.0 각각에 대해서도 구분하여 사용할 수 있다. 기본 양식은 html 주석문()에 대괄호를 이용 조건문을 추가한 것이다. 다음을 보자. ※ 아쉽게도 CSS에서 테스트 해보니 작동하지 않는다. 그럼 다음의 코드를 통해 결과를 확인 해보자. 예: IE에서 모두 보여진다. IE5에서만 보여진다. IE5.0에서만 보여진다.0 IE5.5에서만 보여진다. IE6에서만 보여진다. IE7에서만 보여진다. 'gte'를 이용: IE5보다 높은 버젼의 브라우져에서 보여진다. 'lt.. 2007. 10. 8. CSS에서의 구문태그들 한국소프트웨어진흥원의 웹표준 문서에서 발취한 내용입니다. 강조 (strong, em) 과 은 문장안에서 강조를 나타낸다. 보통의 브라우져에서 은 이탤릭으로, 은 볼드체로 나타나게 된다. 문장안에서 중요도가 있을 때에는 이 과 을 사용해야 하고 단지 이탤릭이나 볼드를 표현하고자 할 때에는 와 를 사용해야 한다. 스크린리터중에는 이나 태그를 사용하면 그 부분을 큰소리로 강조해서 읽어주는 제품도 있다. 정의 태그는 정의를 나타낼 때에 사용된다.코드 는 컴퓨터 코드를 나타내는 태그이고 는 코드의 결과 출력물을 나타낼때 에 사용한다.값의 표시 는 유저의 키보드 입력을 나타내고, 는 프로그램에서의 변수를 나타낸다. Enter키를 누르세요출처 는 인용이나 출처를 밝힐 때에 사용한다.축약 는 축약어를 나타내고 은 두문.. 2007. 9. 20. 웹표준을 따르면서 form으로 생기는 공백 없애기 잘못된 사용예 제목 내용 작성자 을 사용해서 제작하다 보면 디자인상에서 나타나서는 안되는 공백이 생기는 것을 볼 수 있다. 이와 같은 현상을 피하기 위해서 많은 사람들이 태그를 태그 사 이에 넣는다. 하지만 validator를 이용해 보면 이와 같은 사용은 잘못된 문법 오류라는 것 을 알 수 있다. 의 여백을 없애기 위해서 스타일을 사용하면 아주 간단하게 문제를 해결 할 수 있다. form { margin: 0; } 에 마진을 없앰으로서 간단하게 여백을 없앨 수 있고 위와 같이 사이에 태그를 넣는 잘못된 xhtml사용을 피할 수 있다. 2007. 9. 20. CSS를 이용한 유용성 높은 버튼 IE6, IE7, FireFox2에서의 적용 예 먼저, CSS 스타일입니다. ※ 마우스오버의 효과는 IE7과 FireFox에서만 작동합니다. 두번째, span과 input을 이용한 버튼파일입니다. CSS를 이용해 유용성이 높은 버튼을 만들어 보자 한글이 좋다^^ 마지막으로 이미지는 총4장이 필요하죠. 마우스오버를 사용하지 않을 경우는 2장이면 됩니다. buttonLO_02.gif (입력할 글자수가 많은 경우를 위해 길레 만들어 둡니다.) buttonL_02.gif (입력할 글자수가 많은 경우를 위해 길레 만들어 둡니다.) buttonRO_02.gif buttonR_02.gif 2007. 9. 20. 이전 1 2 다음