css82 CSS 브라우저에 따른 이미지 선택 !important CSS 브라우저에 따른 이미지 선택 익스플로어(IE6)에서는 알파값의 png-24가지원되지않는다 이에 따른 해결 방법으로 일단 적용되는 브라우저는 png파일로 아니면 gif로 하는방법이다. 이떄 사용하는것이 !important 예시는다음과 같다. #test{ background: url(주소/mask.png) !important; background: url(주소/mask.gif); 2009. 9. 5. IE6.x PNG-24 투명값 해결 익스플로어6(IE6)에서 PNG-24 투명값 해결하기 iepngfix 출처http://www.twinhelix.com/css/iepngfix/ 일단 위에서 다운받고 아래순서대로 하자 1.파일 iepngfix.htc 과 blank.gif 를 폴더에 넣는다 2.주의할 점으로는 위의 폴더를 반드시 기억할것 그위치에 따라 iepngfix.htc파일을 열어 경로를 수정해줘야 한다 ex) var blankImg = '/images/blank.gif'; 3.사용방법은 다음과같다 간단해서 좋지만 역시문제점...몇몇 부분에서 포지션이 지정안되고 z-index사용이 불가능하다. DD_belatedPNG 출처DD_belatedPNG 1.출처에서 다운로드 2.DD_belatedPNG.js를 적당한 폴더에 넣는다 3. 아래태그.. 2009. 9. 5. 플래시10과 sIFR 문제 현재 플래시10의 사용으로 sIFR 2.07 번전은 플래시cs4에서 편집이 불가능한것으로 보인다. 파일을 열면 unexpected file format으로 뜬다 다른버전을 이용할 것을 권한다. 2009. 9. 5. CSS 이미지 대채 sIFR sIFR (Scalable Inman Flash Replacement) flash, script, html, css를 사용하여 사용자의 PC에서 설치 되어있지 않은 디자인 폰트를 웹상에 출력 시킬수 있는 기법을 말합니다. 현재 sIFR은 2.0.7 까지 release된 상태이고 네이버 모두의 블로그를 비롯하여 많은 사이트에서 관련 기법을 사용중입니다. http://www.mikeindustries.com/blog/sifr/ 사용예 : http://section.blog.naver.com/sub/PostListByDirectory.nhn?option.directoryAlias=movie sIFR의 장점 sIFR 은 특정 태그와 class 이름을 기준으로 적용이 가능하며 시스템 폰트에서 제공하지 않는 디자인.. 2009. 9. 4. CSS 이미지 대치 기법 이미지 대치(image replacement) html에서 명확성을 위해서 가능한 이미지대신에 텍스트를 사용하는것이좋다.하지만 웹디자인너들이 선택할수 있는 폰트의 제약이 있고 css를 사용해서 특정스타일만 지정할 수 있기에 텍스트만으로 처리하기에 불가능한 경우가 있다. 로고를 보여준다던지..할때 그 예를 들수있다. 이를위해 이미지를 넣는 대신에 이미지대치기법을 사용한다. 호고를 단순히 이미지만으로 넣을경우 검색엔진에 텍스트는 무시될 수 있다. 따라서 텍스트는 검색되고 원하고자하는 이미지를 넣을때 사용되는것이 이방법이다.그방법들을 보자 FIR 방법 토드 파너가 만든 FIR(Fahrner Image Replacement) 방법이다. 이미지 대치 h2{ background: url(image.gif) no-r.. 2009. 9. 4. CSS 배경이미지 배경이미지 지정 배경이미지지정은 아주쉽다 예제를 보자 body{ background: url(image.gif); } 위의 CSS는 배경을 image.gif 파일로 지정한경우이다. 이외 상세히 지정할때 속성값들을 자세히보면 다음과 같다 url() 백그라운드로 잡을 이미지이름,위치 #FFF 색깔 repeat 그림의 반복 배치, repeat-x(가로보 그림을 반복배치), repeat-y(세로로 그림 반복배치), no-repeat(박복없이배치) 배치한 그림의 위치 left,centerright.... 적용된예를보자 #id{ background:transparent url(http://cfs.tistory.com/www/resource/images/login_bg.gif) repeat scroll 0 0 } 티.. 2009. 9. 4. CSS 포지셔닝 플로팅 CSS float float는 엘리먼트를 띄운다는의미로 왼쪽 오른쪽 두가지 지정할 수 있는 속성값을 가진다. 오른쪽위의 첫번째 그림은 아무것도 지정하지않았을때 일반 포지셔닝이다. 왼족위는 하나의 박스를 float:left로정의 한경우이다. 플로트의 경우 가로폭이 충분하지않으면 아래로 밀려난다. 오른쪽아래가 그예시 또 박스높이가 다른경우는 왼쪽아래처럼 왼족긑으로 떨어지지않고 플로트된 다른 엘리먼트에 달라붙는다. 위그림은 플로트 해제를 보여주는 예시이다. 첫번째는 역시 아무것도 지정하지않았을떄. 두번째는 박스에 float:left를 주었을떄이다. 이떄 라인박스가 오면 박스크기만큼 작아지면서 흘려지게된다. 왼쪽 아래처럼 각블럭을 해체하려면 clear를 쓰면 된다. 마지막으로 플로트를 감싸는 엘리먼트가 있을경우.. 2009. 9. 3. CSS 포지션닝 고정위치(fixed) 고정위치(fixed) 고정위치는 화면에서 어떤위치를 차지하던지 일정한위치에 유지하면서 사용자눈에 보이게된다. #box{ position:fixed; left:20px; top:30px; } 티스토리 블로그 스킨중에서 2단형에 happt blog 스킨을 보면 적용된것을 알 수 있다. 하지만 IE6에서는 이고정위치를 지원하지않는 다. 이를해결하기위해서 자바스크립트를 사용할 수있긴하다.. http://snook.ca/archives/html_and_css/experiment_with 2009. 9. 2. CSS&HTML 포지셔닝 웹문서의 포지션닝 웹문서에서 위치는 크게 3가지로 요약된다 일반 흐름(normal flow) 플로트(float) 위치(position) 일반흐름 방식은 별도 지정이 없을떄 를 말한다. 엘리먼트를 우리는 블록엘리먼트와 인라인 엘리먼트로 구분 할 수 있는데 div ,p ,h1등은 하나의 블록을 차지한다. 하지만 strong, span같은 경우는 인라인 엘리먼트로 한줄에 표시된다. 포지션닝 :: 상대위치 원래의 위치로부터 지정한만큼 이동한다 그림에서 빈박스가 원래의 위치고 진회색이 지정하여 이동한 경우이다. #box{ position: relative; left:20px; top 20px; } 포지셔닝 :: 절대위치 상위엘리먼트중에서 가장가까운 엘리먼트의 위치를 기준으로 한다 만약 특별한 상위 엘리먼트가 없다.. 2009. 9. 2. CSS 마진과 패딩의 이해 CSS 마진과 패딩의 이해 그림을 보면 연한파란색이 콘텐츠 그리고 안에 패딩이 얼마주어지고 다음은 선(border) 마지막으로 마진이 화면을 구성한다. 위에것을보면 가로 756px 세로84px 패딩5px 보더0 마진0 으로 볼수 있다. IE6에서는 계산이 달라서 의도한것보다 작게나올수 있다 이에대한 해결은 너비를 지정한요소에는 패딩을 지정하지않고 그대신 그요소의 부모엘리먼트나 자식엘리먼트에 패딩을 마진을 지정해주면 문제가 일어나지않는다. 마진겹침 현상 왼쪽은 마진을 위의 박스는 마진30px 아래박스에 20px을 준경우다 실제 왼쪽같이 나올걸 기대하지만 오른족과 같이 겹침 현상으로 더 아래박스의 20px은 무시되고 겹친다. 이런현상은 엘리먼트안에서도 일어난다. 위그림의 흰색은 내용이고 회색에 마진 20px.. 2009. 9. 2. 이전 1 ··· 4 5 6 7 8 9 다음
